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?

Yeah. i used to check here for js files injected through manifest.json, but can't find this. maybe becoz its injected programmatically. — shahalpk
– shahalpk, Commented Nov 19, 2013 at 9:02

jasonscript · Accepted Answer · 2013-11-20 01:03:36Z

16

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

so in content.js

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

edited Nov 20, 2013 at 1:03

answered Nov 19, 2013 at 9:04

jasonscript

6,2063 gold badges30 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

jasonscript Over a year ago

@shahalpk you're welcome. Just remember to delete all your debugger lines when you're done!

Rob W Over a year ago

debugger is a statement. The semicolon will be added by the Automatic Semicolon Insertion rules, but it's wrong to suggest that a semicolon has to be omitted.

jasonscript Over a year ago

@RobW I had a problem previously with the semi-colon (debugger never stopped code execution). I just tried it again in jsFiddle though and it worked so I guess my previous issue was unrelated. I've updated my answer

Matt · Accepted Answer · 2019-05-15 10:00:21Z

3

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.

answered May 15, 2019 at 10:00

Matt

1,2622 gold badges20 silver badges35 bronze badges

3 Comments

Murilo Perrone Over a year ago

It didn't work for me. I guess this depends on the type of JavaScript injection. It can be injected without actually having a file.

Matt Over a year ago

For debugging inline JavaScript, Chrome inspect element should work.

Murilo Perrone Over a year ago

I don't get your point, Matt. The injected javascript is not binded to any of the page's elements. What do you mean with "inline javascript", in the context of javascript injection? The two ways I know how to inject it is using a browser extension (for automatic injection) or using the Developer Console (console tab, for manual injection). Then just add code that manipulates DOM elements using the document object. In my case, to add styles. I tried your suggestion, but yet I can't find the injected script using Windows key + P and writing the sourceURL either.

Rajeev Jayaswal · Accepted Answer · 2019-07-01 08:46:00Z

0

You can type following inside your console: angular.element($0).scope()

Then you can search for the function you want to debug by expanding the result.

You will see FunctionLocation link as one of the child under the node. You can click on the link to open file where you can put debug point and debug.

answered Jul 1, 2019 at 8:46

Rajeev Jayaswal

1,5111 gold badge20 silver badges22 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

3 Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related