调试准备

配置说明

// 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 against localhost",
        "type": "chrome",// 配置类型，这里是chrome浏览器类型
        "request": "launch", // 请求配置类型，可以为launch（启动）或attach（附加）
        "url": "${file}", // 监听调试的链接
        "sourceMaps": true, 
        "webRoot": "${workspaceRoot}"
    },
     {
        "name": "nodeLauch", //单独调试js，即可以直接运行js
        "type": "node",// 使用node 启动
        "request": "launch",
        "program": "${file}", //这个配置成你要调试的文件、${file}当前打开的文件
        "stopOnEntry": false,
        "args": [],// 参数
        "skipFiles": ["<node_internals>/**"],// 跳过的文件
        "cwd": "${workspaceRoot}",
        "runtimeExecutable": null,
        "runtimeArgs": [
            "--nolazy"
        ],
        "env": {
            "NODE_ENV": "development"
        }, // 环境变量
        "console": "internalConsole",
        "preLaunchTask": "",
        "sourceMaps": false
    }
]

每个启动配置都必须具有以下属性：

type- 用于此启动配置的调试器类型。每个安装的调试扩展都引入了一种类型：node例如，用于内置的 Node 调试器，或者php用于goPHP 和 Go 扩展。
request- 此启动配置的请求类型。目前，launch并attach受支持。
name- 出现在调试启动配置下拉列表中的易于阅读的名称。

以下是可用于所有启动配置的一些可选属性：

presentation- 使用对象中的order、group和hidden属性presentation，您可以在调试配置下拉列表和调试快速选择中对配置和化合物进行排序、分组和隐藏。
preLaunchTask- 要在调试会话开始之前启动任务，请将此属性设置为tasks.json中指定的任务的标签（在工作区的.vscode文件夹中）。或者，可以将其设置${defaultBuildTask}为使用您的默认构建任务。
postDebugTask- 要在调试会话结束时启动任务，请将此属性设置为tasks.json中指定的任务的名称（在工作区的.vscode文件夹中）。
internalConsoleOptions- 此属性控制调试会话期间调试控制台面板的可见性。
skipFiles- 进入下一步的时候会跳过该配置里的文件。
debugServer-仅适用于调试扩展作者：此属性允许您连接到指定端口，而不是启动调试适配器。
serverReadyAction- 如果您想在正在调试的程序向调试控制台或集成终端输出特定消息时在 Web 浏览器中打开 URL。有关详细信息，请参阅下面的调试服务器程序时自动打开 URI部分。

许多调试器支持以下一些属性：

program- 启动调试器时运行的可执行文件或文件
args- 传递给程序进行调试的参数
env- 环境变量（该值null可用于“取消定义”变量）
envFile- 带有环境变量的 dotenv 文件的路径
cwd- 用于查找依赖项和其他文件的当前工作目录
port- 附加到正在运行的进程时的端口
stopOnEntry- 程序启动时立即中断
console- 使用哪种控制台，例如internalConsole，、、integratedTerminal或externalTerminal

启动与附加模式

在 VS Code 中，有两种核心调试模式Launch和Attach，它们分别处理两个不同的工作流程和开发人员细分。根据您的工作流程，知道哪种类型的配置适合您的项目可能会令人困惑。

如果您来自浏览器开发者工具背景，您可能不习惯“从您的工具启动”，因为您的浏览器实例已经打开。当您打开 DevTools 时，您只是将DevTools 附加到您打开的浏览器选项卡。另一方面，如果您来自服务器或桌面背景，让您的编辑器为您启动进程是很正常的，并且您的编辑器会自动将其调试器附加到新启动的进程。

解释启动和附加之间区别的最佳方法是将启动配置视为如何在VS Code 附加到它之前以调试模式启动应用程序的秘诀，而附加配置是如何连接 VS Code 的秘诀调试器到已经运行的应用程序或进程。

VS Code 调试器通常支持在调试模式下启动程序或在调试模式下附加到已经运行的程序。根据请求（attach或launch），需要不同的属性，VS Code 的launch.json验证和建议应该对此有所帮助。

web项目调试

一、安装Debugger for Chrome

VSCode 通过 Chrome 的 debug protocol 连接到 Chrome

二、配置lunch.json文件

调试react 项目配置

{
    // 使用 IntelliSense 了解相关属性。 
    // 悬停以查看现有属性的描述。
    // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "name": "chrome调试react项目",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:3000", // 端口与react项目启动的端口一致
            "webRoot": "${workspaceRoot}"
        }
    ]
}

调试node项目

脚手架调试

后端项目调试

官方说明戳这

vscode 调试