デバッグのヒント

作成日 : 2020-02-28

最終更新日 :

デバッグのヒント

JavaScript のデバッグについてまとめる。

ソースコードに変更を加えるデバッグ

画面表示によるデバッグ

端末や画面に変数や式の値を表示させるのは古典的な方法である。ブラウザに表示させる alert() 関数はよく用いられてきたが、 Node.JS のようにブラウザを使わない JavaScript 処理系のことを考えれば、console.log() 関数がよい。
https://developer.mozilla.org/ja/docs/Web/API/Console/log
を参照のこと。

debugger 文

デバッガが使える環境にあれば、alert() や console.log() を使わずとも、debugger という文を追加することで同様のことができる。デバッガを使っている状態で起動すると、実行は debugger 文の場所で停止する。

ソースコードに変更を加えないデバッグ

ソースコードに変更を加えないデバッグも可能だ。端末上のデバッグや、エディタベースのデバッグ、ブラウザベースのデバッグがある。

端末上のデバッグ

Node.js でデバッグする例を述べる。この場合の端末上のデバッグとは、コマンドラインのデバッグと同じことだ。詳しくは下記を（英語）参照。
https://nodejs.org/dist/latest-v18.x/docs/api/debugger.html

以下、saluton.js という JavaScript のプログラムをデバッグしよう。saluton.js は次の通りである。

const a = "Saluton";
const b = a.concat(", mondo!");

デバッグ例は次のとおりである。

PS C:> node inspect .\saluton.js
(node:18648) ExperimentalWarning: AbortController is an experimental feature. This feature could change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
< Debugger listening on ws://127.0.0.1:9229/cf99f4d8-9c39-47ec-afc2-40939a3e6613
< For help, see: https://nodejs.org/en/docs/inspector
<
 ok
< Debugger attached.
<
Break on start in saluton.js:1
> 1 const a = "Saluton";
  2 const b = a.concat(", mondo!");
  3
debug> sb(1)
> 1 const a = "Saluton";
  2 const b = a.concat(", mondo!");
  3
debug> sb(2)
* 1 const a = "Saluton";
> 2 const b = a.concat(", mondo!");
  3
debug> watch('a')
debug> watch('b')
debug> s
break in saluton.js:2
Watchers:
  0: a = 'Saluton'
  1: b = undefined

* 1 const a = "Saluton";
> 2 const b = a.concat(", mondo!");
  3
debug> s
break in saluton.js:2
Watchers:
  0: a = 'Saluton'
  1: b = 'Saluton, mondo!'

* 1 const a = "Saluton";
> 2 const b = a.concat(", mondo!");
  3
debug> .exit
PS C:\>

以下、デバッガのコマンドを説明する。

ウォッチャー

ブレークポイントのたびに、式や変数の値をウォッチ（確認）することができる。my_expression という式をウォッチするには、 watch('my_expression')とタイプする。ウォッチをやめるには、unwatch('my_expression')とタイプする。

ステップ実行

次のコマンドがある。

cont, c: 実行継続
next, n: 次のステップ
step, s: ステップイン
out, o: ステップアウト
pause: 実行コードの一時停止(開発者ツールのポーズボタンと同様)

ブレークポイント

以下の例で、sb(), cb() はそれぞれ setBreakpoint(), clearBreakpoint() の略記法である。

sb(): 現在行にブレークポイントを設定する
sb(line): 指定の line にブレークポイントを設定する。line は行数
sb('fn()'): 指定した関数 fn() の本体１行めにブレークポイントを設定する
sb('script.js', 1): script.jsの 1 行目に条件付きブレークポイントを設定する。
sb('script.js', 1, 'num < 4'): script.js の 1 行目に条件付きブレークポイントを設定する。条件は num < 4が true と評価されるときのみである。
cb('script.js', 1): script.jsのブレークポイントをクリアする on line 1

まりんきょ学問所＞ JavaScript 手習い＞デバッグのヒント