20

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?

mchrobok
  • 1,947
  • 2
  • 20
  • 22

1 Answers1

38

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.
Community
  • 1
  • 1
Rob W
  • 341,306
  • 83
  • 791
  • 678
  • 1
    Any suggestions if you need to debug the js in a DevTools panel that you have created? I would like to open the code and drop a breakpoint in there. When I try the method above all I see is the js that runs for the devtools_page, not the js for the panel itself. – Abe Miessler Mar 22 '15 at 07:23
  • @AbeMiessler The method from my answer works just fine for devtools panels (Chromium 41.0.2272.77). Did you look in the right devtools, *after* activating the panel? The panel is lazy-loaded, i.e. it is only loaded when you click on the tab. – Rob W Mar 22 '15 at 09:48