How to debug chrome extension with DevTools or other debugger?

Question

Is there any way to debug chrome extension using debugger ( break points and step in/out)
beside console.log ?

Answer 1

Chrome 70.x debugging of chrome background scripts is broken, especially when you dynamically load them and they are not in the manifest. Have a ticket open to get it fixed; however they have not been very helpful; however found a work around...

1. Put a console.log("yourvariablenamehere") in your background.js script.
2. Hit F12 to open the dev tools, anchored to the bottom of the web page.

3. Load the background script via a button in your popup.html. Something like this from a button event...

   var guid = CreateGuid(); chrome.tabs.executeScript(null, { file: "script/jquery-3.3.1.js" }, function () {
   $.get("script/scrollPage.js?ver=" + guid, function (sScriptBody, textStatus, jsXHR) { chrome.tabs.executeScript(null, { code: sScriptBody }); }, "text"); });

4. In the dev tools console you should see your logged variable. On the same line as the logged message is a VM with a number tacked onto it, a virtual script page. Select that VM page and then you get to the background script! Now put a breakpoint in the virtual script page, click the same button in your popup.html and it gets hit. And when you reload the popup and execute the background script that breakpoint is hit!

Hope this helps.

Answer 2

If you want to inspecting content scripts, a great method I found is using Console by selecting your extension in javascript context:

By selecting the extension you will have access to the global objects within that extension.

Reference:

1. Using the Developer tools to debug your extension