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

Question

i'm injecting a js file to every page in google chrome via

chrome.browserAction.onClicked.addListener(function(tab) {  
  chrome.tabs.executeScript(null,{file:"js/content.js"},function(resultArr){
    console.log(resultArr);
  });  
});

content.js

console.log("hello stackoverflow");

I can see hello stackoverflow printed in the console of the webpage. But i'm not able to find the source file, so i can debug it. Any idea how?

Answer 1

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

so in content.js

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