>主人JavaScript與代碼和鉻調(diào)試器的調(diào)試：綜合指南

>厭倦了依靠console.log()進(jìn)行JavaScript調(diào)試？本文使用Visual Studio代碼（VS代碼）和Chrome調(diào)試器擴(kuò)展程序介紹了強(qiáng)大的調(diào)試技術(shù)，從而改變了調(diào)試工作流程。

的世界。 調(diào)試將是一場(chǎng)噩夢(mèng)！ 盡管console.log()提供了快速修復(fù)，但對(duì)于復(fù)雜問題而言，它變得繁瑣。 調(diào)試工具提供了優(yōu)越的選擇。 本指南利用VS代碼的集成調(diào)試器和與Chrome DevTools無縫集成的Chrome擴(kuò)展程序的調(diào)試器。console.log()

鍵優(yōu)點(diǎn)：

>簡(jiǎn)化的調(diào)試，消除了
• 的依賴。console.log()> 在特定點(diǎn)停止執(zhí)行的精確斷點(diǎn)。
>
• 詳細(xì)檢查可變狀態(tài)和分步代碼執(zhí)行的檢查。
>
• >可自定義的
針對(duì)目標(biāo)調(diào)試的配置。
• > launch.json在VS代碼調(diào)試面板內(nèi)觀察有效的斷點(diǎn)管理和表達(dá)式。
無縫的摩卡測(cè)試調(diào)試，用于隔離和解決測(cè)試失敗。
• >客戶端的JavaScript與Chrome調(diào)試器進(jìn)行調(diào)試。
>
• >先決條件：

>現(xiàn)代JavaScript理解。

Visual Studio Code
• Chrome瀏覽器
• >項(xiàng)目（克隆此項(xiàng)目進(jìn)行動(dòng)手實(shí)踐）。>
• 設(shè)置
項(xiàng)目：
• debug-example>

克隆>存儲(chǔ)庫(kù)。debug-example> 在VS代碼中打開項(xiàng)目。

>安裝依賴項(xiàng)：
1. debug-example
在VS代碼中調(diào)試
2. >
逐步指南
3. >

npm install
npm install -g mocha

>設(shè)置斷點(diǎn)：src/places.js單擊在線號(hào)旁邊的天溝中，以設(shè)置斷點(diǎn)（紅點(diǎn)）。

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');

單擊VS代碼活動(dòng)欄中的調(diào)試圖標(biāo)（錯(cuò)誤圖標(biāo)）。

2. 3. configure launch.json：單擊齒輪圖標(biāo)以創(chuàng)建launch.json。 將其配置為debugplaces.js：
   >

   npm install
   npm install -g mocha

   4. >開始調(diào)試：選擇“啟動(dòng)位置”，然后按F5（或單擊“播放”按鈕）。

   

   5. >調(diào)試控件：>使用調(diào)試工具欄控件：繼續(xù)，踩踏，踏入，逐步，逐步，重新啟動(dòng)，停止。

   6. 檢查變量：懸停在變量上以查看其值，或使用調(diào)試面板的“變量”和“觀察”部分。>

   7. >識(shí)別和修復(fù)錯(cuò)誤：

      通過步進(jìn)和檢查，確定>中的錯(cuò)誤（過早增量和不正確的模量條件）。相應(yīng)地更正代碼。 places.js

   >調(diào)試摩卡測(cè)試：
   >
   >添加摩卡配置：在調(diào)試面板中，單擊下拉列表，然后選擇“添加配置”。選擇“摩卡測(cè)試”。

   

   >在
   2. >中設(shè)置斷點(diǎn)：

      在您的測(cè)試文件中添加斷點(diǎn)。 placesTest.js

   開始調(diào)試：
   3. 選擇“摩卡測(cè)試”，然后開始調(diào)試。 逐步進(jìn)行測(cè)試，檢查變量以識(shí)別并解決其余任何問題。 請(qǐng)記住添加

      鉤以重置測(cè)試之間的數(shù)組。> beforeEach places

   >使用Chrome調(diào)試器調(diào)試客戶端代碼：

   >

   >安裝擴(kuò)展名：
   從VS Code Marketplace安裝“ Chrome for Chrome”擴(kuò)展程序。

   態(tài)

   2. launch.json啟動(dòng)服務(wù)器：運(yùn)行您的Express Server（
   ）。
   >

   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');

   3. 開始調(diào)試：選擇“啟動(dòng)Chrome”并開始調(diào)試。 調(diào)試器將附加到您的Chrome實(shí)例上。 npm start

   >
   4. 調(diào)試客戶端代碼：

      >在客戶端JavaScript（）中設(shè)置斷點(diǎn)，逐步瀏覽代碼，并檢查變量以識(shí)別和修復(fù)任何客戶端端錯(cuò)誤（例如，不正確）選擇器，缺少ID）。

   5. 摘要：

      >本指南演示了VS代碼的功能和Chrome調(diào)試器的有效JavaScript調(diào)試器。 通過掌握這些技術(shù)，您可以顯著提高調(diào)試效率并編寫更高質(zhì)量的代碼。 探索VS代碼調(diào)試文檔，以了解有條件斷點(diǎn)等高級(jí)功能。 告別console.log()，擁抱高效調(diào)試！

   以上是使用VS代碼和Chrome調(diào)試器調(diào)試JavaScript項(xiàng)目的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！