VSCode 怎样调试 J*aScript 代码 VSCode 调试 J*aScript 代码的详细教程​

调试j*ascript代码需先安装node.js和vscode，并安装j*ascript调试器插件；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中高效调试各类j*ascript代码。

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

解决方案

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

2. 创建

   .vscode/launch.json

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

   .vscode

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

   launch.json

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

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

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

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

   chrome

   或者

   edge

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

   launch.json

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

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

3. 设置断点： 在你想要暂停执行的代码行左侧点击，VSCode会在行号旁边显示一个红点，这就是断点。

4. 启动调试器： 点击VSCode左侧的调试图标（一个虫子的图标），然后点击绿色的“启动调试”按钮（或者按下F5）。VSCode会根据

   launch.json

   中的配置启动调试器。

5. 单步调试： 调试器启动后，代码会在你设置的第一个断点处暂停。你可以使用调试工具栏上的按钮（继续、单步跳过、单步进入、单步跳出、重启、停止）来控制代码的执行。

   • 继续 (F5): 继续执行代码，直到遇到下一个断点。
   • 单步跳过 (F10): 执行当前行代码，然后跳到下一行。如果当前行是函数调用，则直接执行完整个函数，不进入函数内部。
   • 单步进入 (F11): 如果当前行是函数调用，则进入函数内部。
   • 单步跳出 (Shift+F11): 从当前函数跳出，返回到调用该函数的地方。

6. 检查变量： 在调试过程中，你可以通过VSCode的“变量”窗口查看当前作用域内所有变量的值。你也可以在“监视”窗口添加表达式，实时查看表达式的值。

7. 调试控制台： 在调试过程中，你可以在VSCode的“调试控制台”中执行J*aScript代码，或者查看

   console.log

   的输出。

8. 修复Bug： 根据你观察到的变量值和代码执行流程，找到bug所在，修改代码，然后重新启动调试器，验证你的修复是否有效。

如何调试异步J*aScript代码？

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

async/await

、

Promise

和

setTimeout

等异步操作。

LLaMA-Factory Online

在线大模型训练与微调服务平台

394 查看详情

• 使用

  async/await

  ：

  async/await

  可以让异步代码看起来更像同步代码，更容易调试。

• 设置断点： 在

  await

  关键字后面设置断点，可以让你观察异步操作的结果。

• 使用

  try/catch

  ： 在

  async

  函数中使用

  try/catch

  块可以捕获异步操作中的错误。

• 使用

  debugger

  语句： 你可以在代码中插入

  debugger

  语句，当代码执行到

  debugger

  语句时，调试器会自动暂停。这比设置断点更灵活。

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

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

• 检查

  launch.json

  ： 确保

  launch.json

  中的

  program

  （对于Node.js）或

  webRoot

  和

  url

  （对于浏览器）配置正确，指向你的J*aScript文件或网页。

• 使用

  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代码和调试浏览器J*aScript代码类似，你需要使用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的J*aScript调试功能非常强大，掌握这些技巧可以大大提高你的开发效率。调试过程中最重要的是耐心和细心，仔细观察变量的值和代码的执行流程，相信你一定能找到bug所在。

以上就是VSCode 怎样调试 J*aScript 代码 VSCode 调试 J*aScript 代码的详细教程​的详细内容，更多请关注其它相关文章！