有谁知道是否可以使用 Visual Studio Code 调试 Chrome 扩展程序？我读过的所有示例都涉及一个带有 url 的真实网页。
【问题讨论】：
http://localhost:<port>/json 上。从问题页面来看，这是可能的，但仍然存在问题。
标签： javascript debugging google-chrome-extension visual-studio-code
对于那些仍在寻找答案的人（像我一样，早先），我找到了真正的解决方案，这就是它。这假设您已经安装了Debugger for Chrome。
您需要提供参数以在运行 Chrome 之前加载扩展程序，而不是像 Firefox 那样提供本机配置支持，特别是 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}"
}
]
}
【讨论】：
brave browser 而不是chrome？
chromium 之上的，所以勇敢者基本上是 chrome，但老实说，我也不知道如何用勇敢者进行调试，这就是我问的原因。如果我们将vs代码中的默认浏览器路径修改为brave path，也许是可能的。我不知道这是否可能。
很遗憾，目前只能使用 Chrome DevTool 调试 Google Chrome 扩展程序。
... -> 更多工具 -> 扩展 -> 你的扩展 -> Inspect views background page
支持的功能
不支持的场景
【讨论】：
您可以使用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
【讨论】：
是的，它可以工作，可以调试扩展...
使用Debugger for Chrome extension ..
首先确保您已关闭所有 chrome 窗口... 并配置一个“附加”调试选项，如下所示...
{
"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
...然后导航到您要调试扩展程序的 url ...
...最后，只有这样...在 vscode 上开始您的调试会话...
【讨论】：