有谁知道是否可以使用Visual Studio Code调试Chrome扩展程序?我读过的所有例子都涉及一个带网址的真实网页。
答案 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
支持的功能
不受支持的方案
答案 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上启动调试会话...