JavaScript のデバッグを開始する

[アーティクル]
11/07/2024

この記事では、DevTools を使用して JavaScript の問題をデバッグするための基本的なワークフローについて説明します。

手順 1: バグを再現する

デバッグの最初の手順は、バグを一貫して再現する一連のアクションを見つけることです。

新しいウィンドウまたはタブでデモ Web ページの JavaScript のデバッグを開始します。Web ページを開くには、リンクを右クリックし、ポップアップウィンドウで [新しいタブでリンクを開く] または [新しいウィンドウでリンクを開く] を選択します。または、 Ctrl キー (Windows、Linux の場合) または コマンド (macOS の場合) を長押しし、リンクをクリックすることもできます。

ヒント: InPrivate モードで Microsoft Edge を開き、Microsoft Edge がクリーン状態で実行されるようにします。詳細については、「Microsoft Edge で InPrivate を参照する」を参照してください。
[数値 1] テキストボックスに「5」と入力します。
[数値 2] テキストボックスに「1」と入力します。
[ 数値 1 と数値 2 の追加] をクリックします。ボタンの下のラベルは、6 の予想結果ではなく、 5 + 1 = 51 と表示 されます。

手順 2: ソースツール UI について理解する

DevTools には、さまざまなタスク用のツールがいくつか用意されています。これらのタスクには、CSS の変更、ページ読み込みパフォーマンスのプロファイリング、ネットワーク要求の監視が含まれます。 ソース ツールは、JavaScript をデバッグする場所です。

DevTools を開く場合は、Web ページを右クリックし、[検査] を選択します。または、 Ctrl + Shift + I (Windows、Linux) または Command + Option + I (macOS) を押します。 DevTools が開きます。
[ソース] ツールを選択します。 [ ページ ] タブを選択し、JavaScript ファイルを選択 get-started.js。

ソース ツール UI には、次の 3 つの部分があります。

ソースツール UI の 3 つの部分

[ ナビゲーター ] ウィンドウ (左上隅)。 Web ページが要求するすべてのファイルがここに一覧表示されます。
エディター ウィンドウ (右上隅)。 [ナビゲーター] ウィンドウでファイルを選択すると、このウィンドウにファイルの内容が表示されます。
[デバッガー] ウィンドウ (下部)。このウィンドウには、Web ページの JavaScript を検査するためのツールが用意されています。 DevTools ウィンドウが広い場合、このウィンドウは エディター ウィンドウの右側に表示されます。

手順 3: ブレークポイントを使用してコードを一時停止する

この種の問題をデバッグするための一般的な方法は、コードにいくつかの console.log() ステートメントを挿入し、スクリプトの実行時に値を検査することです。次に、例を示します。

function updateLabel() {
    var addend1 = getNumber1();
    console.log('addend1:', addend1);
    var addend2 = getNumber2();
    console.log('addend2:', addend2);
    var sum = addend1 + addend2;
    console.log('sum:', sum);
    label.textContent = addend1 + ' + ' + addend2 + ' = ' + sum;
}

console.log()メソッドはジョブを完了する可能性がありますが、ブレークポイントを使用すると、より速く完了します。ブレークポイントを使用すると、ランタイムの途中でコードを一時停止し、その時点ですべての値を調べることができます。ブレークポイントには、 console.log() メソッドよりも次の利点があります。

console.log()では、ソースコードを手動で開き、関連するコードを見つけ、console.log() ステートメントを挿入し、Web ページを更新してコンソールにメッセージを表示する必要があります。ブレークポイントを使用すると、コードがどのように構成されているかを知らなくても、関連するコードを一時停止できます。
console.log() ステートメントでは、検査する各値を明示的に指定する必要があります。ブレークポイントでは、DevTools はその時点のすべての変数の値を表示します。コードに影響を与える変数が非表示で難読化される場合があります。

要するに、ブレークポイントは、 console.log() メソッドよりも速くバグを見つけて修正するのに役立ちます。

イベントリスナーのブレークポイント

一歩下がってアプリの動作を考えると、Add Number 1 と Number 2 ボタンに関連付けられているclick イベントリスナーで正しくない合計 (5 + 1 = 51) が計算されると推測される場合があります。そのため、 click リスナーが実行される前後にコードを一時停止することをお勧めします。 イベントリスナーブレークポイントを 使用すると、次の操作を実行できます。

[ ナビゲーター] ウィンドウで、 (index) が既定で選択されています。 [ get-started.js] をクリックします。
[ デバッガー ] ウィンドウで、[ イベントリスナーブレークポイント ] をクリックしてセクションを展開します。 DevTools では、 アニメーション やクリップボードなどのイベントカテゴリの一覧が表示 されます。
[マウス] イベントで [展開] () をクリックすると、そのカテゴリが開きます。 DevTools では、 クリック や マウスダウンなどのマウスイベントの一覧が表示されます。各イベントの横にチェックボックスがあります。
次のチェックボックスを オンにして、次をクリックします。

DevTools は、 click イベントリスナーの実行時に自動的に一時停止するように設定されるようになりました。
レンダリングされたデモ Web ページで、もう一度 [ 番号 1 と数値 2 の追加] ボタンをクリックします。 DevTools はデモを一時停止し、ソースツールでコード行を強調表示 します 。 DevTools は、次のコードスニペットに示すように、 get-started.jsの 16 行目で一時停止します。
```
if (inputsAreEmpty()) {
```
別のコード行で一時停止する場合は、正しい行で一時停止するまで [ スクリプト実行の再開 ()] をクリックします。

注

別の行で一時停止した場合は、アクセスするすべての Web ページに click イベントリスナーを登録するブラウザー拡張機能があります。拡張機能の click リスナーで一時停止しています。 InPrivate モードを使用して プライベートで参照すると、すべての拡張機能が無効になる場合は、毎回目的のコード行で一時停止している可能性があります。

イベントリスナーブレークポイント は、DevTools で使用できるブレークポイントの多くの種類の 1 つだけです。可能な限り迅速にさまざまなシナリオをデバッグできるように、さまざまな種類をすべて記憶します。各型を使用するタイミングと方法については、「ブレークポイントを使用してコードを一時停止する」を参照してください。

手順 4: コードをステップ実行する

バグの一般的な原因の 1 つは、スクリプトが間違った順序で実行される場合です。コードをステップ実行すると、コードのランタイムを確認できます。コードが予想とは異なる順序で実行されている場所を正確に把握するために、一度に 1 行ずつ説明します。今すぐお試しください:

[ 次の関数呼び出しをステップオーバー する ] をクリックします (します)。 DevTools では、ステップインせずに次のコードが実行されます。
```
if (inputsAreEmpty()) {
```
DevTools では、 inputsAreEmpty() は falseとして評価されるため、 if ステートメントのコードブロックは実行されないため、数行のコードがスキップされます。
DevTools の [ソース ] ツールで、[ 次の関数呼び出しにステップ イン (次のイン)] をクリックして、 updateLabel() 関数のランタイムを一度に 1 行ずつステップ実行します。

これは、コードをステップ実行する基本的な考え方です。 get-started.jsのコードを見ると、バグはおそらくupdateLabel()関数のどこかにあることがわかります。コードのすべての行をステップ実行するのではなく、別の種類のブレークポイント ( コード行ブレークポイント) を使用して、バグの可能性のある場所に近いコードを一時停止できます。

手順 5: コード行ブレークポイントを設定する

コード行ブレークポイントは、最も一般的なブレークポイントの種類です。一時停止する特定のコード行に到達したら、コード行ブレークポイントを使用します。

updateLabel()のコードの最後の行を確認します。

label.textContent = addend1 + ' + ' + addend2 + ' = ' + sum;

label.textContent = addend1 + ' + ' + addend2 + ' = ' + sum;の行番号は 34 です。 34 行目をクリックします。 DevTools では、 34 の左側に赤い円が表示されます。赤い円は、コード行のブレークポイントがこの行にあることを示します。 DevTools は、このコード行が実行される前に常に一時停止します。
[スクリプト実行の再開] () ボタンをクリックします。

スクリプトは、34 行目に達するまで引き続き実行されます。 31 行目、32 行目、33 行目では、DevTools は各行のセミコロンの右側に各変数の値を出力します。これらの値は次のとおりです。
- addend1 = "5"
- addend2 = "1"
- sum = "51"

手順 6: 変数値を確認する

addend1、addend2、sumの値は疑わしいと見えます。これらの値は引用符で囲まれます。つまり、各値は文字列です。これはバグの原因の良い手がかりです。次の手順では、これらの変数値に関する詳細情報を収集します。 DevTools には、変数値を調べるさまざまな方法が用意されています。

[スコープ] ウィンドウで変数値を調べる

コード行で一時停止すると、[ スコープ ] ウィンドウには、現在定義されているローカル変数とグローバル変数が、各変数の値と共に表示されます。

[スコープ] ウィンドウ

[スコープ] ウィンドウには、該当するクロージャ変数も表示されます。変数の値を編集する場合は、[ スコープ ] ウィンドウで値をダブルクリックします。コード行で一時停止しない場合、[ スコープ ] ウィンドウは空です。

Watch 式を使用して変数値を調べる

[ ウォッチ ] ウィンドウでは、変数 ( sumなど) または式 ( typeof sum など) の値を監視できます。有効な JavaScript 式は、watch式に格納できます。

[ ウォッチ ] タブを選択します。
[Add watch expression ()] をクリックします。
watch式typeof sum入力し、Enter キーを押します。

[ウォッチ] ウィンドウ

[ ウォッチ ] ウィンドウに typeof sum: "string"が表示されます。コロンの右側の値は、watch式の結果です。このバグは、 sum が数値である必要があるときに、文字列として評価されるためです。

DevTools ウィンドウが広い場合は、[デバッガー] ウィンドウに [ウォッチ] ウィンドウが表示され、右側に表示されます。

コンソールを使用して変数値を調べる

コンソールを使用すると、console.log()出力を表示できます。 また、コンソールを使用して、デバッガーがコードステートメントで一時停止されている間に任意の JavaScript ステートメントを評価することもできます。デバッグの場合は、 コンソール を使用して、バグの潜在的な修正をテストできます。

コンソール ツールが閉じている場合は、Esc キーを押して開きます。 [DevTools] ウィンドウの下のウィンドウにコンソールツールが開きます。
コンソールで、式のparseInt(addend1) + parseInt(addend2)を入力します。 addend1とaddend2がスコープ内にあるコード行でデバッガーが一時停止されていることを考えると、式は現在のスコープに対して評価されます。
Enter キーを押 します。 DevTools はステートメントを評価し、コンソールで 6 を出力 します。これは、デモで生成される正しい結果です。

手順 7: 返されたコードに修正を適用し、実際のソースコードに修正を適用する

バグの修正の可能性を特定しました。次に、DevTools UI 内で JavaScript コードを直接編集し、デモを再実行して修正プログラムをテストします。

[スクリプトの実行を再開する (スクリプトの実行する)] をクリックします。
[エディター] ウィンドウで、行var sum = addend1 + addend2をvar sum = parseInt(addend1) + parseInt(addend2)に置き換えます。
Ctrl + S (Windows、Linux) または Command + S (macOS) を押して変更を保存します。
[ ブレークポイントの非アクティブ化 ( をクリックします。ブレークポイントのアイコンが灰色に変わり、ブレークポイントが非アクティブであることを示します。 [ブレークポイントの非アクティブ化] が設定されている間、DevTools は設定したブレークポイントを無視します。デモ Web ページに正しい値が表示されるようになりました。
さまざまな値を使用してデモを試してみてください。デモが正しく計算されるようになりました。
独自のプロジェクトをデバッグするときは、修正プログラムを特定した後、ローカルソースコードを編集し、固定コードをサーバーに再デプロイするなどして、サーバー上の実際のソースコードを修正します。前の手順では、サーバーから送信されたコードの一時的なローカルコピーにのみ修正プログラムを適用します。

次のステップ

お疲れさまでした。 JavaScript のデバッグ時に Microsoft Edge DevTools を最大限に活用する方法がわかっています。この記事で学習したツールと方法は、数え切れないほどの時間を節約できます。

この記事では、ブレークポイントを設定する 2 つの方法について説明しました。 DevTools には、次のような特定の条件が満たされたときにコードを一時停止するブレークポイントを設定する方法も用意されています。

指定した条件が true の場合にのみトリガーされる条件付きブレークポイント。
キャッチされた例外またはキャッチされていない例外のブレークポイント。
要求された URL が指定した部分文字列と一致したときにトリガーされる XHR ブレークポイント。

各種類のブレークポイントを使用するタイミングと方法の詳細については、「ブレークポイントを使用してコードを一時停止する」を参照してください。

コードをステップ実行するためのデバッガーボタンの詳細については、「JavaScript デバッグ機能」の「コード行をステップオーバーする」を参照してください。

次の方法で共有

JavaScript のデバッグを開始する

手順 1: バグを再現する

手順 2: ソースツール UI について理解する