0

I'm creating a chrome extension with a background script and a popup. I can right-click on the extension icon and select "Inspect popup" to debug the popup and I can click on "Inspect views: background page" to debug the background script. However, it's very annoying to have to keep switching between the two debuggers, since opening one closes the other.

Is there any way to keep both up or, optimally, unify them under one debugging console?

Edited to add: this is not a duplicate of this question because I was able to see the output of both the popup and the background task, just not at the same time.

Community
  • 1
  • 1
kris
  • 23,024
  • 10
  • 70
  • 79
  • @Makyn, I think it's different. I was able to see the output of both the popup and the background task, just not at the same time. – kris Mar 27 '17 at 13:37
  • While the question and situation are somewhat different, what matters are the answers. Could the answers, the primary answer, or at least one of the answers, be copy and pasted into an answer on this question and be an answer that solves the problem. In my opinion, that is the case for the proposed duplicate. Alternate duplicates would be: [Where to read console messages from background.js in a Chrome extension?](http://stackoverflow.com/a/10258029) or [How to use console.log() to debug a Chrome extension?](http://stackoverflow.com/q/16846081) – Makyen Mar 27 '17 at 14:40
  • All of those answers are how to open the developer tools and do not address how to keep multiple developer tool windows open. – kris Mar 27 '17 at 17:43
  • All of them describe how to open the the DevTools for the background page, which is all the answer *you accepted* does. The answer you accepted does not go beyond what the answers to any of those other questions do. In fact, the answer you accepted says/shows less than many of the answers on the other questions. For instance, the one which I proposed as a duplicate describes how to open the various DevTools for the different Chrome extension contexts/scopes/pages, all of which are independent. I'm not seeing how this is *not* a duplicate of all the other questions I've linked. – Makyen Mar 27 '17 at 18:00
  • I'm not trying to be pedantic, I really don't see how this is not a duplicate, of all the linked questions (there's nothing wrong with it being a duplicate, duplicates help people find answers). I'm willing to be convinced that it's not a duplicate, but I just don't see it. If the answer which you accepted went beyond what the answers to the linked questions say, then I could understand that you might have been looking for something more. That answer doesn't, so you appear to be satisfied with an answer that says less than what is stated in the answers to the linked questions. – Makyen Mar 27 '17 at 18:04
  • Ugh... you're totally right, reading comprehension fail on my part. Someone commented on this question (and has since deleted their comment!) with the actual answer: open your extension in a new tab and use the developer tools on that as though it were a "normal" webpage to debug the popup. At the same time, you can open the background task developer tools through the chrome://extensions page link. I guess I could post that and "answer my own question," since that comment seems to have disappeared. Wdyt? – kris Mar 27 '17 at 19:06

2 Answers2

6

Someone posted this as a comment before, by they since deleted it:

The key is to open the extension popup as a tab and inspect that, then open the "background page" inspector from the Extensions page.

To open the extension as a tab, copy the ID from the extensions page (it looks something like "ID: jjkacfpleioidimgaoplgalkafaboojn"). Then, assuming your html page is popup.html, you'd go to chrome-extension://jjkacfpleioidimgaoplgalkafaboojn/popup.html. Then you can inspect this tab like a normal webpage while the background page inspector is running.

kris
  • 23,024
  • 10
  • 70
  • 79
1

you can debug the background page by going to the chrome extensions page, check "developer mode" then scroll to your extension and click the "background" link to open its own debugging page. its separate from the popup debugger.

Zig Mandel
  • 19,571
  • 5
  • 26
  • 36
  • That's what I'm doing and it is not separate, for me. It simply replaces the foreground debugger. _Edited to add:_ Oh, I see what you mean. Yes, that works, thanks! – kris Mar 25 '17 at 16:37