VSCode调试JS怎么用_VSCode JavaScript断点调试教程-VSCode-PHP中文网

VSCode调试JS怎么用_VSCode JavaScript断点调试教程

蓮花仙者

发布： 2025-08-29 13:47:01

原创

206人浏览过

配置launch.json是VSCode调试JS的关键，首先选择调试环境如Node.js或Chrome，设置"type"、"request"、"program"或"url"等参数，保存后通过F5启动调试，结合断点、单步执行与变量监视，即可高效排查问题。

vscode调试js怎么用_vscode javascript断点调试教程

VSCode调试JS，简单来说，就是让你像医生看病一样，能看到代码运行的“内部器官”，找出“病灶”（bug）。通过设置断点、单步执行、查看变量等手段，你可以逐行分析代码，理解它的运行逻辑，最终解决问题。

配置好launch.json文件，设置断点，启动调试，然后像玩游戏一样，一步一步地看代码执行，观察变量变化，bug就无处遁形了。

launch.json文件配置，断点设置，变量观察，单步调试，这几个是关键。

如何配置VSCode的launch.json文件进行JavaScript调试？

配置

launch.json

登录后复制

文件，是开启VSCode调试JS之旅的第一步。很多人觉得这玩意儿复杂，其实不然。简单来说，

launch.json

登录后复制

就是告诉VSCode，你想用什么环境、什么方式来调试你的JS代码。

立即学习“Java免费学习笔记（深入）”；

首先，在VSCode中打开你的项目，然后点击左侧的调试按钮（就是那个像虫子一样的图标），接着点击“创建launch.json文件”。VSCode会提示你选择调试环境，对于Node.js项目，选择“Node.js”；对于浏览器端的JS，选择“Chrome”或者“Edge”（取决于你用的浏览器）。

接下来，VSCode会自动生成一个

launch.json

登录后复制

文件。这个文件里面有很多配置项，但你只需要关注几个关键的：

"type"
登录后复制
: 指定调试器类型，比如
```
"node"
```
登录后复制
或者
```
"chrome"
```
登录后复制
。
"request"
登录后复制
: 指定调试方式，通常是
```
"launch"
```
登录后复制
（启动一个新的进程）或者
```
"attach"
```
登录后复制
（连接到一个已经运行的进程）。
"name"
登录后复制
: 给你的调试配置起个名字，方便你以后选择。
"program"
登录后复制
: 指定要调试的入口文件，比如
```
"./index.js"
```
登录后复制
。
"url"
登录后复制
: 如果你调试的是浏览器端的JS，这里指定要调试的网页地址，比如
```
"http://localhost:3000"
```
登录后复制
。
"runtimeExecutable"
登录后复制
: 如果调试的是浏览器端的JS，并且使用Chrome，可能需要指定Chrome的路径，例如
```
"C:\Program Files\Google\Chrome\Application\chrome.exe"
```
登录后复制
。
"webRoot"
登录后复制
: 指定你的web应用的根目录，通常是
```
${workspaceFolder}
```
登录后复制
。

举个例子，如果你要调试一个Node.js项目，你的

launch.json

登录后复制

文件可能看起来像这样：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "skipFiles": [
        "<node_internals>/**"
      ],
      "program": "${workspaceFolder}/index.js"
    }
  ]
}

登录后复制

如果你要调试一个浏览器端的JS项目，你的

launch.json

登录后复制

文件可能看起来像这样：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

登录后复制

配置好