Where to find code and console to debug background.js in Chrome extension

Question

how can I debug the code that I have in my background.js which contain some of my browser action.

the code is running on the load of the tab to validate the URL

chrome.tabs.onUpdated.addListener(checkForValidUrl); 

but when I inspect the pop up and try to debug into my code I can not find background.js in my files.

how can I debug this file ?

Answer 1

You can debug your extension's background.js in the development environment (debugger) from the Chrome Extension page at chrome://extensions:

It has a link to do that in each extension, often called "generated background page.html", (because Chrome generate a html page to contain your js).

If you're using Event Pages (background page with persistent:false in your manifest code), perhaps you should like to turn into persistent:true only for debug purpose.

The Event Page (i.e. persistent:false) unloads after few secondos of inactivity, and closes its debug window. persistent:true changes this, the page doesn't unload. It's better for debug, but turn into persistent:false when you get the debug done, because it's more efficient.