【Chrome】開発者ツールでJavaScriptをデバッグする方法

【Chrome】開発者ツールでJavaScriptをデバッグする方法

記事の文字数：1315

Google Chromeの開発者ツールを利用して、JavaScriptのコードを実行・デバッグする方法を解説します。


スポンサーリンク

Google Chromeの開発者ツールを利用して、JavaScriptのコードを実行・デバッグする方法を解説します。

確認環境

Windows 11 Home

開発者ツール起動

Google Chromeを開き、「…＞その他のツール＞デベロッパーツール（Ctrl＋Shift＋I）」を選択します。

alt text

開発者ツールが起動します。

alt text

Console実行

Consoleタブへ切り替えます。

alt text

試しにJavaScriptでこんにちはを出力してみます。

console.log('こんにちは。')

こんにちはが出力されることを確認できました。

alt text

次に1～9の合計を出力してみます。
※1行目入力後、Shift+Enterを押下することで、2行目以降を1度に入力することができます。

let num = 1 + 2 + 3 + 4 + 5 + 6 + 7 + 8 + 9;
console.log(num);

45が出力されることを確認できました。

alt text

デバッグ実行

デバッグ実行のやり方を解説します。
まず以下をファイル名：index.htmlで任意の場所に保存します。

index.html
<!DOCTYPE html>
<html>


<head>
    <meta charset="utf-8">
    <title>デバッグテスト</title>
</head>


<body>
    <script>
        let num = 1 + 2 + 3 + 4 + 5 + 6 + 7 + 8 + 9;
        console.log(num);
        alert("1 + 2 + 3 + 4 + 5 + 6 + 7 + 8 + 9 = " + num);
    </script>
</body>


</html>

ブラウザを起動

保存したindex.htmlをGoogle Chromeで開きます。
アラートが表示されますが、OKで閉じます。

alt text

ソース表示

Ctrl＋Shift＋Iで開発者ツールを起動し、Sources > index.htmlを開きます。

alt text

ブレークポイントを設定

11行目を右クリックし、Add breakpointを押下します。

alt text

以下のように表示されればOKです。

alt text

画面更新

Ctrl + rでブラウザを更新すると、ブレークポイントで画面が止まります。
以下赤枠のボタン（ステップオーバー）を押下します。

alt text

ステップオーバー（1回目）

numに45が代入されたことを確認できました。
もう一度ステップーオーバーを押下します。

alt text

ステップオーバー（2回目）

console.log(num);の行が実行されました。

alt text

実際にConsoleタブへ切り替えるとnumの値(45)が、表示されていることを確認できました。

alt text

最後まで実行

Sourcesタブに戻して、以下赤枠のボタン（実行）を押下します。

alt text

ステップオーバー（3回目）

以降の処理が実行されて、アラートがダイアログが表示されます。
OKボタンを押下します。

alt text

実行完了

コードのハイライトが消えて、画面が以下のようになれば実行完了です。

alt text

ネットワークタブでリクエストを確認

API通信やリソースの読み込みに関する問題を調査する際は、ネットワークタブ(Network)を活用します。
Status(ステータスコード)などの情報が表示されています。

alt text

index.htmlをクリックすると、より詳細な情報を表示することができます。

alt text

確認ポイント：

以下、ネットワークタブで確認するポイントの例です。

  • リクエストのステータスコード（200, 404, 500など）
  • リクエストやレスポンスヘッダー
  • データのレスポンス
  • 実行時間（Timing）
以上で本記事の解説を終わります。
よいITライフを！
スポンサーリンク
Scroll to Top