デバッガーを使うと、コードがどのように実行され、どの値を返しているかがわかるようになります。

以下のコードがあるとします。

function add(a, b) {
  const result = a + b;
  return result;
}

const resultValue = add(2, 3);

add(20, 9);
add(52, 50);

console.log(resultValue);

こちらのコードにdebuggerを追加します。

debugger;
function add(a, b) {
  const result = a + b;
  return result;
}

const resultValue = add(2, 3);

add(20, 9);
add(52, 50);
debugger;
console.log(resultValue);

Chromeの右上の縦点線をクリックし、その他ツールのデベロッパーツールをクリックします。

image2

リロードすると、

image3

Paused in debuggerと表示され、デバッガーが起動されました。

これは、コードの中にdebuggerがあれば、自動で表示されます。

主に、右側のScopeの内容を見て、関数の値や状況を確認します。

image4

現在は、add関数を使用する前のところで一時停止しているので、resultValueは、undefinedとなっています。

デバッガーの操作は、主に右上の矢印を操作します。

image5

一番左の矢印は、次のdebuggerまでコードを走らせます。

image6

クリックすると、

image7

次のdebuggerまで移動しました。

右側のScopeを見ると、resultValuesが5になっているのがわかります。

もう一度左の矢印をクリックすると、

image8

デバッガーが終了しました。

次に左から2番目の矢印は、次の関数実行まで走ります。

関数内の実行はスキップされます。

image9

クリックすると、

resultValueまでスキップしました。

image10

もう一度クリックすると

image11

add(20, 9)までスキップしました。

この時、resultValueが通過したので、右側のScopeの値がundefinedから5へ変わりました。

左から3番目の矢印は、次の関数内の実行をスキップせず、一時停止してくれます。

image12

3番目の矢印を一度クリックすると、resultValueで一時停止します。

もう一度クリックすると、

image13

関数内で一時停止しました。

右側のScopeを見てみると、aの値とbの値が表示されました。

また、add(a, b)内の『a』にマウスを重ねてみると、

image14

resultValueの時に指定した『2』が表示されました。

もう一度、左から3番目の矢印をクリックしてみます。

image15

右側のScopeのresultに値が表示されました。

さらに、コードの3行目の右側に、aとbの値も表示されました。

左から4番目の矢印は、次のdebuggerもしくは次の関数までスキップします。

image16

左から4番目の矢印を2回クリックすると、

image17

次の関数までスキップしました。

今回のように、単一の関数の場合使用する機会がないですが、Reactのように複数の関数がある場合、使用する機会があります。

最後に、左から5番目の矢印は、次の関数内の実行をスキップせず、一時停止してくれます。

image18

左から3番目の矢印の違いは、左から3番目の矢印は非同期処理に内の関数で一時停止し、左から5番目は非同期処理内のコードはスキップするところです。

ブログ一覧