[英]Debug Chrome Extensions with Visual Studio Code
Does anyone know if it's possible to debug a Chrome Extension with Visual Studio Code?有谁知道是否可以使用 Visual Studio Code 调试 Chrome 扩展? All the examples I've read involve a real web page with a url.
我读过的所有例子都涉及一个带有 url 的真实网页。
For those who still finding the answer (like me, earlier), I have found the real solution and here's it is.对于那些仍在寻找答案的人(如我,早些时候),我已经找到了真正的解决方案,这就是它。 This assumes that you have Debugger for Chrome already installed.
这假设您已经安装了Debugger for Chrome 。
Instead of having native configuration support like Firefox does, you need to supply arguments to load the extension before running Chrome, specifically the load-extension
argument.不像 Firefox 那样拥有本地配置支持,您需要在运行 Chrome 之前提供加载扩展的参数,特别是
load-extension
参数。
Add this line inside your Chrome configuration object with the launch request, located on your .vscode/launch.json
file.在
.vscode/launch.json
文件中使用启动请求在 Chrome 配置对象中添加此行。 This assumes that your manifest.json
file is directly on the workspace folder.这假定您的
manifest.json
文件直接位于工作区文件夹中。 If your manifest.json
file is located in another folder, change the ${workspaceFolder}
accordingly.如果您的
manifest.json
文件位于另一个文件夹中,请相应地更改${workspaceFolder}
。
{
"runtimeArgs": ["--load-extension=${workspaceFolder}"]
}
For example, this is how I do it on the launch.json
file in my workspace.例如,这就是我在工作区中的
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}"
}
]
}
You can debug extension code running on a web page using the attach
option.您可以使用
attach
选项调试在网页上运行的扩展代码。
{
"type": "chrome",
"request": "attach",
"name": "Chrome Extension debugging",
"port": 9222,
"url": "<URL>",
"webRoot": "${workspaceFolder}/extension"
}
Remember to close any open instances of Chrome before starting Chrome in debug mode:请记住在调试模式下启动 Chrome 之前关闭所有打开的 Chrome 实例:
.\chrome.exe --remote-debugging-port=9222
More information can be found here: vscode-chrome-debug on GitHub可以在此处找到更多信息: GitHub 上的 vscode-chrome-debug
Unfortunately, at this moment Google Chrome Extension can be debugged only using Chrome DevTool.不幸的是,目前只能使用 Chrome DevTool 调试 Google Chrome 扩展。 ... -> More Tools -> Extensions -> Your extension ->
Inspect views background page
... -> 更多工具 -> 扩展 -> 你的扩展 ->
Inspect views background page
Regarding vscode-chrome-debug :关于vscode-chrome-debug :
Supported features支持的功能
Unsupported scenarios不支持的场景
Yes it works, it is possible to debug the extension...是的,它有效,可以调试扩展...
Using Debugger for Chrome extension ..使用Chrome 扩展调试器..
First make sure you have all chrome windows closed... and configure an "Attach" debugging option like the following...首先确保您已关闭所有 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 ..
}
Then open chrome with the following command:然后使用以下命令打开 chrome:
google-chrome --remote-debugging-port=9222
... then navigate to the url on which you want to debug your extension... ...然后导航到您要调试扩展程序的网址...
... and finally, and only then... Start your debugging session on vscode... ...最后,只有那时...在 vscode 上开始调试会话...
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.