Break javascript before an inline javascript redirect in Chrome

Question

I'm viewing a page that has an inline javascript redirect (window.location = "/anotherpage"). I want to load the page in Chrome but have the redirect line disabled, so I can use the page without getting redirected away.

Here's what I've tried:

• Developer tools -> Cog -> General -> Disable JavaScript. Load the page. It doesn't redirect (yay!). But I still want the rest of the page's javascript to run, and it hasn't.

• Type the URL, then click Developer tools -> Sources -> Pause (F8) real fast! It hasn't redirected yet (yay!) Now I want to disable the redirect line before unpausing, but that part hasn't even loaded yet into Developer Tools. So I'll start stepping through the other files javascript code until I get there?? But as soon as I step out of the other files javascript, it immediately redirects away (doh!).

Can this be done? I thought it should be easy to disable a line of javascript, but I'm stumped.

Faience

Answer 1

Developer Tools -> Sources -> Event Listener Breakpoints (on the right sidebar) -> Load -> check unload

This will make debugger break on unload event which is dispatched before navigation.

Respite

Worked for me as well – Oenomel

Another thanks for the working answer. I'd be interested to hear why so many upvotes on the "this does not work" message; was this an issue with older Chrome versions? Can someone for whom it didn't work provide more information? – Dramshop

I was initially very happy to see this response but I can confirm that it does not work for me (even though I've checked unload as suggested, the page redirect still takes place and I have no chance to set breakpoints in the sources of page A). Maybe it has to do with the way that the first page "redirects"? In my case page A (the page whose javascript I am trying to Debug) performs a POST (via javascript) to page B. – Euthenics

If this solution does not work for you, I suggest that you file a bug on crbug.com/new providing some more details on your scenario. – Respite

nice! didn't know about event listener breakpoints yet... thanks for the comment – Groundling

Similar to Emil G, I suspect I'm dealing with a 'rogue' form submission that I'm trying to debug, and this doesn't work for me as a way to break on that event and inspect the call stack. – Biogen

it works alright, the problem is that the call stack is empty, so it's not really helpful, as you will not be able to see what actually triggered the redirect – Shalon

@EugeneKuzmenko seriously, I don't know how this is actually helping anyone – Aculeate

This only works if the page has an unload or beforeunload handler at which the debugger can stop. If no such handler is registered, the debugger won’t trigger. – Lesleylesli

Even if the page has an unload or beforeunload handler, the debugger only stops in the handler, not where the location change happens. – Timekeeper

This works in my scenario, where I know where I want to put the breakpoint, I just need an opportunity to put the breakpoint there; the breakpoint for an onload event gives me a chance to put a breakpoint in a dashboard.service.ts to see why it redirected... – Exert

Doesn't seem to work with client-side routing (where there's no page load/unload). – Perigee

I had a page that used window.location.replace(redirectUrl); and unfortunately this did not break. I ended up using curl to directly download the html file and looked through the page and JS files.. – Tingle

If you can't get it working, try the "beforeunload" event instead of "unload". It worked better for me. – Brycebryn

Answer 2

Do the following

1. Open Developer Tools
2. Go to Sources tab
3. Look for Event Listener Breakpoints
4. Expand Load option
5. Here check unload option

Circinate

@TomBrito when on the beforeunload break (which I had to use to dodge some silly newspaper paywall), I can inspect elements. Can you not inspect when on unload? I'm on Chrome 71.0.3578.98. – Exploiter

This does not work. – Triceratops

Answer 3

I have a 3rd party JS library, which has had a wrong condition to reload the page. And the page has been reloaded continuously because of this. I tried to find where is the wrong code.

I tried to use the "Event Listener Breakpoints" method, but as a comment said you don't have stack trace in unload events, so it is pretty useless.

The solution which has worked for me: I created a page with an iframe tag with sandbox attribute, e.g. <iframe sandbox="allow-same-origin allow-scripts allow-popups allow-forms"></iframe> and put my site in it. This way security errors will occur inside chrome and the console shows where the JS tries to access the location object. You can click on it and see the code. The best is Chrome has a JS decompressor (the {} button in the bottom left of the source window), which is clever, can show the line even after pretty printing, so you can see it even in compressed JS.

More info about sandbox property: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attr-sandbox

Rhombohedral

This only works if the code (in that iframe) use top.location = "..." not location = "..." – Neville

Answer 4

Very old post, but meybe this helps someone:

Open your borwser javascript console. And just paste that:

window.addEventListener("beforeunload", function() { debugger; }, false)

It will "pause" just before redirecting.

Godown