VSCode“Debugger for Chrome”扩展是否适用于扩展开发？答案

【问题标题】：Does the VSCode "Debugger for Chrome" extension works for extension development?VSCode“Debugger for Chrome”扩展是否适用于扩展开发？
【发布时间】：2018-06-07 06:02:57
【问题描述】：

我在 VSCode 中安装了这个“Debugger for Chrome”扩展，但我想用它来开发只有弹出视图的 Chrome 扩展。

我的项目文件夹中有这个launch.josn：

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch popup.html",
            "type": "chrome",
            "request": "launch",
            "webRoot": "/To/My/Project-Folder"
        },
        {
            "name": "Attach",
            "type": "chrome",
            "request": "attach",
            "port": 9222,
            "webRoot": "/To/My/Project-Folder",
            "sourceMaps": true,
            "smartStep": true
        }
    ]
}

然后我首先开始第一个配置，并得到一个新的 Chrome 窗口。在那里我可以在地址栏上看到我的扩展程序，所以我想它正确地找到了我的扩展程序。

然后我开始第二个配置来附加，我可以看到“Launch popup.html”和“Attach”都出现了调用堆栈。

但问题是我在background.js 和popup.js 中设置了一些断点，并尝试单击我的扩展图标以启动弹出窗口，但没有一个断点被命中。

有没有人成功地用它来开发 Chrome 扩展程序？

【问题讨论】：

@Young 你找到解决办法了吗？
@Young，同样在这里，你找到解决方案了吗？
@devkabiir，很遗憾没有找到解决方案。
@Clement，不，我最终放弃了

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

【解决方案1】：

我找到了一种在 vscode 中调试 chrome 扩展的解决方法。

安装 Debugger For Chrome 并使用以下配置启动调试器。

 "version": "0.2.0",
 "configurations": [
     {
         "type": "chrome",
         "request": "launch",
         "name": "Launch Chrome against localhost",
         "url": "chrome-extension://<your-chrome-extension-id>/popup.html",
         "webRoot": "${workspaceFolder}"
     }
 ]

它将创建一个新的 chrome 实例，但不会打开页面。然后转到设置并启用开发者模式并再次加载您的扩展程序。
现在刷新chrome-extension://<your-chrome-extension-id>/popup.html 链接，瞧！你正在连接到 vscode。

【讨论】：