在vscode里面调试js

1. 安装 插件 Debugger for Chrome

2. 选择运行并创建launch.json

   
   运行.png
   创建launch.json.png
   选择环境.png

3. 配置launch.json文件

{
  // 使用 IntelliSense 了解相关属性。 
  // 悬停以查看现有属性的描述。
  // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

还可以把配置文件写进 User Settings 成为全局配置

configurations中字段的含义

type - 用于此启动配置的调试器类型。每个安装的调试扩展都会引入一种类型，例如，node 内置节点调试器，php 以及 goPHP 和 Go 扩展。

request - 此启动配置的请求类型。目前支持的是 launch 和 attach。
launch：vscode 独立自主的跑起一个调试进程
attach：你通过 node --inspect-brk xxx.js 自行启动调试，然后 vscode 再去 attach 它


name - 友好名称，显示在“调试启动配置”下拉列表中。

program - 启动调试器时要运行的可执行文件或文件

args - 传递给程序进行调试的参数

env- 环境变量（该值 null 可用于“取消定义”变量）

cwd - 当前工作目录，用于查找依赖项和其他文件

url中常见字段含义

${workspaceRoot} the path of the folder opened in VS Code(VSCode中打开文件夹的路径)
${workspaceRootFolderName} the name of the folder opened in VS Code without any solidus (/)(VSCode中打开文件夹的路径, 但不包含"/")
${file} the current opened file(当前打开的文件)
${relativeFile} the current opened file relative to workspaceRoot(当前打开的文件,相对于workspaceRoot)
${fileBasename} the current opened file's basename(当前打开文件的文件名, 不含扩展名)
${fileDirname} the current opened file's dirname(当前打开文件的目录名)
${fileExtname} the current opened file's extension(当前打开文件的扩展名)
${cwd} the task runner's current working directory on startup()