Using Chrome JavaScript Debugger / How to break on page loading events - javascript

I'm using chrome's debugger and I'm good when it comes to setting break points once a page is running. My problem is when I do either f5 or press enter on the URL line my break points disappear. How can I set a break point in code that happens when the page first loads?

In Chrome's Developer Tools, go to the Sources tab. On the right, open up Event Listener Breakpoints, and you can set breakpoints on events.
It sounds as if you'll want to set your breakpoint on DOMContentLoaded, which is under the DOM Mutation section.
After you do this, reload the page and you'll end up in the debugger.

Try putting debugger; in your code. That also works in FF's Firebug

Later versions of Safari and Firefox should work properly with breakpoints across reloads, but one needs to be sure that the query is exactly the same between requests. ExtJS 4, for instance, adds a _dc=<epoch> that will disable the cache.
To stop that behavior, add the following:
Ext.Loader.setConfig({
disableCaching: false,
enabled: true
});
Hope that helps!

Chrome JavaScript debugger
I use the next approach that is suitable for Chrome, Safari using Charles Proxy[About] and Rewrite Tool
debugger;
or if you need to make a browser console wait
setTimeout(function(){
debugger;
console.log('gets printed only once after timeout');
}, 7000);
setTimeout is a function that will trigger after delay to give a user time to attach the console

Debugger can be set also by using XHR/fetch breakpoint
In chrome developer tools -> sources tab, in the right pane you can see XHR/fetch breakpoint using that you can set breakpoint.
Add breakpoint
Enter the string which you want to break on. DevTools pauses when this string is present anywhere in an XHR's request URL.
If breakpoint has to be set for all XHR or fetch, please check the option Any XHR or fetch
In firefox developer, tools -> debugger tab, adding to the above feature we can set debugger based on request methods.

If you would like to stop the javascript at the time it's first loaded in the browser (and not when the DOMContentLoaded event listener is triggered which happen later) simply click on pause button in chrome debugger and reload your page with F5 keyboard button.
It worked for me.

Related

Open the Chrome Inspector via code to catch quick breakpoints?

Here is the situation. A popup window contains the javascript I need to debug. It also contains a re-direct that happens so fast I can't open the Inspector fast enough to have the breakpoints fire. I start with the Inspector open and click a link which closes the Inspector and opens the popup window which contains the javascript. But the logic happens and the re-direct fires so fast I can't open the Inspector before Chrome is already off the popup with the script I need to debug.
I've read the Google documentation and setting breakpoints works great but the breakpoints only fire if the Inspector is open.
I tried using debugger; which I found from this SA answer but once again, it only fires if the Inspector is open.
Just to debug it, I also tried setting a "sleep" function (which chews up processor, is bad etc) like this:
function sleep(milliSeconds){
var startTime = new Date().getTime(); // get the current time
while (new Date().getTime() < startTime + milliSeconds); // hog cpu
}
sleep(5000);
That didn't work either.
Is there a way to get the Inspector to pop open via code? If not, what is the best way to debug this?
Thanks.
I've been struggling with this issue all day and finally hit upon a solution. Simply place an alert in your code before the debugger statenent:
alert('Time to attach the debugger');
debugger;
When the alert appears on the screen, simply click the "inspect" link in Chrome Inspector. The inspector will attach to your page and you can then click OK on the alert box to continue. It will then stop at the debugger statement

Debug webpage redirects in browser

I am debugging a web application which redirects several times on page load. Page A redirects to page B, which redirects to page C. I don't know what methodology is used (e.g. JavaScript, HTTP redirects, etc.).
What I'm looking for is a debugger to break before a page gets redirected, so that I can inspect exactly what method is being used to redirect, and what data is being sent to next page in the redirect chain.
Is there a simple way to do that? I'm debugging on Windows, so Chrome, Firefox and IE are all available.
UPDATE: It seems that Fiddler is the best option available. I marked the answer from #cgatian as a solution, since his was the Fiddler idea.
In Chrome there is Event Listener Breakpoints -> Sript -> Script First Statement:
Pressing F8 will stop on first statement of any script in page, e.g :
<script type="text/javascript">document.location.href='http://www.example.com'</script>
Also, there is Event Listener Breakpoints -> Load -> beforeUnload but not works in my case.
Alright so it sounds that you want to actually look at variables inside the browser before the redirect occurs. One way I can think of (without modifying the source directly) is to use Google Chrome Snippets.
You could create you're own snippet that binds to the onbeforeunload event.
Step By Step Instructions on Creating a Snippet
Snippet code:
window.onbeforeunload = function(){
var debug;
return;
}
All I am doing in the above code is attaching an event before the browser would be redirected.
If you then place a break point inside your snippet you will be able to break and inspect the variables on the page. (Don't forget to right click your snippet and select Run) before debugging.
In chrome, in the debug window, at the very bottom, are a series of buttons. Click the button that is a dark black circle. It will preserve the log upon navigation. I think that is what you want.

Chrome devtools: Drop into debugger without switching to Sources tab

If I put the debugger statement in my JavaScript source with the Chrome devtools open, it'll stop execution so I can interactively explore the current context from the console. It's really awesome.
But unfortunately it will also switch to the Sources tab and display the line where the debugger statement happened. Most of the time, I want to type JavaScript commands, so I have to manually switch back to the Console tab.
Can I avoid the tab-switching and stay in the Console tab?
Or am I using it wrong?
Right-click on the source-tab and select 'move to bottom'.
Looks like Chrome added a preference for this in the intervening 9 years: https://stackoverflow.com/a/69216922/66673
Quoting that answer:
I had the same issue and it was driving me nuts! The way I managed it to stop switching was to go to into the DevTools settings -> Preferences.
Under Sources options, uncheck Focus Sources panel when triggering a breakpoint.
There's a reason for that - and is that whenever the code has stopped, because of a breakpoint or a debugger statement, you'd usually want to actually see where the execution has stopped. So, the developer tools switches to the Scripts/Sources tab, and this is a common behaviour among the major browsers, that may also show the local variables, the call stack and so on.
The best thing you can do is to keep the console frame always open, so you're ready to work. Just press Esc or click on the second icon on the lower left corner. That's what I usually do.
Switch to the Console tab when you expect to get a large response from the command you type.

How to debug javascript when it goes into infinite loops and recursive calls in Javascript?

When you are in the infinite loop or recursive calls, basically the browser stops responding to anything (either on Chrome or FF). You cannot see logs, cannot get into debugger, even you cannot open the console itself. The browser just simply freezes. This is so annoying. It seems I can do nothing but sitting here scratching my head... Anyone can shed light on how to solve this?
Another trick you could try is to have the Web developer tools in Chrome open and try to hit Pause when the Browser apparently hangs. Then it should break at the line where it's currently executing. With some stepping out you should get to the bottom of this.
Assuming you know (or suspect) the function where the infite loop happens you could add code like this:
var calls = 0;
function iSuspectToBeLoopingInfititely() {
calls += 1;
if (calls > 100) { debugger; }
}
This will stop the JavaScript debugger in Chrome once the method has been called 100 times.
Note: Chrome will only break for debugger; calls if you actually have the Developer Tools window open.
Found another way of debugging. In my case the error was caught and so no errors where logged to the console. Found the bug with the checkbox Pause on caught exceptions. You find the option in den dev tools unter the Sources tab. To show and enable the checkbox click on the last icon:
After enabling this, the debugger pauses on every caught exception.
I had issues in Chrome, I would see in the browser window 'Paused in debugger' but couldn't see where as maybe Chrome was confused since it was in a loop ... In Firefox, it recognized its taking too long and then a popup comes up after 30seconds to 1minute saying the file and general line # its frozen on which helps out to debug further and set Breakpoints around that area.
I solved this by placing Chrome breakpoints along all functions in the function file that I knew was causing the issue. I started with one debugger in the file so the execution would stop, which made it easier to add the chrome breakpoints.
Click the code numbers on the left side of the source file in Chrome Dev Tools "Sources" tab to add a blue debugger breakpoint. Place several of these and you can use the command buttons at the top right of the Sources tab dash to step through the functions. You can even add console.log items that will run on each time you step through.
Additionally, note that at any point in the paused execution, you can switch to the "Console" tab and type the name of any variable or function, and you'll get the current value of that variable or function.

See what methods/events being called in JS

Got this page which has some javascript on it (very heavy) and I am trying to see what happens when I click a certain element. However looking at the code there is no onclick function - the javascript is several JS files so take far to long to browse.
Is there a way with Firefox (firebug), Chrome or even IE to view whats / log what is happening when I click on an element in the browser?
In firefox (and this is also available in chrome and IE in another form) install addon firebug (if not installed). Go to Tools->Birebug->Open Firebug. Click on Left Icon and ask for tracing.
You can then trace your program.
Another way is to cause a breakpoint when you start, and you manually follow the execution of the script.
Chrome Developer Tools shows all attached event handlers for an element. See the section on Event Listeners towards the end.
#wizzard, try this: firebug - profiling button
ff only, but there is a lite version for chrome for example

Categories

Resources