Geek Answers Handbook

How to debug JS program file in google chrome?

I embed a js file on 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 see hello stackoverflow printed in the web page console. But I can not find the source file, so I can debug it. Any idea how?

+10
javascript google-chrome google-chrome-devtools google-chrome-extension
source share
3 answers

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

therefore in content.js

 debugger; console.log("hello stackoverflow");
+12
source share

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

Just add

 //@ sourceURL = your_injected_file.js

at the top of your_injected_file.js. After the first implementation of the script, the script should appear under "Developer Tools"> "Sources"> "Content Scripts".

+1
source share

You can enter the following in your console: angular.element ($ 0) .scope ()

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

You will see the FunctionLocation link as one of the children below the node. You can click on the link to open a file in which you can put a point of debugging and debugging.

0
source share

More articles:


All Articles