How do i debug a programmatically injected JS file in google chrome?

I know this is an old question, but for anyone who stumbles upon this, there is a cleaner solution.

Just add

//@ sourceURL = your_injected_file.js

at the top of your_injected_file.js. After first injection of the script, the script should be visible under Developer tools > Sources > Content Scripts.

Use the debugger keyword. This is like inserting a breakpoint into your JS code

so in content.js

debugger;
console.log("hello stackoverflow");