読み込み中...

JavaScriptのdebugger文を活用する8つの方法

JavaScriptのdebugger文を使ったデバッグ方法 JS
この記事は約18分で読めます。

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

本記事のサンプルコードを活用して機能追加、目的を達成できるように作ってありますので、是非ご活用ください。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を満たす現役のプログラマチームによって監修されています。

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

●JavaScriptのdebugger文とは？

JavaScriptのデバッグといえば、console.logを使ったり、ブラウザの開発者ツールを駆使したりと、様々な方法がありますよね。

でも、実は「debugger文」を使えば、もっと効率的にデバッグができるんです。

debugger文は、JavaScriptのコード内に記述することで、プログラムの実行を一時停止し、デバッグモードに移行させる特別な文です。

この文を適切な位置に配置することで、コードの問題点を特定しやすくなります。

○debugger文の役割と使い方

debugger文の主な役割は、プログラムの実行を一時停止させ、その時点での変数の値や状態を確認できるようにすることです。

デバッグモードに入ると、ブレークポイントを設定した場所で実行が止まり、ステップ実行やウォッチ式の評価などの機能を使って、コードの動作を詳細に調べられます。

debugger文の使い方は至ってシンプル。

コードの任意の位置に「debugger;」と記述するだけです。

例えば、次のようなコードがあるとします。

function calc(a, b) {
  debugger;
  return a + b;
}

const result = calc(1, 2);
console.log(result);

ここでは、calc関数の内部にdebugger文を記述しています。

このコードを実行すると、debugger文の位置で実行が一時停止し、デバッグモードに入ります。

○debugger文を使うタイミング

では、どのようなタイミングでdebugger文を使えばいいのでしょうか？

基本的には、コードの動作に不具合があり、原因を特定したい場面で使うのが効果的です。

具体的には、次のようなケースが考えられます。

  • 変数の値が想定外になっている場合
  • 関数の引数や戻り値が正しくない場合
  • ある条件下でのみエラーが発生する場合
  • ループの回数が想定と異なる場合

このような状況で、怪しい箇所にdebugger文を仕込んでおけば、その地点でプログラムが止まるので、変数の中身を確認したり、ステップ実行で処理の流れを追ったりしながら、バグの原因を突き止められます。

ただし、debugger文は開発段階でのみ使うべきで、製品版のコードには残さないように注意が必要ですね。

デプロイ前には必ず取り除くようにしましょう。

●Chrome開発者ツールを使ったデバッグ方法

JavaScriptのデバッグといえば、多くの人がChrome開発者ツールを思い浮かべるのではないでしょうか。

この強力なツールを使いこなせば、debugger文によるデバッグがさらに効率的になります。

○開発者ツールの起動方法

まずは、Chrome開発者ツールの起動方法から確認しておきましょう。

Chromeブラウザで目的のWebページを開いた状態で、次のいずれかの方法で開発者ツールを起動できます。

  1. キーボードショートカット「Ctrl + Shift + I」（MacOSの場合は「Cmd + Option + I」）を押す
  2. Chromeメニューから「その他のツール」→「デベロッパーツール」を選択する
  3. Webページ上で右クリックし、「検証」を選択する

開発者ツールが起動すると、ブラウザ画面の下部または右側にパネルが表示されます。

このパネルには、HTML、CSS、JavaScriptなどを調べたり編集したりするための様々なタブがあります。

○ブレークポイントの設定

Chrome開発者ツールを使ってデバッグする際、最も重要なのがブレークポイントの設定です。

ブレークポイントを設定することで、指定した場所でプログラムの実行を一時停止し、その時点での変数の状態などを確認できます。

ブレークポイントを設定するには、次の手順を実行します。

  1. 開発者ツールの「Sources」タブを開く
  2. 左側のパネルでデバッグ対象のJavaScriptファイルを選択
  3. コードエディタ部分で、ブレークポイントを設定したい行の行番号の左側をクリック

これで、クリックした行にブレークポイントが設定されます。

ブレークポイントを設定した行は、行番号の左側に青い印が表示されます。

○サンプルコード1：debugger文を使ったデバッグ

それでは、実際にdebugger文とChrome開発者ツールを使ったデバッグの例を見てみましょう。

次のようなJavaScriptコードがあるとします。

function calculate(a, b, operator) {
  let result;
  debugger;
  switch (operator) {
    case '+':
      result = a + b;
      break;
    case '-':
      result = a - b;
      break;
    case '*':
      result = a * b;
      break;
    case '/':
      result = a / b;
      break;
    default:
      throw new Error('無効な演算子です');
  }
  return result;
}

const x = 10;
const y = 5;
const op = '+';
const answer = calculate(x, y, op);
console.log(`${x} ${op} ${y} = ${answer}`);

このコードでは、calculate関数内にdebugger文を記述しています。

このコードをChrome開発者ツールでデバッグすると、以下のようになります。

  1. ブラウザでこのコードを実行すると、debugger文の位置で実行が一時停止する
  2. 開発者ツールの「Sources」タブに切り替えると、停止位置が表示される
  3. 「Watch」パネルや「Scope」パネルで、その時点での変数の値を確認できる
  4. 「Step over」ボタンなどを使って、コードを1行ずつ実行しながら動作を確認できる

このように、debugger文とChrome開発者ツールを組み合わせることで、コードの動作を詳細に追跡し、バグの原因を特定しやすくなります。

○変数の値の確認と変更

Chrome開発者ツールを使ったデバッグのもう一つの強力な機能が、変数の値の確認と変更です。

プログラムの実行を一時停止した状態で、「Watch」パネルや「Scope」パネルを使えば、その時点での変数の値を確認できます。

さらに、これらのパネルで変数の値を直接編集することもできます。

この機能を使えば、別の値を代入した場合の動作を確認したり、特定の条件をシミュレートしたりできるので、バグの原因を絞り込む際に役立ちます。

○サンプルコード2：変数の値を変更してデバッグ

先ほどのサンプルコードを使って、Chrome開発者ツールで変数の値を変更しながらデバッグしてみましょう。

function calculate(a, b, operator) {
  let result;
  debugger;
  switch (operator) {
    case '+':
      result = a + b;
      break;
    case '-':
      result = a - b;
      break;
    case '*':
      result = a * b;
      break;
    case '/':
      result = a / b;
      break;
    default:
      throw new Error('無効な演算子です');
  }
  return result;
}

const x = 10;
const y = 5;
const op = '+';
const answer = calculate(x, y, op);
console.log(`${x} ${op} ${y} = ${answer}`);
  1. このコードを実行し、calculate関数内のdebugger文の位置で実行が停止している状態で、「Scope」パネルを確認する
  2. 「Local」セクションに、関数の引数であるa、b、operatorの値が表示されているはず
  3. operatorの値を、+から-に変更してみる
   operator = "-";
  1. 「Resume script execution」ボタン（≫アイコン）をクリックして、プログラムの実行を再開する
  2. コンソールに出力された結果が、次のようになっていることを確認する
   10 - 5 = 5

このように、Chrome開発者ツールを使えば、変数の値を自由に変更しながらデバッグできます。

この機能は、特定の条件下でのみ発生するバグを追跡する際に威力を発揮します。

●VSCodeを使ったデバッグ方法

Chrome開発者ツールに加えて、もう一つの強力なデバッグ環境がVSCodeです。

VSCodeは、軽量でありながら高機能なコードエディタで、JavaScriptのデバッグにも非常に便利です。

○VSCodeのデバッグ機能の概要

VSCodeには、豊富なデバッグ機能が内蔵されています。

主な特徴は次の通りです。

  • ブレークポイントの設定と条件付きブレークポイント
  • ステップ実行（ステップイン、ステップオーバー、ステップアウト）
  • 変数の監視とインラインでの値の編集
  • コールスタックとスコープの確認
  • ウォッチ式の評価

これらの機能を使いこなせば、JavaScriptのコードをより効率的にデバッグできるようになります。

○デバッグ設定ファイルの作成

VSCodeでデバッグを行うには、まずデバッグ設定ファイルを作成する必要があります。

このファイルには、デバッグ対象のプログラムや、使用するデバッガーの種類などを指定します。

デバッグ設定ファイルは、.vscode/launch.jsonというファイル名で保存します。

ここでは、Node.jsプロジェクトの例を紹介します。

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "プログラムの起動",
      "skipFiles": [
        "<node_internals>/**"
      ],
      "program": "${workspaceFolder}/app.js"
    }
  ]
}

この設定では、app.jsをデバッグ対象として指定しています。

必要に応じて、ファイル名やパスを変更してください。

○サンプルコード3：VSCodeでdebugger文を使ったデバッグ

それでは、VSCodeでdebugger文を使ってデバッグする例を見てみましょう。

次のようなJavaScriptコードがあるとします。

function getFibonacci(n) {
  if (n <= 1) {
    return n;
  }
  debugger;
  return getFibonacci(n - 1) + getFibonacci(n - 2);
}

const number = 6;
console.log(`Fibonacci(${number}) = ${getFibonacci(number)}`);

このコードは、フィボナッチ数を計算する再帰関数getFibonacciを定義し、number番目のフィボナッチ数を計算しています。

getFibonacci関数内にdebugger文を記述しています。

VSCodeでこのコードをデバッグするには、次の手順を実行します。

  1. コードエディタの左側の「実行とデバッグ」アイコンをクリックし、デバッグビューを開く
  2. 「launch.json」ファイルを開き、デバッグ設定を確認する
  3. デバッグ対象のファイルを開き、ブレークポイントを設定する（debugger文の行にブレークポイントが自動で設定される）
  4. 「実行とデバッグ」ビューの「デバッグの開始」ボタン（緑の再生ボタン）をクリック

すると、プログラムが実行され、debugger文の位置で停止します。

この状態で、変数の値の確認やステップ実行などのデバッグ操作が行えます。

実行結果

Fibonacci(6) = 8

○ブレークポイントの設定とステップ実行

VSCodeでは、コードエディタの行番号の左側をクリックすることで、ブレークポイントを設定できます。

ブレークポイントを設定した行は、赤い丸印で示されます。

プログラムの実行が停止した状態で、次のようなステップ実行が可能です。

  • ステップオーバー（F10）-> 現在の行を実行し、次の行に進む
  • ステップイン（F11）-> 関数の呼び出し先にジャンプする
  • ステップアウト（Shift + F11）-> 現在の関数が終了するまで実行し、呼び出し元に戻る

これらのステップ実行機能を使えば、コードの流れを詳細に追跡できます。

○サンプルコード4：VSCodeでステップ実行を使ったデバッグ

先ほどのフィボナッチ数を計算するコードを使って、VSCodeでステップ実行を体験してみましょう。

  1. getFibonacci関数内のdebugger文の位置でプログラムが停止している状態で、「ステップイン」をクリックする
  2. getFibonacci関数の引数nの値を確認する
  3. 「ステップオーバー」を数回クリックし、再帰呼び出しの様子を観察する
  4. 必要に応じて「ステップイン」や「ステップアウト」を使って、関数の呼び出しを詳しく追跡する

このように、VSCodeのステップ実行機能を活用すれば、コードの動作を細部まで確認しながらデバッグできます。

実行結果

Fibonacci(6) = 8

VSCodeは、デバッグ機能が豊富で、JavaScriptの開発に非常に適しています。

ぜひ、debugger文と組み合わせて活用してみてください。

コードの問題点を素早く特定し、修正できるようになるはずです。

●よくあるエラーと対処法

JavaScriptのデバッグ中に遭遇するエラーは、初心者にとって大きな壁になることがあります。でも、大丈夫です。

よくあるエラーとその対処法を知っておけば、デバッグ作業もスムーズに進められるはずです。

ここでは、JavaScriptのデバッグ中によく見かけるエラーをいくつか取り上げ、その原因と対処方法を解説していきます。

エラーメッセージに悩まされている方は、ぜひ参考にしてみてください。

○TypeError: Cannot read property ‘xxx’ of undefined

このエラーは、undefinedな値に対してプロパティアクセスを行おうとした場合に発生します。

つまり、オブジェクトが存在しないのに、そのプロパティを読み取ろうとしているのです。

例えば、次のようなコードがあるとします。

const user = {
  name: 'Alice',
  age: 30
};

console.log(user.address.city);

このコードでは、userオブジェクトにはaddressプロパティが存在しないため、user.addressはundefinedになります。

そのため、user.address.cityにアクセスしようとすると、TypeErrorが発生するのです。

対処法としては、オブジェクトやプロパティが存在するかどうかを確認してからアクセスするようにします。

例えば、optional chaining演算子（?.）を使えば、プロパティが存在しない場合にエラーを発生させずにundefinedを返すことができます。

console.log(user.address?.city);

このように記述すれば、user.addressがundefinedの場合でもエラーにはならず、undefinedが返されます。

○ReferenceError: ‘xxx’ is not defined

ReferenceErrorは、存在しない変数や関数を参照しようとした場合に発生します。

つまり、定義されていない識別子を使用しているのです。

例えば、次のようなコードがあるとします。

console.log(x);

このコードでは、変数xが定義されていないため、ReferenceErrorが発生します。

対処法としては、変数や関数を使用する前に、それらが適切に定義されているかどうかを確認することです。

また、スコープにも注意が必要です。変数がどこで定義されているのか、そのスコープ内で参照可能なのかを意識しましょう。

○SyntaxError: Unexpected token ‘xxx’

SyntaxErrorは、JavaScriptの構文規則に違反するコードを記述した場合に発生します。

例えば、括弧の閉じ忘れや、不正な文字の使用などが原因として考えられます。

ここでは、SyntaxErrorが発生する例を紹介します。

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

この場合、関数の宣言が正しく終了していないため、SyntaxErrorが発生します。

対処法としては、エラーメッセージを確認し、指摘された場所のコードを見直すことです。

構文の誤りを修正すれば、エラーは解消されるはずです。

また、エディタの構文チェック機能を活用するのも効果的です。

多くのエディタでは、構文エラーを検出し、ハイライト表示してくれます。

これを手がかりに、コードを修正していきましょう。

●debugger文の応用例

これまで、debugger文の基本的な使い方やChrome開発者ツール、VSCodeを使ったデバッグ方法について解説してきました。

でも、実はdebugger文にはもっと便利な使い方があるんです。

ここでは、debugger文の応用的な使い方をいくつか紹介していきます。

このテクニックを習得すれば、より効率的で高度なデバッグが可能になるでしょう。

○サンプルコード5：条件付きブレークポイントの設定

通常、ブレークポイントはコードの特定の行で実行を停止します。

しかし、条件付きブレークポイントを使えば、特定の条件が満たされた場合にのみ実行を停止させることができます。

例えば、次のようなコードがあるとします。

function factorial(n) {
  if (n === 0) {
    return 1;
  }
  return n * factorial(n - 1);
}

const num = 5;
const result = factorial(num);
console.log(`${num}の階乗は${result}です`);

このコードは、与えられた数値の階乗を計算する関数factorialを定義し、numの値の階乗を計算しています。

ここで、nの値が3の場合にのみブレークポイントを設定したいとします。

Chrome開発者ツールで条件付きブレークポイントを設定するには、次の手順を実行します。

  1. factorial関数内のif文の行にブレークポイントを設定する
  2. ブレークポイントにカーソルを合わせ、右クリックメニューから「Edit breakpoint」を選択する
  3. 「Condition」欄にn === 3と入力し、「Enter」キーを押す

これで、nの値が3の場合にのみブレークポイントで停止するようになります。

実行結果

5の階乗は120です

○サンプルコード6：ログポイントの使用

ログポイントは、特定の場所でコンソールにメッセージを出力するための機能です。

コードの実行を停止せずに、変数の値などを確認できます。

先ほどの階乗の例で、ログポイントを使ってみましょう。

  1. factorial関数内のreturn文の行にカーソルを合わせる
  2. 行番号の左側を右クリックし、「Add logpoint」を選択する
  3. ログメッセージとして'n = ' + nと入力し、「Enter」キーを押す

これで、factorial関数が呼び出されるたびに、nの値がコンソールに出力されます。

実行結果

n = 5
n = 4
n = 3
n = 2
n = 1
n = 0
5の階乗は120です

ログポイントを使えば、コードの実行を中断することなく、変数の値の変化を追跡できます。

○サンプルコード7：非同期コードのデバッグ

JavaScriptでは、非同期処理を扱うことが多くあります。

非同期コードをデバッグする際は、ブレークポイントの設定箇所に注意が必要です。

ここでは、setTimeoutを使った非同期処理の例を紹介します。

function asyncFunction() {
  setTimeout(() => {
    console.log('非同期処理の結果');
  }, 1000);
}

console.log('同期処理の結果');
asyncFunction();

このコードをデバッグする場合、setTimeoutのコールバック関数内にブレークポイントを設定します。

  1. console.log('非同期処理の結果');の行にブレークポイントを設定する
  2. コードを実行すると、1秒後にブレークポイントで停止する

実行結果

同期処理の結果
非同期処理の結果

非同期処理の場合、コールバック関数が実行されるタイミングがポイントになります。

ブレークポイントの設定位置に気をつけながらデバッグを進めましょう。

○サンプルコード8：関数の呼び出し履歴の確認

デバッグ中に、関数がどのように呼び出されたのかを知りたい場合があります。

Chrome開発者ツールのCall Stackパネルを使えば、関数の呼び出し履歴を確認できます。

ここでは、関数の呼び出し履歴を確認する例を紹介します。

function foo() {
  bar();
}

function bar() {
  debugger;
}

foo();

このコードでは、foo関数内でbar関数を呼び出しています。

bar関数内にdebugger文を記述しています。

  1. コードを実行すると、bar関数内のdebugger文で停止する
  2. Chrome開発者ツールのCall Stackパネルを確認する
  3. bar関数がfoo関数から呼び出されていることが分かる

Call Stackパネルでは、関数の呼び出し元を辿ることができます。

これにより、関数の実行経路を把握しやすくなります。

debugger文の応用的な使い方を習得することで、より高度なデバッグが可能になります。

条件付きブレークポイントやログポイントを活用し、非同期コードや関数の呼び出し履歴にも注目しながらデバッグを進めていきましょう。

まとめ

JavaScriptのデバッグにおいて、debugger文は非常に強力なツールです。

この記事では、debugger文の基本的な使い方から応用的なテクニックまで、実践的なサンプルコードを交えて解説してきました。

Chrome開発者ツールやVSCodeを活用し、効率的なデバッグ方法を身につけることで、コードの問題点を素早く特定し、修正できるようになるでしょう。

デバッグスキルは、JavaScriptのプログラミングに欠かせない要素です。

ぜひ、debugger文を積極的に活用し、開発スピードの向上につなげていってください。