VSCode 怎样调试 JavaScript 代码 VSCode 调试 JavaScript 代码的详细教程-VSCode-PHP中文网

VSCode 怎样调试 JavaScript 代码 VSCode 调试 JavaScript 代码的详细教程

爱谁谁

发布： 2025-08-01 18:03:01

原创

952人浏览过

调试javascript代码需先安装node.js和vscode，并安装javascript调试器插件；2. 在项目根目录创建.vscode/launch.json文件配置调试环境，node.js使用"type": "node"，浏览器环境使用"type": "chrome"并设置url和webroot；3. 在代码行号旁点击设置断点；4. 点击调试图标或按f5启动调试器；5. 使用f5继续、f10单步跳过、f11单步进入、shift+f11单步跳出控制执行；6. 通过变量窗口和监视窗口检查变量值；7. 在调试控制台执行代码或查看输出；8. 修改代码并重新调试以修复bug；9. 调试异步代码时在await后设断点，使用try/catch捕获错误，或插入debugger语句暂停；10. 遇“找不到源文件”时检查launch.json路径配置，若使用typescript或webpack需添加sourcemaps和sourcemappathoverrides映射源文件；11. 调试react native时可使用react native debugger或vscode的react native插件，配置launch.json中"type": "reactnative"并指定platform为android或ios；综上，通过合理配置和工具使用，可在vscode中高效调试各类javascript代码。

VSCode 怎样调试 JavaScript 代码 VSCode 调试 JavaScript 代码的详细教程

VSCode调试JavaScript代码，简单来说，就是设置断点、启动调试器、检查变量和调用栈，然后逐步执行代码，发现并修复bug。

解决方案

准备工作： 首先，确保你已经安装了Node.js（如果你的JavaScript代码是运行在Node.js环境下的）和VSCode。然后，安装VSCode的JavaScript调试器插件，通常VSCode会自动提示你安装。

创建

.vscode/launch.json

登录后复制

文件： 这是调试配置的核心。在你的项目根目录下创建一个

.vscode

登录后复制

文件夹（如果还没有），然后在里面创建一个

launch.json

登录后复制

文件。这个文件告诉VSCode如何启动调试器。

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

一个简单的Node.js调试配置可能是这样的：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "skipFiles": [
        "<node_internals>/**"
      ],
      "program": "${workspaceFolder}/your_script.js" // 替换成你的JavaScript文件路径
    }
  ]
}

登录后复制

如果是浏览器环境，配置会稍微复杂一点，需要用到

chrome

登录后复制

或者

edge

登录后复制

调试器。你需要安装相应的浏览器调试插件，然后在

launch.json

登录后复制

中配置启动浏览器并附加到调试器。

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:8080", // 替换成你的网页地址
      "webRoot": "${workspaceFolder}"
    }
  ]
}

登录后复制

设置断点： 在你想要暂停执行的代码行左侧点击，VSCode会在行号旁边显示一个红点，这就是断点。
启动调试器： 点击VSCode左侧的调试图标（一个虫子的图标），然后点击绿色的“启动调试”按钮（或者按下F5）。VSCode会根据
```
launch.json
```
登录后复制
中的配置启动调试器。
单步调试： 调试器启动后，代码会在你设置的第一个断点处暂停。你可以使用调试工具栏上的按钮（继续、单步跳过、单步进入、单步跳出、重启、停止）来控制代码的执行。
- 继续 (F5): 继续执行代码，直到遇到下一个断点。
- 单步跳过 (F10): 执行当前行代码，然后跳到下一行。如果当前行是函数调用，则直接执行完整个函数，不进入函数内部。
- 单步进入 (F11): 如果当前行是函数调用，则进入函数内部。
- 单步跳出 (Shift+F11): 从当前函数跳出，返回到调用该函数的地方。
检查变量： 在调试过程中，你可以通过VSCode的“变量”窗口查看当前作用域内所有变量的值。你也可以在“监视”窗口添加表达式，实时查看表达式的值。
调试控制台： 在调试过程中，你可以在VSCode的“调试控制台”中执行JavaScript代码，或者查看
```
console.log
```
登录后复制
的输出。
修复Bug： 根据你观察到的变量值和代码执行流程，找到bug所在，修改代码，然后重新启动调试器，验证你的修复是否有效。

如何调试异步JavaScript代码？

异步代码的调试稍微复杂一些，因为代码的执行顺序可能和你想象的不一样。你需要特别注意

async/await

登录后复制

、

Promise

登录后复制

和

setTimeout

登录后复制

等异步操作。

GPT-MINUS1

通过在文本中随机地用同义词替换单词来愚弄GPT

查看详情

使用
```
async/await
```
登录后复制
：
```
async/await
```
登录后复制
可以让异步代码看起来更像同步代码，更容易调试。
设置断点： 在
```
await
```
登录后复制
关键字后面设置断点，可以让你观察异步操作的结果。
使用
```
try/catch
```
登录后复制
：在
```
async
```
登录后复制
函数中使用
```
try/catch
```
登录后复制
块可以捕获异步操作中的错误。
使用
```
debugger
```
登录后复制
语句： 你可以在代码中插入
```
debugger
```
登录后复制
语句，当代码执行到
```
debugger
```
登录后复制
语句时，调试器会自动暂停。这比设置断点更灵活。

遇到“找不到源文件”错误怎么办？

有时候，VSCode调试器会提示“找不到源文件”。这通常是因为调试器找不到你的JavaScript文件。

检查
```
launch.json
```
登录后复制
：确保
```
launch.json
```
登录后复制
中的
```
program
```
登录后复制
（对于Node.js）或
```
webRoot
```
登录后复制
和
```
url
```
登录后复制
（对于浏览器）配置正确，指向你的JavaScript文件或网页。

使用

sourceMapPathOverrides

登录后复制

：如果你的代码经过了编译（比如使用了TypeScript或者Webpack），你需要配置

sourceMapPathOverrides

登录后复制

来告诉调试器如何找到源文件。

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "skipFiles": [
        "<node_internals>/**"
      ],
      "program": "${workspaceFolder}/dist/your_script.js", // 编译后的文件
      "sourceMaps": true,
      "outFiles": [
        "${workspaceFolder}/dist/**/*.js"
      ],
      "sourceMapPathOverrides": {
        "webpack:///./src/*": "${workspaceFolder}/src/*"
      }
    }
  ]
}

登录后复制

这个配置告诉调试器，如果编译后的代码中引用了

webpack:///./src/

登录后复制

路径下的文件，那么实际上对应的源文件在

${workspaceFolder}/src/

登录后复制

目录下。

如何调试React Native代码？

调试React Native代码和调试浏览器JavaScript代码类似，你需要使用React Native的调试工具。

使用React Native Debugger： React Native Debugger是一个独立的调试工具，它基于Chrome开发者工具，可以用来调试React Native代码。

使用VSCode的React Native插件： VSCode也有React Native插件，可以让你在VSCode中直接调试React Native代码。你需要配置

launch.json

登录后复制

文件，告诉VSCode如何连接到React Native应用。

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug Android",
      "type": "reactnative",
      "request": "launch",
      "platform": "android"
    },
    {
      "name": "Debug iOS",
      "type": "reactnative",
      "request": "launch",
      "platform": "ios"
    }
  ]
}

登录后复制

总而言之，VSCode的JavaScript调试功能非常强大，掌握这些技巧可以大大提高你的开发效率。调试过程中最重要的是耐心和细心，仔细观察变量的值和代码的执行流程，相信你一定能找到bug所在。

以上就是VSCode 怎样调试 JavaScript 代码 VSCode 调试 JavaScript 代码的详细教程的详细内容，更多请关注php中文网其它相关文章！