JavaScriptにデバッグコードを追加する方法：alert()とdocument.write()を使った簡単なデバッグ手法

JavaScriptにデバッグコードを追加する基本

JavaScriptでプログラムの動作を確認したい場合、最も手軽な方法は alert() や document.write() といったメソッドを利用することです。これらのメソッドを使えば、変数の中身や処理の進行状況を簡単に画面上でチェックできます。

alert()を使ったデバッグ例

以下は、alert() を使って関数の呼び出し前後で変数の値を出力する、シンプルなデバッグコードの例です。

var debugging = true;
var whichImage = "widget";

if( debugging )
alert( "Calls swapImage() with argument: " + whichImage );
var swapStatus = swapImage( whichImage );

if( debugging )
alert( "Exits swapImage() with swapStatus=" + swapStatus );

このコードでは、フラグ変数 debugging が true の場合にのみアラートが表示される仕組みになっています。このようにデバッグ用のフラグを用意しておけば、本番環境へ移行する際にフラグを false に変更するだけで、デバッグメッセージを一括して無効化できるため便利です。

alert()の表示内容と順序を確認するポイント

alert() が表示される順番とその内容を注意深く観察することで、プログラムが意図した通りに処理を進めているかどうかを容易に把握できます。例えば、想定した順序でアラートが表示されない場合や、変数の値が期待と異なる場合は、その箇所にロジック上の問題がある可能性が高いといえます。

より現代的なデバッグ手法との組み合わせ

なお、現在のWeb開発では console.log() を使ったコンソール出力や、ブラウザの開発者ツール（DevTools）に搭載されたブレークポイント機能を利用するのが主流です。alert() は処理のたびにダイアログが開くため連続的な確認には不向きですが、小規模なコードの動作検証や、古い環境でのトラブルシューティングにおいては今でも手軽で有効な手段となっています。