VS Code＆Chrome Debuggerを使用したJavaScriptプロジェクトのデバッグ

VSコードとChromeデバッガーを使用したマスターJavaScriptデバッグ：包括的なガイド

JavaScriptデバッグに依存することにうんざりしていませんか？この記事では、Visual Studioコード（VSコード）とChromeデバッガー拡張機能を使用して、デバッグワークフローを変換する強力なデバッグ手法を紹介します。

console.log()

のない世界を想像してください。 デバッグは悪夢です！ は簡単な修正を提供しますが、複雑な問題には面倒になります。 デバッグツールは、優れた代替品を提供します。 このガイドは、vs Codeの統合デバッガーとChrome Devtoolsとのシームレスな統合のためにChrome拡張機能のデバッガーを利用しています。

重要な利点：console.log() console.log()

合理化されたデバッグ、信頼を排除します。 特定のポイントで実行を一時停止するための正確なブレークポイント。

可変状態の詳細な検査とステップバイステップコードの実行。
• console.log()カスタマイズ可能な
ターゲットデバッグ用の構成。
VSコードデバッグパネル内での効果的なブレークポイント管理と表現監視。
• テスト障害を分離して解決するためのシームレスモカテストデバッグ。
• Chrome Debuggerを使用したクライアント側のJavaScriptデバッグ。launch.json
• 前提条件：
現代のjavascriptの理解。

node.js Visual Studioコード

Chromeブラウザー
• プロジェクト（実践的な練習のためにこのプロジェクトをクローン）。
• プロジェクトのセットアップ：
• debug-example

リポジトリをクローンします。 debug-example vsコードでプロジェクトを開きます。

依存関係をインストール：

1. debug-example
2. 対VSコードでのデバッグ：ステップバイステップガイド
デバッグ

：

<code class="language-bash">npm install
npm install -g mocha</code>

ブレークポイントの設定：

ライン番号の横にある溝をクリックして、ブレークポイント（赤い点）を設定します。 src/places.js

<code class="language-javascript">const places = [];

module.exports = {
  places,

  addPlace: (city, country) => {
    const id = ++places.length; // Bug: Modifies places.length prematurely
    let numType = 'odd';
    if (id % 2) { // Bug: Incorrect modulus condition
      numType = 'even';
    }
    places.push({ id, city, country, numType });
  },
};

module.exports.addPlace('Mombasa', 'Kenya');
module.exports.addPlace('Kingston', 'Jamaica');
module.exports.addPlace('Cape Town', 'South Africa');</code>

1. ローンチデバッガー：
VSコードアクティビティバーのデバッグアイコン（バグアイコン）をクリックします。

3. 構成launch.json：ギアアイコンをクリックしてlaunch.jsonを作成します。 デバッグするように構成places.js：

<code class="language-bash">npm install
npm install -g mocha</code>

4. デバッグを開始します：「場所の起動」を選択し、F5を押します（または[再生]ボタンをクリックします）。

5. デバッグコントロール：デバッグツールバーコントロールを使用：続行、ステップオーバー、ステップアウト、再起動、停止。

6. 変数を点検します：

   変数を越えて値を確認するか、デバッグパネルの「変数」と「監視」セクションを使用します。

バグを識別して修正：
7. ステッピングと検査を通じて、バグを

   （未熟な長さの増分と誤った弾性条件）を特定します。それに応じてコードを修正します。 places.js

デバッグMochaテスト：

モカ構成の追加：

デバッグパネルで、ドロップダウンをクリックして[構成の追加]を選択します。 「Mocha Tests」を選択します

テストファイルにブレークポイントを追加してブレークポイントを設定します。

2. デバッグを開始します：placesTest.js「Mochaテスト」を選択し、デバッグを開始します。 テスト、変数を検査して、残りの問題を識別および修正します。 フックを追加して、テスト間で

   配列をリセットすることを忘れないでください。

3. Chromeデバッガーを使用したクライアント側コードのデバッグ：beforeEach places

拡張機能をインストールします：

VSコードマーケットプレイスから「Chrome for Chrome」拡張機能をインストールします。

1. configure：
Chrome構成を追加：

2. サーバーを起動します：launch.jsonExpress Server（）

<code class="language-javascript">const places = [];

module.exports = {
  places,

  addPlace: (city, country) => {
    const id = ++places.length; // Bug: Modifies places.length prematurely
    let numType = 'odd';
    if (id % 2) { // Bug: Incorrect modulus condition
      numType = 'even';
    }
    places.push({ id, city, country, numType });
  },
};

module.exports.addPlace('Mombasa', 'Kenya');
module.exports.addPlace('Kingston', 'Jamaica');
module.exports.addPlace('Cape Town', 'South Africa');</code>

デバッグを開始します：

「Chromeの起動」を選択し、デバッグを開始します。 デバッガーは、Chromeインスタンスに接続します

3. クライアントサイドコードのデバッグ：npm startクライアント側のjavascript（

   ）でブレークポイントを設定し、コードを踏み出し、変数を検査して、クライアント側のバグを識別して修正します（例えば、正しくありません。セレクター、IDがありません）。

4. 概要：

このガイドは、効果的なJavaScriptデバッグのためのVSコードとChromeデバッガーの力を示しています。 これらの手法を習得することにより、デバッグ効率を大幅に改善し、より高品質のコードを作成できます。 条件付きブレークポイントなどの高度な機能については、VSコードデバッグドキュメントを調べてください。 告别

、拥抱高效调试！ console.log()

以上がVS Code＆Chrome Debuggerを使用したJavaScriptプロジェクトのデバッグの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。