使用Visual Studio代码调试Chrome扩展程序

Question

有谁知道是否可以使用Visual Studio代码调试Chrome扩展程序？我读过的所有例子都涉及一个带网址的真实网页.

Answer 1

对于那些仍在寻找答案的人（像我一样，之前），我已经找到了真正的解决方案，就是这样。这假设您已经安装了 Chrome 调试器。

您需要在运行 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/#this-could-be-anything",
            // Here it is!
            "runtimeArgs": ["--load-extension=${workspaceFolder}"]
        },
        { 
            // Firefox equivalent
            "type": "firefox",
            "request": "launch",
            "name": "Launch Firefox",
            "url": "https://example.com/#this-could-be-anything",
            "addonPath": "${workspaceFolder}"
        }
    ]
}

Answer 2

您可以使用选项调试在网页上运行的扩展代码attach。

{
    "type": "chrome",
    "request": "attach",
    "name": "Chrome Extension debugging",
    "port": 9222,
    "url": "<URL>",
    "webRoot": "${workspaceFolder}/extension"
}

请记住在以调试模式启动 Chrome 之前关闭所有打开的 Chrome 实例：

.\chrome.exe --remote-debugging-port=9222

更多信息可以在这里找到：GitHub 上的 vscode-chrome-debug