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

时间:2017-02-03 13:58:52

标签: javascript debugging google-chrome-extension visual-studio-code

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

4 个答案:

答案 0 :(得分:1)

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

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

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

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

更多信息可以在这里找到:vscode-chrome-debug on GitHub

答案 1 :(得分:1)

对于那些仍在寻找答案的人(像我之前一样),我已经找到了真正的解决方案,就是这样。

您需要提供参数来加载扩展,然后再运行Chrome,特别是load-extension参数。

将此行添加到您的.vscode/launch.json文件中的带有启动请求的Chrome配置对象中。假设您的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",
            // Here it is!
            "runtimeArgs": ["--load-extension=${workspaceFolder}"]
        },
        { 
            // Firefox equivalent
            "type": "firefox",
            "request": "launch",
            "name": "Launch Firefox",
            "url": "https://example.com",
            "addonPath": "${workspaceFolder}"
        }
    ]
}

答案 2 :(得分:0)

很遗憾,目前只能使用Chrome DevTool调试Google Chrome Extension。 ...->更多工具->扩展->您的扩展-> Inspect views background page

关于vscode-chrome-debug

支持的功能

  • 设置断点,包括在启用源映射时在源文件中
  • 步进,包括Chrome页面上的按钮
  • “本地”窗格
  • 调试eval脚本,脚本标签和动态添加的脚本
  • 手表
  • 控制台

不受支持的方案

  • 调试网络工作者
  • 调试Chrome扩展程序
  • 任何不是脚本调试的功能

答案 3 :(得分:0)

是的,它可以调试扩展名...

使用Debugger for Chrome extension ..

首先请确保您已关闭所有Chrome浏览器窗口... 并配置“ Attach”调试选项,如下所示...

  {
     "type": "chrome",
     "request": "attach",
     "name": "Attach to Chrome",
     "port": 9222,
     "webRoot": "${workspaceFolder}/src", <-- path to the root of the extension
     "url": "https://calendar.google.com/calendar/r" <-- Replace with the url (public or private) on which you want to debug your extension ...
      // IMPORTANT this url must exactly match the one in the address bar of the browser ..
  }

然后使用以下命令打开chrome:

google-chrome --remote-debugging-port=9222

...然后导航到要调试扩展程序的网址...

...最后,直到那时...在vscode上启动调试会话...