如何配置 Visual Studio Code 调试器以使用 Chrome Canary？答案

【问题标题】：How to configure Visual Studio Code debugger to use Chrome Canary?如何配置 Visual Studio Code 调试器以使用 Chrome Canary？
【发布时间】：2016-08-31 01:50:13
【问题描述】：

我同时处理多个项目，对于其中一个项目，我想使用 Chrome Canary 在 Visual Studio Code 中调试我的应用程序。

所以对于稳定版 Chrome 我有

{
        "name": "Launch Chrome",
        "type": "chrome",
        "request": "launch",
        "url": "http://localhost:7246/",
        "runtimeArgs": [
            "--new-window",
            "--remote-debugging-port=9222"
        ],
        "webRoot": "${workspaceRoot}/app/"
}

是否有任何简单的方法可以在 launch.json 中配置以在单独的调试端口（例如 9223）上使用 Chrome Canary，这样我就可以将 Chrome Stable 与调试端口 9222 一起用于所有其他事情？

【问题讨论】：

标签： google-chrome-devtools visual-studio-code

【解决方案1】：

你可以添加：

 "runtimeExecutable": "canary",

【讨论】：

【解决方案2】：

对我来说，Chrome Canary 的工作版本是

{
        "name": "Chrome Canary",
        "type": "chrome",
        "request": "launch",
        "url": "http://localhost:7246/",
        "port": 9223,
        "runtimeExecutable": "${env.USERPROFILE}/AppData/Local/Google/Chrome SxS/Application/chrome.exe",
        "runtimeArgs": [
            "--new-window",
            "--remote-debugging-port=9223"
        ],
        "webRoot": "${workspaceRoot}/app/"
}

【讨论】：

要附加到上述答案，属性“runtimeExecutable”的值“canary”足以在 Canary 中启动。

【解决方案3】：

您应该能够使用runtimeExecutable 属性来指定要测试的Chrome 版本的路径，并结合runtimeArgs 为该配置指定不同的调试端口。 launch.json 中的 configurations 属性允许您指定一组配置。

我自己没有看过 VS Code，所以无法验证，但这里有一些有用的信息：https://github.com/Microsoft/vscode-chrome-debug

更新您可以使用环境变量路径代替绝对路径。

在命令提示符中，尝试这样的方法来创建环境变量：

set CHROME_PATH=C:/Users/[USER]/AppData/Local/Google/Chrome SxS/Application

在配置文件中，路径可以这样引用：

${env.CHROME_PATH}/chrome.exe

查看https://code.visualstudio.com/Docs/editor/tasks#_variable-substitution了解更多详情。

【讨论】：

谢谢！你知道你是否可以在配置路径中使用系统环境变量吗？
在发现您可以使用变量替换后，我向我的解决方案添加了更新。我希望这会有所帮助。