JavaScript: デバッグの仕方 (1)
デバッグの仕方
プログラムの記述に誤り (バグ) があると プログラムは正常に動作しません。 プログラムを作るときにはこういう話がよく起こります。 このような誤りを修正する作業を デバッグ と言います。 プログラムが動作しない原因を調べるときには デバッガ と呼ばれるツールを使います。 2020年頃のWebブラウザでは、Chrome, Firefox, Edge などデバッガを標準で備えています。 デバッガでエラーの発生した場所（プログラムテキストの行番号） を調べたり、エラーの原因を調べたりします。
サンプル
- TestJS_debug1_1.html
正常なサンプル。ボタンを押すとダイアログを表示。 - TestJS_debug1_2.html
プログラムの記述に誤りがあり、正常に実行できないサンプル。
以下、誤りのあるサンプルを Web ブラウザのデバッガで眺めてみます。
デバッガを起動する
下は Edge106 の例です。 Edge の右上の方にある 設定など のボタンからメニューを開き、 その他ツール → 開発者ツール を開くと デバッガの画面が表示されます。
デバッガの画面の コンソールのタブ を選ぶとプログラムの実行状況が表示されます。
デバッガは別のウインドに分割して表示できます
デバッガの右上の方にある DevTools のカスタマイズと制御 のボタンを押すと「ドッキングの位置」などのメニューが表示されます。 「別のウインドで表示」のボタンを押すとデバッガが別ウインドになります。
エラーメッセージを眺める
Edge のデバッガで誤りのサンプルを眺めると？
Edge で TestJS_debug1_2.html を表示し、 デバッガのコンソール画面を見ると下のように表示されます。
赤色の表示でプログラムの実行中にエラーが起こったことを示しています。 エラー内容が表示され、 右端にエラーが発生したファイル名や行番号などが表示されます。 ファイル名をクリックするとソースのタブの表示に切り替わり、 プログラムのエラーの発生した行を表示します。
1個目のエラーはソースファイル TestHTML_js_debug1_2.html の 17行目の16カラムに望ましくない文字 (unexpected token) コロン : が見つかった 文法エラー (Syntax Error) があったことを示しています。 コロン : をセミコロン ; に直すとこのエラーは出なくなります。
2個目のエラーはサンプル HTML のボタンを押したときに出力されます。 このエラーは 関数 hello() が見つからない (not defined = 定義されていない) 参照エラー (Reference Error) が起こったことを示しています。 1個目の文法エラーで関数 hello() 自体が存在しない扱いになるため このエラーが起こります。 Reference Error は関数が見つからないときに出るエラーで、 プログラムの書き間違いでよく起こります。
Chrome のデバッガの場合
Chrome のデバッガも Edge のデバッガと同じような画面です。 ツールニューの その他のツール → デベロッパーツール → console のタブ を選ぶと表示されます。
出てくるエラーは Edge と同じです。説明文も同じです。
1個目のエラーは、コロン :
が文法的に正しくない場所にあると言っています。
2個目のエラーは、関数 hello() が見つからない参照エラーです。
Firefox のデバッガの場合
Firefox のツールニューから その他のツール → ウェブ開発ツール を選ぶとデバッガが表示され、コンソール のタブでプログラムの実行状況が表示されます。
エラーの内容も Edge や Chrome と同様です。
いろいろ
- デバッグの仕方 (2) に続く。
- JavaScript: エラー処理 try, catch, finally
存在しない関数をわざと呼んで ReferenceError を発生させる話を書いています。
TestJS_try_catch01.html