Debugging Chrome extension with access to chrome.devtools api

Question

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?

Answer 1

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.