ホーム プログラミング言語 Web関連 javascript JSデバッグ(Debug)チュートリアル【簡易版】

JSデバッグ(Debug)チュートリアル【簡易版】

 
 
JavaScript の開発プロセスでは、コード内に文法的または論理的なエラーが存在し、プログラムが期待する結果を得ることができない場合があります。このとき、これらのエラーを見つけて修正する必要があります。デバッグまたはコードのデバッグとしてエラーを修正します。

 

デバッグはプログラム開発のプロセスにおいて不可欠な要素であり、さまざまなデバッグ手法に習熟していれば、半分の労力で 2 倍の成果を得ることができます。

フロントエンド開発では、エラーをすばやく見つけたい場合は、ブラウザの組み込みデバッグ ツール (コンソール) を使用できます。このツールは通常、キーボードの F12 を押すことで起動できます。デバッグ ツールの助けを借りて、コードエラーの場所を簡単に見つけることができるだけでなく、ブレークポイントを設定することでコード実行中の変数の変更を確認することもできます (コードの実行はブレークポイントで一時停止します)。

コンソール

次の図に示すように、コード内の構文エラーと実行時エラーは、エラーの種類、エラーの説明、エラーの場所 (つまり、エラーが存在する行) を含めてコンソールに表示できます。

 
 
図 1: Chrome コンソール
図 1: Chrome コンソール
 

コンソールから提供される情報を使用すると、コード内のエラーを簡単に見つけることができますが、注意すべき点は、一部のエラーは別のエラーによって直接または間接的に引き起こされる可能性があるため、コンソールから提供されるエラー情報が必ずしも 100% 正しいとは限らないということです。したがって、コンソールにエラーがあるというプロンプトが表示されるのは、必ずしも実際の問題であるとは限りません。

JavaScript コードをデバッグする方法

JavaScript コードをデバッグするには多くの方法がありますが、最も簡単な方法は、console.log()、document.write()、alert() およびその他のメソッドを使用して、プログラム内の変数、オブジェクト、式の値を出力し、確実にデバッグすることです。プログラムの各ステージの実行結果が正しいことを確認するには、次の例に示すように console.log() を使用することをお勧めします。

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
</head>

<body>
    <div id="box"></div>
    <script>
        var box = document.getElementById('box');
        console.log(box);
        var a = 'こんにちは', b = 'JavaScript';
        var c = a + ' ' + b;
        console.log(c);
        box.innerHTML = c;
    </script>
</body>
</html> 

実行結果を次の図に示します。

図 3: console.log() を使用したプログラムのデバッグ
図 3: console.log() を使用したプログラムのデバッグ

この方法を使用してコードをデバッグする場合の欠点の 1 つは、これらの出力ステートメントがコードに必要ないことです。これらの出力ステートメントはコードの動作には影響しませんが、コードをより整理するために、デバッグ後に手動でクリーンアップする必要があります。プログラム。

ブレークポイントのデバッグ

ブレークポイントは、ブラウザーに組み込まれているデバッグ ツールの重要な機能の 1 つであり、ブレークポイントを設定すると、必要なときにプログラムを中断 (一時停止) できるため、コードを分析して論理的に処理できます。 Chrome ブラウザを例に挙げると、ブレークポイント デバッグを実行するには、まずブラウザの組み込み開発者ツールを開く必要があります (F12 を押すかマウスを右クリックし、ポップアップ メニューで [検査] を選択します)。次に、以下に示すように、「ソース」を見つけて選択します。

図 4: Chrome デバッグ ツール
図 4: Chrome デバッグ ツール

1) デバッグするファイルを見つけます

デバッグ ツールを開いた後、次の図に示すように、ツールの左側でデバッグするファイルを見つけ、クリックしてファイルを開く必要があります。

2) ブレークポイント

コードを中断するのは非常に簡単です。デバッグするコードの前にある行番号をクリックするだけです。行番号が青色でマークされている場合は、図に示すように、ブレークポイントが正常に中断されたことを意味します。以下は (コード行の 11 行目と 14 行目でブレークポイントにヒットします):

 
図 4: Chrome デバッグ ツール
図 6: ブレークポイント

3) ブレークポイントのデバッグ

ブレークポイントを設定した後、ページを更新してデバッグ モードに入ります。コードの実行はブレークポイントで一時停止します。この時点で、ページ上の矢印をクリックして F8 キーを押すと、コードが次のブレークポイントまで実行を継続できます。以下の図に示すように、次を表示します。

図 4: Chrome デバッグ ツール
図 7: ブレークポイントのデバッグ

デバッグ中、一部のデータはデバッグ ツールの右端のスコープ列に表示されます。さらに、右端の [監視] 列にデバッグする変数の名前を入力すると、デバッグ プロセス中に実行中のコード内の変数の変更をリアルタイムで確認できます。

4) ステートメントごとに実行します

デバッグ プロセス中に、コードを文ごとに実行することも選択できます。下の図に示すボタンをクリックするか、F10 キーを押すだけです。

 

文ごとに実行し、デバッグする変数を [ウォッチ] 列に入力すると、コード実行プロセス中の変数の変化をより明確に確認できます。

 
デバッガのキーワード

ブラウザのデバッグ ツールを使用してコードにブレークポイントを設定することに加えて、debugger キーワードを使用してコードにブレークポイントを設定することもできます (PHP の die および exit と同様)。効果はデバッグ ツールでブレークポイントを設定するのと同じです。 、サンプルコードは次のとおりです。

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
</head>

<body>
    <div id="box"></div>
    <script>
        var x = 15 * 5;
        debugger;
        document.getElementById('box').innerHTML = x;
    </script>
</body>
</html> 

上記のコードを実行すると、ブラウザは自動的にデバッグ モードに入り、debugger キーワードが実行されると一時停止します (コードの 12 行目)。

 

「 JSデバッグ(Debug)チュートリアル【簡易版】」についてわかりやすく解説!絶対に観るべきベスト2動画

JavaScript入門 レッスン40 デバッグ
#03 Javascript初心者向け VSCodeのデバッグ環境を構築します。みなさんもステップ実行してみましょう。