在 Visual Studio Code 中调试 Chrome 扩展

【问题标题】：Debug Chrome Extensions within Visual Studio Code在 Visual Studio Code 中调试 Chrome 扩展
【发布时间】：2018-06-20 10:04:47
【问题描述】：

我正在尝试在 Visual Studio Code 中开发 Chrome 扩展程序，但我终其一生都无法弄清楚如何正确调试它。我可以在 Chrome 中安装扩展并使用 Inspect 弹出窗口对其进行调试，但我找不到 background.js 或任何其他 JavaScript 文件。我已经在 Visual Studio Code 中安装了 Debugger for Chrome，尽管它似乎不适用于 Chrome 扩展。

有人有什么想法吗？

【问题讨论】：

不确定 VSCode 是否可以调试后台页面，但 Chrome 肯定可以：只需导航到 chrome://extensions 页面（或右键单击扩展程序图标并单击“管理扩展程序”），切换“开发者模式”打开，在您的扩展程序条目中单击“背景”。

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

【解决方案1】：

您需要提供参数以在运行 Chrome 之前加载扩展程序，而不是像 Firefox 那样提供本机配置支持，特别是 load-extension 参数。

将此行添加到您的 Chrome 配置对象中，并带有启动请求，位于您的 .vscode/launch.json 文件中。这假定您的 manifest.json 文件直接位于工作区文件夹中。如果您的manifest.json 文件位于另一个文件夹中，请相应地更改${workspaceFolder}。

{
    "runtimeArgs": ["--load-extension=${workspaceFolder}"]
}

例如，这就是我在工作区中的 launch.json 文件上执行此操作的方式。

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome",
            "url": "https://example.com",
            "runtimeArgs": ["--load-extension=${workspaceFolder}"]
        }
    ]
}

【讨论】：