Processing でのデバッグ。標準デバッガの使い方

プログラミングにデバッグは付きもの。
みなさんは Processing でのデバッグどうされてますか？

変数値や条件分岐のちょっとした確認なら println() を入れるのも手軽にできて有効な方法です。
いまあるコードに手を入れたくないなという場合は Processing 3.0 系から標準装備されたデバッガを使うのもいいですね。

このノートでは、Processing 3.0 系の標準デバッガの使い方の簡単な説明をいたします。

デバッガとは？

そもそもデバッガとは、以下のようなことをしてくれる機能を持ったもので、バグを見つけるときの便利な道具になってくれるものです。

1.コードの実行を一時停止させる。（ブレークポイント）
2.変数の値を見る。

デバッガは道具であって、デバッグをするのはあくまでも人。デバッガがバグを見つけたり直したりしてくれるわけではありません。

Processing 3.0 系標準デバッガ

Processing 3.0系では、標準エディタにデバッガが標準搭載されています。
使い方は簡単！デバッグしたいコードを開いてデバッガボタンを押すだけ！

実際にやってみましょう。
まずはサンプルとしてこちらのコードを Processing エディタで開いてください。

// 18.04.09 標準デバッガの使い方
// Processing 3.2.1

void setup() {
 size(400, 200);
 colorMode(HSB, 360, 100, 100, 100);
 noLoop();
 noStroke();
 background(0, 0, 0);
}

void draw() {
 for (int i = 1; i < 200; i += 10) {
   
   float x = i * 2;
   float r = i % 50;
   float c = i & 360;

   fill(c, 80, 90, 100);
   ellipse(x, 100, r, r);

 }
 exit();
}

そして、デバッガボタンを押してください。
デバッグモードが ON になり、Variables ウィンドウが新たに開きましたね？

ではこの状態からブレークポイントを設定して、コードの実行を一時停止させてみましょう。
コード中の

float x = i * 2;

の行番号の所をクリックしてください。クリックしたところが◆に変わったと思います。

これで、この行にブレークポイント（一時停止する場所）が設定されました。

この状態で Run（Debug） してください。

すると、先程ブレークポイントを設定したところが三角形に変わってここで一時停止しているということがわかります。

Variables ウィンドウでは、一時停止した状態での各変数の値をチェックすることができます。
チェックしてみると…

あれ！？ 変数 x の値が出てこない？

そうなんです。
ブレークポイントは設定した行まで実行して一時停止ではなく、その行の直前で一時停止なんです。

ここで、ブレークポイントから順に一行ずつ実行を進めてみましょう。
Step ボタンを一回押してください。

ここで変数 x の値をチェックすると、思ったとおりの値になっていますね。

Step ボタンを一回押す毎にコードが順に進んでいくのがわかるでしょう。
図もだんだんと描画されていきますね。

どんどん押していくと、for ループも確かにループしているのがわかります。

Step ボタンの隣の Continue ボタンは、次に設定されているブレークポイントまで一気に進んで一時停止させるボタンです。

押すと for ループを回って同じブレークポイントで一時停止することになります。

さて、ひととおり確認されたら Stop ボタンを押して終了してください。

基本的な使い方は以上になります。

動きが怪しそうなところにブレークポイントを設定して一時停止させ、その時の変数の値をチェックし、if 文や for 文などコードの実行の流れが思ったとおりに進んでいるかを Step で確認していきながらバグを探すという使い方です。

println() じゃあかんのか？

デバッグのやり方には、コード中に println() 文を埋め込んでいくという方法もあります。

println() 文でチェックしたい変数をプリントアウトするようにすれば変数の値を確認できますし、if 文や for 文の中に書いておけば実行の流れを確認することもできます。

バグの大体の目星がついているときには、デバッガを起動してブレークポイント設定してとかやるよりも、println() を一発入れて確認した方が手っ取り早い場合が多いです。

ただ、一度に多数の変数の確認を行うのには向かないですし、なんと言ってもコードそのものを変えてしまうというところが最大の欠点だと思います。

デバッグの最中に println() 文をコード中に挿入したり削除したりするわけですから、
　・バグを探す前
　・バグを探している最中
　・バグを取り除いた後
それぞれで違うコードということになってしまいます。

たかが println() 文を書いたり消したりとはいえ、不注意で消すべきでないところまで消してしまったりとかが無いわけではありません。
そういう意味では面倒でもデバッガを利用する方が安心でしょう。

どちらも一長一短ってことで、うまく使い分けられるといいですね。
それでは、デバッガや println() 文をうまく活用して Happy Debugging！

参考

Processing 3.0 系標準デバッガについて、クリエイティブコーディングの大家 Shiffman 大先生のチュートリアル
https://vimeo.com/140134398