使用 VS Code 调试 JavaScript 的三种方式

在开发 JavaScript 应用程序时，出现错误是常见的情况，却不总是容易解决。为了快速解决这些问题，我们需要一个好的调试工具。在本文中，我们将讨论使用 VS Code 调试 JavaScript 的三种方式。

方式一：内置调试器

VS Code 内置了一个强大的调试器，可以通过配置文件的方式轻松定制和使用。以下是调试程序的步骤：

1. 在代码中插入必要的调试语句。比如，在需要检查变量值的地方插入 debugger;，程序运行到这里时会自动暂停。

   javascript
let a = 1;
let b = 2;
debugger;
let c = a + b;
console.log(c);

2. 点击 VS Code 编辑器左侧的「调试」图标，在弹出的窗口中添加一个配置文件。这个配置文件告诉 VS Code 如何运行程序以及如何在程序执行期间停止并检查代码。

3. 调试时，选中刚刚添加的配置文件并点击「启动调试」按钮，程序就会开始运行并在 debugger; 处暂停。您现在可以检查变量的值、单步运行代码、查看堆栈跟踪等。

方式二：使用 Chrome 浏览器

VS Code 能够与 Chrome 浏览器配合进行 JavaScript 调试。以下是步骤：

1. 使用 VS Code 打开我们的 JavaScript 项目。

2. 在 Chrome 中打开我们的网站或 App，并启用 Chrome 开发工具功能。

3. 在 Chrome 开发工具中选择 Sources 标签页，点击左上角的绿色箭头以启动 JavaScript 代码执行过程分析器。

4. 再回到 VS Code，通过单击调试页面顶部渐现的图标（代码执行过程分析标记事件），可以在活动调试器中观察代码执行的进程。

方式三：使用 Node.js

Node.js 相当于一个在电脑上运行的 JavaScript 运行环境。它可以让您使用 JavaScript 来编写后端代码，比如服务器端代码，以及命令行工具等。利用 VS Code 调试工具配合 Node.js，我们可以快速排查 JavaScript 代码的问题。步骤如下：

1. 使用 VS Code 打开我们的 JavaScript 项目。

2. 在项目目录下执行命令行 $ node --inspect app.js， app.js 为我们的应用程序入口文件。

   shell
$ node --inspect app.js
Debugger listening on ws://127.0.0.1:9229/xxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx
For help, see: https://nodejs.org/en/docs/inspector`

3. 这时候我们的应用程序已经监听了 9229 端口上的调试工具，并等待连接。

4. 回到 VS Code，在「调试」视图中打开「添加配置文件」，然后选择「Node.js」。

   json
{
"name": "Launch via NPM",
"type": "node",
"request": "launch",
"port": 9229,
"runtimeArgs": [
"--nolazy",
"${workspaceFolder}/app.js"
],
"console": "integratedTerminal"
}

5. 插入断点并点击「启动调试」按钮，VS Code 就会在您的应用程序中启动，并被设置成等待对接调试客户端的请求。

在上面步骤成功执行后，VS Code 就会满足您所有的 JavaScript 调试需求。

结论

VS Code 提供了多种方式对 JavaScript 进行调试，帮助我们快速定位和解决问题。您只需选择最适合您需求的调试方式即可。请认真试用并寻找您最喜欢的调试工具！