55

I'm debugging some 3rd-party minified Javascript that somewhere is triggering a browser page refresh. However, I can't figure out what part of the code is causing the refresh.

Is there a way to put a breakpoint in Chrome that will be hit just before a page refresh so I can inspect the call stack to see what caused it?

5
  • 2
    You might try a custom onunload listener and break there.
    – Marvin
    Aug 21, 2016 at 15:00
  • 1
    You could then generate a stack trace and see which functions are involved in triggering the reload.
    – Lix
    Aug 21, 2016 at 15:02
  • 2
    You might already know this. There's a check box in Chrome's console, that makes logs not clear after reload. Aug 21, 2016 at 15:03
  • 1
    I tried both onunload and onbeforeunload but the call stack is empty. Aug 21, 2016 at 15:12
  • 3
    Have you tried stackoverflow.com/a/12419326/123415
    – jcuenod
    Oct 3, 2016 at 4:00

7 Answers 7

67
+50

Try this:

  1. Open your Chrome Dev Tools
  2. Navigate to the "Sources" tab
  3. On the right panel, expand "Event Listener Breakpoints"
  4. Expand the "Load" tree
  5. Check the beforeunload and unload options

See if that helps; screenshot below.

Chrome Dev Tools with Suggested Event Listener Breakpoints Checked

Edit: Alternately, if that doesn't work, you can use Chrome to search all loaded scripts for the code that might be responsible. There's apparently a lot of ways to refresh the page with JavaScript but they mostly have a few common strings like "navigator", "location", "reload", "window".

Finally, if there's a link to the same page you are on, it's possible some JS is triggering a click on it-- unlikely, but worth exploring if nothing else has worked thus far...

(Please excuse the formatting as I'm on mobile...)

NOTE: It seems occasionally, for reasons I don't yet fully understand, this solution fails to actually cause the debugger to pause; in this situation, I found that thorn̈'s answer to this question did the trick for me.

7
  • 1
    it will not give away the code piece which is causing refresh
    – Siddharth
    Oct 8, 2016 at 6:01
  • 1
    Sorry @Siddharth not sure I understand what you're getting at? Oct 8, 2016 at 6:04
  • i meant that the OP wants to detect the code piece which is causing page refresh, the way you put these events are just fine but this way or another we can not know the location of code which is triggering refresh, hope you got a better idea now
    – Siddharth
    Oct 8, 2016 at 6:08
  • @Siddharth - Thanks for clarifying. As long as the debugger triggers, I believe we should be able to trace it in the dev tools-- even if it's not the line we debug on, we should be able to trace it down the stack in the dev tools. Do you disagree? Oct 8, 2016 at 6:11
  • i am just not sure, let me run some code and check, thanks though
    – Siddharth
    Oct 8, 2016 at 6:16
38

In Firefox (not Chrome, it's important; UPD 2020: it now works in Chrome as well) Developer Tools, go to the console, enter addEventListener('beforeunload',()=>{debugger}), and execute your code. After the debugger stops at the debugger statement, look at the call stack. You'll see what triggered the event. Chrome didn't have it there.

At least, this worked for me.

8
  • 4
    This worked for me in Chrome 79 too! In my case, it was caused by a script that was calling window.location.reload(); (unintentionally). It's weird that the "DOM Breakpoints" feature simply didn't make the debugger break for beforeunload nor unload.
    – Dai
    Jan 23, 2020 at 13:46
  • 1
    @silviubogan It most probably means that in your case, the location is changed not by JS.
    – thorn0
    May 30, 2020 at 20:24
  • 1
    Works for me in Chrome 83. I've just rechecked: addEventListener('beforeunload',()=>{debugger});function foo(){window.location.reload()};foo() The call stack is shown correctly.
    – thorn0
    May 30, 2020 at 20:29
  • 1
    Funnily enough, I just ran into the same scenario as @Dai in which my own solution to this question didn't work for me even on Chrome. In this case, this answer did work, and I was able to continue debugging. Jul 2, 2020 at 20:44
  • 1
    Same for me @AlexanderNied but I don't really understand why your solution didn't work, as it should be exactly the same. May 30, 2022 at 9:21
8

In the devtool, network pane, toggle the "Preserve log", carefully check the initiator column.

1
  • The Initiator column just shows "Other" for the page load, in my case. Jul 24, 2022 at 13:20
3

You don't specify what's the 3rd party library does. If it is a ui component like an ad or something similar, just place it inside an iframe with the sandbox attribute configured as you need.https://developer.mozilla.org/en/docs/Web/HTML/Element/iframe (Scroll down to the sandbox attribute section)

If it is something triggered by an event, just use (in chrome dev tools only) the getEveneListener() function and follow the listener trail... (hard, but possible) Example:

enter image description here

The listener property will lead you to the actual functions that will be invoked. You can than search them in the obfuscated code and add debugger to understand it's purpose.

There are many other scenarios - if you can specify more.

0

Things to think about:

  • Is there a link being pressed
  • Is there a form being submitted?

In my case, it was a form element which was wrapping the content.

0

In my case, there wasn't any code. That's why I couldn't find anything while searching.

The refresh was caused by an HTTP header: refresh: 60;.

It can't be removed by JS, but I was able to stop refreshing:

window.stop();
0

None of these solutions ended up working for me for identifying the source of the redirect.

I ended up finding that it was caused by a href="#" on the element I was clicking on. There was also an onClick on the element that caused a redirect to another page. Removing the href="#" fixed my issue.

This was not an issue when using AngularJS but after switching to React, it started causing a new redirect on click.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.