How to debug Chrome extension example with code injection?

Question

maybe this question is a bit noob style but I don't understand this JavaScript stuff. My question: how do I debug injected code of the following chrome extension example? The file popup.js executes send_links.js (this is the injected file, if I understand this correct). I would like to debug send_links.js. I cannot set any breakpoint because I cannot see send_links.js in the Developer Tools of Chrome. I tried the command "debugger;" in send_links.js but it does not work. "console.log("blah");" commands are ignored too.

Thank you!

Answer 1

The debugger keyword will work if you open the Developer Tools for the current tab before you press the action button.

Also, if you want the script to display with its name, add the following line anywhere in send_links.js:

//@ sourceURL=send_links.js

Then the script will show up in the 'Content Scripts' tab of the Developer Tools of the current tab. There you can set breakpoints and such. But you need always to open the Developer Tools for the tab before pressing the button for this to work.

Answer 2

All Injected Files or Content Scripts are Exposed to Page Developer Tools, You can set breakpoints and all regular stuff you do on regular Java Script Pages.

_{(source: google.com)}

All your console log(s) appear in the page they are injected.

Ex:

If i inject console.log(document.getElementsByTagName('body')[0].style); to http://www.google.co.in/, then i need to open devtools of http://www.google.co.in/ page and look in its console.

The Output appeared is similar to regular debugging result.

EDIT 1

They are exposed through chrome.tabs.executeScript() but indirectly, when you set debugger; command you can inspect code.

Demonstration

If some sample code injects

chrome.tabs.executeScript(35, {
    "code": "console.log('hi');debugger;//@ sourceURL=send_links.js"
});

debugger of page shows the script being injected.