安装 插件 Debugger for Chrome
-
选择运行并创建launch.json
运行.png
创建launch.json.png
选择环境.png 配置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()
