Debugging Chrome extension default_popup using dev tools

Question

I'm trying to do some simple debugging on a Chrome extension. When I try to catch an event ID and show it in an alert, Chrome immediately closes the alert and the default popup window making it impossible to tell what was in the alert. For instance:

$("a[data-toggle='pill']").on('shown.bs.tab', function (e) {
    alert(e.target.id);
});

To instead log this to the console, I could do:

$("a[data-toggle='pill']").on('shown.bs.tab', function (e) {
    console.log(e.target.id);
});

However, if I inadvertently close the popup or have to reload the extension, then the console window I opened using "inspect popup" on the popup will also be closed. This makes for a very tedious debug process.

What is a better approach to debugging and test Chrome extensions for the default_popup?

Answer 1

You can debug your chrome extensions like this

go to this link
chrome://inspect/#extensions

you can see your installed extensions and you can inspect them
:)

grab the link to the extension and change url to popup window url in my ex: I changed background.html --> popup.html