javascript - 使用 Visual Studio Code 调试 Chrome 扩展

Question

有谁知道是否可以使用 Visual Studio Code 调试 Chrome 扩展？我读过的所有示例都涉及一个带有 url 的真实网页。

Answer 1

对于那些仍在寻找答案的人(如我，早些时候)，我已经找到了真正的解决方案，这就是它。这假设你有 Debugger for Chrome已经安装。

不像 Firefox 那样拥有 native 配置支持，您需要在运行 Chrome 之前提供加载扩展的参数，特别是 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}"
        }
    ]
}