JavaScriptのプログラムが上手く動かないとき、どうすればいいでしょうか？そんな時に便利なのがブラウザの開発者ツールです。

開発者ツールの起動方法

まず、ブラウザの開発者ツールを開く方法から始めましょう。WindowsやLinuxでは、F12キーを押すだけで開発者ツールが起動します。Macでは、Command + Option + Iのショートカットキーを使います。

JavaScriptコンソールの使い方

開発者ツールが開いたら、「コンソール」タブをクリックします。このコンソールは、JavaScriptのエラーメッセージやログメッセージを表示してくれる場所です。

エラーメッセージを確認しよう

JavaScriptにエラーが発生した場合、コンソールに赤色でエラーメッセージが表示されます。そのメッセージをクリックすると、エラーが発生した場所（ファイル名と行番号）を確認することができます。

console.log()を使ってデバッグ

エラーメッセージだけでなく、自分で追加したログメッセージも確認できます。例えば、変数の値を確かめたいときは、以下のようにconsole.log()を使います。

let x = 5;
console.log(x);

ブレークポイントの設定

次に、もう少し高度なデバッグ方法として、ブレークポイントの設定を紹介します。これを使うと、特定のコードが実行される前にプログラムを一時停止させ、その時点での変数の状態を詳しく調べることができます。

ブレークポイントを設定しよう

「ソース」タブをクリックし、自分がデバッグしたいファイルを開きます。コードの行番号の左側をクリックすると、青いマーカーが表示され、その行にブレークポイントが設定されます。

デバッグ中の変数の確認方法

ブレークポイントでプログラムが停止したら、「スコープ」セクションで現在の変数の状態を確認できます。また、コンソールを使って手動で変数の値を調べることも可能です。

let y = 10;
for (let i = 0; i < y; i++) {
    if (i === 5) {
        debugger; // ここで一時停止
    }
    console.log(i);
}

まとめ

Javascriptのデバッグは最初は難しく感じるかもしれませんが、ブラウザの開発者ツールを使えば効率的に問題を見つけて解決することができます。