通过访问chrome.devtools api调试Chrome扩展程序

Question

我是Chrome扩展程序开发的初学者。我需要扩展现有的扩展（angularjs-batarang），但我在调试方面遇到了一些问题。

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。所以这不是解决方案。

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

Answer 1

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

1. 打开开发人员工具。
2. 如果尚未完成，请取消停靠开发人员工具（通过左下角的按钮）。
3. 按 Ctrl + Shift + J 打开开发人员工具的开发人员工具。
4. 可选：如果您在步骤 2 中取消了开发人员工具的停靠，请随意再次停靠它。
5. 从"<top frame>"切换到devtoolsBackground.html（或你为开发工具选择的任何名称）。（示例）
6. 现在，您可以使用"控制台"选项卡来玩chrome.devtools API。