如何使用 VS Code 调试 JavaScript 应用程序？

以下是使用VS Code调试JavaScript应用程序的步骤：

一、创建调试配置文件

1. 在项目根目录下创建一个名为.vscode的文件夹（如果不存在的话）。
2. 在.vscode文件夹中创建一个launch.json文件。有两种方式来创建它：
   • 点击VS Code左侧活动栏中的“调试”图标（看起来像一只虫子），然后点击顶部的齿轮图标（如果没有launch.json文件时，会提示创建）。
   • 直接使用快捷键Ctrl + Shift + D（Windows和Linux）或者Command + Shift + D（Mac）打开调试视图，再点击齿轮图标创建。

二、配置launch.json文件

1. 对于简单的JavaScript项目（例如，运行一个.js文件），基本的配置如下：

   {
     "version": "0.2.0",
     "configurations": [
       {
         "type": "node",
         "request": "launch",
         "name": "Debug JavaScript",
         "program": "${workspaceFolder}/your - file.js" // 将your - file.js替换为实际要调试的JavaScript文件路径
       }
     ]
   }
   

2. 如果是调试在浏览器中运行的JavaScript（例如，前端项目），可以使用“Debugger for Chrome”扩展（需要先安装），配置如下：

   {
     "version": "0.2.0",
     "configurations": [
       {
         "type": "chrome",
         "request": "launch",
         "name": "Launch Chrome against localhost",
         "url": "http://localhost:3000", // 根据实际运行的本地服务器地址调整
         "webRoot": "${workspaceFolder}/public" // 根据项目结构调整，假设前端代码在public文件夹下
       }
     ]
   }
   

三、设置断点
在JavaScript代码中，点击行号左边的空白区域即可设置断点。断点是程序运行时会暂停的位置，方便查看变量的值、调用栈等信息。

四、启动调试

1. 在VS Code的“调试”视图（Ctrl + Shift + D或者Command + Shift + D）中，选择配置好的调试配置（如“Debug JavaScript”或者“Launch Chrome against localhost”）。
2. 点击绿色的“启动调试”按钮（或者使用快捷键F5）。
   • 如果是基于Node.js的JavaScript应用程序，程序将开始运行并在遇到断点时暂停。
   • 如果是前端项目，VS Code会启动Chrome浏览器并打开指定的网址，同时在代码中的断点处暂停执行。

五、调试操作

1. 查看变量：当程序暂停在断点处时，可以在“调试”视图的“变量”面板中查看当前作用域内变量的值、类型等信息。
2. 单步调试：
   • 使用“单步执行（F10）”：可以逐行执行代码，不会进入函数内部。
   • 使用“进入函数（F11）”：如果当前行是一个函数调用，会进入函数内部继续单步调试。
   • 使用“跳出函数（Shift + F11）”：当在函数内部单步调试时，可以使用这个快捷键跳出当前函数，继续执行函数后面的代码。
3. 表达式求值：在“调试控制台”中，可以输入JavaScript表达式来求值，这有助于查看特定时刻变量的值或者测试小段代码。