Debugging Content Scripts for Chrome Extension

Solution 1:

Content scripts' console.log messages are shown in the web page's console instead of the background page's inspector.

Adding debugger; works if the Developer Tool (for the web page where your content script is injected) is opened.

Therefore, in this case, you should first activate the Developer Tool (of the web page) before clicking the browser action icon and everything should work just fine.

Solution 2:

I tried to use the debuggermethod, but it doesn't not work well because the project is using require.js to bundle javascript files.

If you are also using require.js for chrome extension development, you can try adding something like this to the code base, AND change eval(xhr.responseText) to eval(xhr.responseText + "\n//@ sourceURL=" + url);. (like this question)

Then you can see the source file in your dev tool (but not the background html window)