👻

JavaScript / デバッグの基礎

2025/01/30に公開

DevTools(Chrome)の開き方

Windows / Linux : F12キー または Ctrl + Shift + I
Mac : Cmd + Option + I

ブレークポイントの設定方法

スクリプト上で設定する方法

  1. 「Sources」タブを開く
  2. デバッグしたいファイルを選択
  3. 行番号をクリックするとブレークポイントが設定される
  4. ページをリロードして実行

コード上で設定する方法

console.log("開始");
debugger; // ここでデバッグツールが開き、一時停止する
console.log("終了");

ステップ実行の主要な方法

ステップイン(Step Into)

関数の内部に入って、詳細な処理を確認する。

function greet() {
    console.log("Hello World");
}

greet(); // ここでStep Intoすると関数内部に入る

ステップオーバー(Step Over)

関数を実行するが、その中には入らず次の行に進む。

function greet() {
    console.log("Hello World");
}

greet(); // ここでStep Overすると関数の中には入らず、次の行に進む
console.log("次の処理");

ステップアウト(Step Out)

現在実行中の関数の処理を最後まで実行し、その関数を呼び出した元の場所に戻る。
「関数の途中だけど、もうこの関数の詳細は見なくていい。」という時に便利。

Scopeタブの使い方

Scopeタブとは

現在のコードの実行コンテキストにおける変数や関数の状態を確認することができる。

確認できる情報

1. Local Scope
現在実行中の関数内で宣言されている変数やパラメータが表示される。

2. Closure Variables
関数内で定義されていても外部のスコープからアクセスできる変数(クロージャ)が表示される。

3. Global Scope
プログラム全体でアクセス可能なグローバル変数や関数が表示される。

4. This
現在のコンテキストでのthisの値が表示される。

実践用サンプルコード

class Calculator {
  constructor(name) {
    this.name = name;
  }

  add(a, b) {
    console.log(`${this.name} is calculating: ${a} + ${b}`);
    return a + b;
  }

  subtract(a, b) {
    console.log(`${this.name} is calculating: ${a} - ${b}`);
    return a - b;
  }
}

const calc = new Calculator("MyCalc");

function main() {
  console.log("プログラム開始");
  let sum = calc.add(10, 5);
  console.log("合計:", sum);

  let difference = calc.subtract(10, 5);
  console.log("差分:", difference);

  setTimeout(() => {
    console.log("3秒後のメッセージ");
  }, 3000);
}

main();

Discussion