如何为多个调试器设置 Visual Studio Code？

Question

我正在使用 VS Code 作为我的 IDE，并且需要多个可用于各种项目的调试器。我有一个 Extendscript，并希望 Chrome 用于其他文件。

这是我的 launch.json 文件：

{
    // 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": "1.0.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}"
        },
        {
            "type": "extendscript-debug",
            "request": "launch",
            "name": "Ask for script name",
            "program": "${workspaceFolder}/${command:AskForScriptName}",
            "stopOnEntry": false
        }
    ]
}

VSC 抱怨它“只有一个必须验证时匹配多个模式”。有两个架构。 VSC 还提供此功能：“'launch.json' 中缺少配置 'Launch Chrome against localhost'。”

我可以调试 Extendscript 文件 (jsx)，但不能调试 JS 或 HTML/JS/CSS 文件。

我完全迷失了曾经使用 ESDK 处理 jsx 文件并在浏览器中使用 Chrome。似乎没有办法选择我需要的调试器。

我使用的是 Win10 最新的 1909 和 VSC 版本：1.44.2（用户设置） 提交：ff915844119ce9485abfe8aa9076ec76b5300ddd 日期：2020-04-16T16:36:23.138Z 电子：7.1.11 铬：78.0.3904.130 Node.js：12.8.1 V8：7.8.279.23-electron.0 操作系统：Windows_NT x64 10.0.18363

谢谢， 罗克

Answer 1

关于投诉消息，这可能是不匹配的。请先重启 VS Code。重启后消息应该会消失。

对于多个调试器的设置，您需要单独添加配置到launch.json，就像您在当前的launch.json中所做的一样，您可以在选项中选择您要运行的调试器。

尝试以下步骤以使 Chrome 调试器正常工作：

1. 转到扩展视图 (⇧⌘X) 并搜索 Debugger for Chrome 扩展，然后安装。

2. 您在配置的 chrome url 中指定了http://localhost:8080，因此您必须在该 URL 上运行 Web 服务器。与步骤 1 一样，转到 Extensions View 以搜索 Live Server 扩展名，然后安装。此外，使用 Preferences: Open Settings (JSON) 转到 Command Palette (⇧⌘P)，添加以下 sn-p:

{
    "liveServer.settings.port": 8080,
}

这将设置 Live Server 的自定义端口号。在你的情况下，8080。

1. 点击VS Code右下角的Go Live启动服务器。这将打开一个新的 Chrome 浏览器。您可以将其关闭或留在原处。

2. 转到运行视图 (⇧⌘D) 并选择 Launch Chrome 选项以运行调试器。它将启动一个新的 Chrome 浏览器，此时您应该可以通过设置断点开始调试。

您可以查看https://code.visualstudio.com/docs/debugging 了解更多有用信息，并查看https://github.com/Microsoft/vscode-chrome-debug#using-the-debugger 了解具体的 Debugger for Chrome。