使用VS代碼和Chrome調試器調試JavaScript項目

>主人JavaScript與代碼和鉻調試器的調試：綜合指南

>厭倦了依靠console.log()進行JavaScript調試？本文使用Visual Studio代碼（VS代碼）和Chrome調試器擴展程序介紹了強大的調試技術，從而改變了調試工作流程。

想像一個沒有

的世界。 調試將是一場噩夢！ 儘管console.log()提供了快速修復，但對於復雜問題而言，它變得繁瑣。 調試工具提供了優越的選擇。 本指南利用VS代碼的集成調試器和與Chrome DevTools無縫集成的Chrome擴展程序的調試器。 console.log()

鍵優點：

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

>現代JavaScript理解。

Visual Studio Code
• Chrome瀏覽器
• >項目（克隆此項目進行動手實踐）。 >
• 設置
項目：
• debug-example>

克隆>存儲庫。 debug-example> 在VS代碼中打開項目。

>安裝依賴項：
1. debug-example
在VS代碼中調試
2. >
逐步指南
3. >

>讓我們調試

<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>

啟動調試器：

單擊VS代碼活動欄中的調試圖標（錯誤圖標）。

2. 3. configure launch.json：單擊齒輪圖標以創建launch.json。 將其配置為debugplaces.js：
   >

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

   4. >開始調試：選擇“啟動位置”，然後按F5（或單擊“播放”按鈕）。

   

   5. >調試控件：>使用調試工具欄控件：繼續，踩踏，踏入，逐步，逐步，重新啟動，停止。

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

   7. >識別和修復錯誤：

      通過步進和檢查，確定>中的錯誤（過早增量和不正確的模量條件）。相應地更正代碼。 places.js

   >調試摩卡測試：
   >
   >添加摩卡配置：在調試面板中，單擊下拉列表，然後選擇“添加配置”。選擇“摩卡測試”。

   

   >在
   2. >中設置斷點：

      在您的測試文件中添加斷點。 placesTest.js

   開始調試：
   3. 選擇“摩卡測試”，然後開始調試。 逐步進行測試，檢查變量以識別並解決其餘任何問題。 請記住添加

      鉤以重置測試之間的數組。 > beforeEach places

   >使用Chrome調試器調試客戶端代碼：

   >

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

   態

   2. launch.json啟動服務器：運行您的Express 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>

   3. 開始調試：選擇“啟動Chrome”並開始調試。 調試器將附加到您的Chrome實例上。 npm start

   >
   4. 調試客戶端代碼：

      >在客戶端JavaScript（）中設置斷點，逐步瀏覽代碼，並檢查變量以識別和修復任何客戶端端錯誤（例如，不正確）選擇器，缺少ID）。

   5. 摘要：

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

以上是使用VS代碼和Chrome調試器調試JavaScript項目的詳細內容。更多資訊請關注PHP中文網其他相關文章！