Debugging Disappearing Console Logs on Redirects: A Simple Trick

A while back, I was debugging the implementation of tracking events for a registration form. The tracking script was logging debug information to the browser’s Developer Tools console, which was helpful for verifying event data. However, there was a problem—after a successful registration, the user was redirected to another page, and all console logs vanished.

Why Do Console Logs Disappear on Redirect?

When a browser like Chrome performs a redirect, it unloads the current page and loads a new one. This means:

• The JavaScript execution context is lost.

• The Developer Tools console is refreshed, clearing previous logs.

• Any debug information logged before the redirect is no longer accessible.

The Simple Trick to Debug Before Redirect

After some research, I found a simple yet effective trick to pause execution right before the redirect:

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

Run the above code snippet in the Developer Tools console. This listens for the beforeunload event, which fires just before the page is unloaded (e.g., during navigation or refresh). Inside the event listener, debugger; triggers a breakpoint in the browser’s Developer Tools, pausing execution and allowing you to inspect console logs before they disappear.

For more details about beforeunload, check out MDN documentation on beforeunload.