如何用debugger调式你的代码1.node debugger 1.首先用vscode打开你的项目，一个vscode只

1.node debugger

1.首先用vscode打开你的项目，一个vscode只能打开一个项目，不能有文件夹的嵌套
2.新建一个launch.json文件

launch.json

${workspaceRoot} :表示你当前项目的根目录（xxx/项目名）

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "args": ["${workspaceRoot}/src/main.js"], //如果入口文件在项目的src目录下且文件名为main.js。如果想测试某个单独的文件，则加上那个文件在项目中的路径即可
      "runtimeArgs": ["--nolazy", "-r", "ts-node/register"],
      "env": {
        // 环境变量可以在这里面进行配置
        "NODE_CONFIG_DIR": "${workspaceRoot}/server/config"
      },
      "sourceMaps": true,
      "cwd": "${workspaceRoot}/server", // server端的目录，自行配置
      //如果在本地测试： "cwd": "${workspaceRoot}",
      "protocol": "inspector",
      "console": "integratedTerminal",
      "internalConsoleOptions": "neverOpen"
    }
  ]
}

使用示例

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [

      {
        "type": "node",
        "request": "launch",
        "name": "Launch Program",
        "args": ["${workspaceRoot}/test.js"], // 启动文件，按照目录自行修改
        "runtimeArgs": ["--nolazy", "-r", "ts-node/register"],
        "env": {
          // 环境变量可以在这里面进行配置
          "NODE_CONFIG_DIR": "${workspaceRoot}/server/config"
        },
        "sourceMaps": true,
        "cwd": "${workspaceRoot}", // server端的目录，自行配置
        "protocol": "inspector",
        "console": "integratedTerminal",
        "internalConsoleOptions": "neverOpen"
      }
    ]
  }

2.vscode debugger

1.首先下载两个插件

- debugger for chrome
- live server

2.然后设置live server 插件的扩展设置

- "liveServer.settings.ChromeDebuggingAttachment": false 改为 true。

3.点击vscode的调试按钮（vscode的左边从上往下第三或者第四个）

依次点击: 运行图标 -> 创建 launch.json 文件：

怎么使用呢？

1.首先用 live server运行该html文件

2.然后添加配置

3.第三步：配置launch.json

关键是url，得和在浏览器执行的路径一样

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
      {
          "name": "Launch Chrome",
          "request": "launch",
          "type": "chrome",
          "url": "http://localhost:5500/js/动态添加元素进数组.html",
          "webRoot": "${workspaceFolder}"
      },
    ]
}

4.第四步，选择我们刚刚设置的Launch Chrome，最后点击运行就可以调试了

Step into：单步执行（一行一行代码执行），如果遇到子函数，就会进入子函数，并且继续单步执行。就是每一行需要执行的代码都不跳过，一行一行进行。

Step over：在单步执行的时候，如果遇到子函数，并不会进入子函数，而是把子函数当做一整步执行完成，从而继续执行函数调用位置下的代码。

Step out：当单步执行到子函数内时，用Step out就可以执行完子函数余下部分，并返回到上一层函数。

注意先设置好断点，也就是debugger，才会有执行下一步