JavaScriptの処理が思うようにいかない時、エラーに対して一つ一つをconsole.logで調べていたらあっと言う間に時間を溶かしてしまいます。
今回は自身の学習として、GoogleのToolsドキュメントを参考にデバッグをやってみました。
バグの再現
参考動画と同じ環境を用意します。
command(⌘) + option(⌥) + i でDevToolを開いてソースコードを確認します。
Sourcesの中から、JavaScriptファイルを確認。
現時点では、1 + 1 = 11 でバグってます。
今回は、クリックを起点に発火するイベントなので、Event Listener Breakpointsのclickを選択した状態でcommand(⌘) + Rでページを更新します。
するとクリックで起動するfunctionがハイライトされ、一行ずつ実行しながら確かめることができるようになります。
Step over next function callを押すと、一行ずつ順番にコードを実行できます。
ブレークポイントの活用
フレーム内の行数をクリックすると、ブレークポイントが設定できます。ブレークポイントを設定した状態で実行すると、代入された変数の値や、演算処理の結果をconsole.logを使わずに見ることができます。
上記の例の場合、この結果からappend1とappend2に代入された値が文字列型になっていることがバグの原因とわかります。
Scope
スコープ内の状態はScopeを確認します。Scopeには、実行コンテキストの情報がある場合のみ表示されます。
Watch Expressions
Watch Expressionsは、+をクリックしてjavascriptを入力することで任意の情報を取得できます。
int型であるべき値が、String型になっていることが確認できます。
修正
Dev Tools上でバグを確認したら、そのまま修正・実行を行うことができます。
-
Resume script executionをクリックします。 -
Code Editor上で該当箇所を修正します。 -
command(⌘) + s で保存します。
-
Deactivate breakpointsをクリックします。