p5.js デバッグ方法

p5js, 公開資料
プログラムのミスを見つける

プログラムの記述に何らしかのミスがあると正しく実行されず、画面に何も表示されなくなる場合があります。こうしたミスは「エラー」や「バグ」と呼ばれ、ミスを修正する作業は「デバッグ作業」という言葉で表されます。p5jsでは実行をWebブラウザ上で行うため、デバッグ作業もWebブラウザで行うことになります。

ここではGoogle Chromeを用いたデバッグの方法について解説します。

プログラムを実行した際、エラーがあると何も表示されなることがあります。通常は開発環境上でエラーがでるのですが、p5.jsはJavaScriptをWebブラウザで実行しているため、標準ではVisual Studio Codeにはエラーが表示されません。

p5.jsのデバッグはWebブラウザ上で行います。Chromeのウィンドウの右側にあるメニューボタンから、「その他のツール>デベロッパーツール」を選択。

デベロッパーツールにはデバッグ用の様々な機能がありますが、まずはConsoleを確認してみてください。実行が中断してしまった理由のヒントが表示されていると思います。この例では「packground」というスペルミスが原因であることがわかります。

print()や「Debugger for Chrome」など、より高度なデバッグ方法に関しては後日解説します。

Related Posts

No results found

メニュー