使用chrome.devtools API访问Chrome扩展程序 [英] Debugging Chrome extension with access to chrome.devtools api

问题描述

我是Chrome扩展开发的初学者。我需要扩展现有的扩展（ angularjs-batarang ），但我有一些调试问题。

manifest.json 有条目：

 background：{
page：background.html
}，
devtools_page：devtoolsBackground.html
  

问题是：如何调试 devtools_page ？我添加到 manifest.json 附加条目
options_page：devtoolsBackground.html，当我将此扩展添加到Chrome我有可能从 chrome：// extensions 运行选项页面。
它的作用是因为应用程序在断点处停止。但不幸的是，我无法访问 chrome.devtools API。所以这不是解决办法。

如何调试此API并访问此API？

解决方案

要打开开发工具的devtools页面，我通常会按照以下步骤：

1. 打开开发人员工具。


2. 如果还没有完成开发工具（通过左下角的按钮），请取消开发工具。


3. 按 Ctrl + Shift + J 打开开发人员工具的开发工具。 li>
   
4. 可选：如果您已经在步骤2中卸下了开发工具，请再次停靠。


5. 从至 devtoolsBackground.html （或您为devtools选择的任何名称）。 （示例）


6. 现在，您可以使用控制台选项卡播放 chrome.devtools API。




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

manifest.json has entries:

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

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.

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

解决方案

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

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屋！