ブラウザ上でのJavaScriptデバッグ方法

JavaScript

この記事を書いたチーム：frontier

Google Chromeを例に、開発者ツールを使用したデバッグ手順を記載します。

使用するソースコード
開発者ツールを表示する
ブレークポイントの設定
コードの実行とデバッグ
その他JavaScriptのデバッグについて

使用するソースコード

【エンジニア募集中】フルリモート可◎、売上/従業員数9年連続UP、平均残業8時間、有給取得率90％、年休124日以上 etc.　　詳細はこちらから＞

例として使用するHTMLとJavaScriptのソースコードを記載します。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScriptブラウザ上でデバッグ</title>
</head>
<body>
    <h1>JavaScriptブラウザ上でデバッグ</h1>
    <script src="test.js"></script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>JavaScriptブラウザ上でデバッグ</title>

</head>

<body>

<h1>JavaScriptブラウザ上でデバッグ</h1>

</body>

</html>

test.js

function isPrime(num) {
    if (num <= 1) return false;
    for (let i = 2; i < num; i++) {
        if (num % i === 0) return false;
    }
    return true;
}

const number = 5;
console.log(`${number}:`, isPrime(number));

function isPrime(num) {

if (num <= 1) return false;

for (let i = 2; i < num; i++) {

if (num % i === 0) return false;

}

return true;

}

const number = 5;

console.log(`${number}:`, isPrime(number));

開発者ツールを表示する

Google ChromeでHTMLを開き、F12キーをクリックするか右クリックして「検証」を選びます。

ブレークポイントの設定

デバッグ対象のJavaScriptファイルを選びデバッグしたい行番号をクリックしてブレークポイントを設定します。

コードの実行とデバッグ

ウェブページをリロードすると設定したブレークポイントの箇所で実行が停止します。
変数の値を確認したり、ステップ実行（Step Into, Step Over, Step Out）を行います。
※
　Step Into・・・1行1行処理を実行する
　Step Over・・・関数の中に入らずに次の行へ処理を移動する
　Step Out・・・実行中の関数を抜けるまで処理をすすめる

その他JavaScriptのデバッグについて

・コンソール：console.log()を使用して、Google Chromeの開発者ツールconsoleタブで変数の値や実行の流れを確認できます。

const ｘ= 100;
console.log(`ｘ:`, ｘ);

1 2	const ｘ= 100; console.log(`ｘ:`, ｘ);

・デバッガーステートメント：debuggerを追加し、特定の行で実行を一時停止させます。

function test() {
    const y = 20;
    // 実行を一時停止させる
    debugger; 
    console.log('y:', y);
}
test();

function test() {

const y = 20;

// 実行を一時停止させる

debugger;

console.log('y:', y);

}

test();

・Node.js環境でデバッグする：ブラウザ上ではなくNode.js環境の場合はVSCode上でデバッグ出来ます。launch.jsonを適切に作成し、ブレークポイントを設定しデバッグ実行することでブラウザを開かなくても変数の中身や処理の流れを確認出来ます。さらにwatch式を設定することで、特定の変数の流れを追うことも出来ます。

【エンジニア募集中】フルリモートも◎(リモート率85.7％)、平均残業8時間、年休124日以上、有給取得率90％ etc.　詳細はこちらから＞