Question

我安装了这个＆＃34;适用于Chrome的调试器＆＃34; VSCode中的扩展，但我想用它来开发只有弹出视图的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窗口。在那里，我可以看到我的扩展名直接到地址栏，所以我想它可以正确找到我的扩展名。

然后我开始连接的第二个配置，我可以看到两个＆＃34;启动popup.html＆＃34;和＆＃34;附加＆＃34;。

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

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

Answer 1

我发现了一种解决方法，可以在vscode中调试chrome扩展。

为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链接，然后Voilà！您已连接到vscode。

VSCode＆＃34;调试器适用于Chrome＆＃34;扩展适用于扩展开发？

1 个答案: