使用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中文网其他相关文章！