通过访问 chrome.devtools api 调试 Chrome 扩展 [英] Debugging Chrome extension with access to chrome.devtools api

问题描述

我是 Chrome 扩展程序开发的初学者.我需要扩展现有的扩展(angularjs-batarang)，但我在调试时遇到了一些问题.

I am beginner in Chrome extensions development. I need to extend existing extension (angularjs-batarang), but I have some problems with debugging.

manifest.json 有条目:

  "background": {
    "page": "background.html"
  },
  "devtools_page": "devtoolsBackground.html"

问题是:如何调试devtools_page?我添加到 manifest.json 附加条目"options_page": "devtoolsBackground.html" 并且当我将此扩展程序添加到 Chrome 时，我可以从 chrome://extensions 运行 options 页面>.它起作用是因为应用程序在断点处停止.但不幸的是，我无法访问 chrome.devtools API.所以这不是解决方案.

The question is: how to debug devtools_page? I added to manifest.json additional entry "options_page": "devtoolsBackground.html" and when I add this extension to Chrome I have possibility to run options page from chrome://extensions. It works because application stops at breakpoints. But unfortunatelly I have no access to chrome.devtools API. So it is not solution.

如何调试并访问此 API?

How can I debug this and have access to this API?

推荐答案

打开一个devtools页面的开发者工具，我通常按照以下步骤:

To open the developer tools for a devtools page, I usually follow the following steps:

1. 打开开发者工具.
2. 取消停靠开发者工具(如果尚未完成)(通过左下角的按钮).
3. 按Ctrl + Shift + J打开开发者工具的开发者工具.
4. 可选:如果您已在第 2 步中取消停靠，请随时再次停靠开发者工具.
5. 从"切换到devtoolsBackground.html(或您为开发工具选择的任何名称).(示例)
6. 现在您可以使用控制台"选项卡来使用 chrome.devtools API.

1. Open the developer tools.
2. Undock the developer tools if not already done (via the button in the bottom-left corner).
3. Press Ctrl + Shift + J to open the developer tools of the developer tools.
4. Optional: Feel free to dock the developer tools again if you had undocked it at step 2.
5. Switch from "<top frame>" to devtoolsBackground.html (or whatever name you have chosen for your devtools). (example)
6. Now you can use the Console tab to play with the chrome.devtools API.

这篇关于通过访问 chrome.devtools api 调试 Chrome 扩展的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！