How do I debug chrome extensions?

Question

I am learning chrome extension by example. Here is the example I currently learning: http://www.chrome-extensions.net/extensions/mappy/

There are three JavaScript files in this sample project: background.js mappy_content_script.js popup.js.

"mappy_content_script.js" is shown in the Combo box of Scripts tab of Developer Tools.
"popup.js" can be found if I right click the extension icon and choose "Inspect popup".

The problem is I can't debug "background.js" or find it in the Developer Tools. I tried insert "debugger;" in this JavaScript file. I also tried use profiling tool to record the script execution. However, when I click the link of "background.js", a blank page shows up.

Is this a bug of chrome or did I miss something? Thanks

Answer 1

There is an easy way to access your extension code in DevTool and debug it.

Open the DevTool (e.g. F12) , click on "Sources" tab then look for "Content Scripts" menu next to Page , Filesystem, Overrides etc. and click on it .

you should see all active extensions listed there and you can easily add break point to each js code and reload the page to debug through

Answer 2

background.js is loaded in the background. To inspect it visit chrome://extensions, find the loaded extension, and "inspect active views" for the background script.

Edit

Below is a screenshot of the chrome extensions page. A click on the link background page opens the background page for this extension.

Additional information

EDIT 2020

Here is how you can see the content scripts and debug,

Answer 3

Nowadays you have to install a Chrome extension to allow you to inspect the view of a page, specifically the Develop and Debug Chrome Apps & Extensions