Tuesday, June 6, 2017

Debugging source files using chrome extention

Leave a Comment

I am trying to control the debugger using Chrome Extention.

I am using devtools-protocol and chrome extension documentation, but I have no idea how to implement them as I have not seen any samples of the methods in use. I used the sample extension from here which shows how to pause and resume the debugger only, but that's absolutely no use to me. I tried to implement some methods in the sample, but nothing happens.

function onDebuggerEnabled(debuggeeId) {   chrome.debugger.sendCommand(debuggeeId, "Debugger.setBreakpointByUrl", {         lineNumber: 45825,         url: 'full https link to the js file from source tab'   }); } 

The problem is that the js file I am trying to debug is loaded from the website inside the sources tab and it's huge, we talking 150k+ lines after its been formatted and it takes some time to load.

Now can anyone tell me how to simply add a break point inside the js file from the sources (USING CHROME EXTENSION) so it could be triggered on action which will then stops the debugger so I could change values etc?

2 Answers

Answers 1

EDIT: Just saw your comment about this being for a custom extension you're writing. My answer won't help you (sorry!), but it might help people that come here looking for a way of setting normal breakpoints in Chrome.


Maybe you already did, but... Have you tried just clicking the line number of the line you want to set the breakpoint in?

Like this:

You can even enable or disable breakpoints in several different calls in the same line.

When the page is loaded, open Dev Tools with F12, then navigate to the JS file in the Sources panel, and add the breakpoints you want. Then, refresh the page to load it again -- Chrome will remember where you set the breakpoints and stop at them.

Answers 2

If you can modify the source code of the file that you want to debug, I would look use the debugger statement.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/debugger

function potentiallyBuggyCode() {     debugger;  //application will break here as long as chrome developer tools are open } 
If You Enjoyed This, Take 5 Seconds To Share It

0 comments:

Post a Comment