Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to use Chrome's network debugger with redirects

The Chrome network debugger gives me a great view of all the HTTP resources loaded for a page. But it clears the list whenever a new top-level HTML page is loaded. This makes it very difficult to debug pages that automatically reload for one reason or another (running script or 300 responses).

Can I tell Chrome not to clear the network debugger when a new top-level page is loaded? Or can I go back and look at the previous page's network resources?

Or can I somehow force Chrome to pause before loading a new page when I don't control the page I'm trying to debug that's doing the redirecting? It's part of an OpenID dance that's going awry, so the combination of SSL and credentials makes it extremely difficult to debug with command-line tools.

like image 424
Leopd Avatar asked Jun 11 '12 20:06

Leopd


People also ask

How do I redirect a URL in Chrome?

Type "cache:sitename.com" in the address bar of Chrome and press "Enter" where "sitename" is the URL that is generating the redirect. This will show you a cached version of the site on which you can use the Inspect Element pane to find and capture the redirect URL.

How do I pause before redirecting?

Open Chrome developer tools and open "Network" tab. Once access to an URL that redirect request. Right-click the redirection URI and select "Block request URL". The "Request blocking" tab will be automatically opened.


2 Answers

This has been changed since v32, thanks to @Daniel Alexiuc & @Thanatos for their comments.


Current (≥ v32)

At the top of the "Network" tab of DevTools, there's a checkbox to switch on the "Preserve log" functionality. If it is checked, the network log is preserved on page load.

Chrome v33 DevTools Network Tab: Preserve Log

The little red dot on the left now has the purpose to switch network logging on and off completely.


Older versions

In older versions of Chrome (v21 here), there's a little, clickable red dot in the footer of the "Network" tab.

Chrome v22 DevTools Network Tab: Preserve Log Upon Navigation

If you hover over it, it will tell you, that it will "Preserve Log Upon Navigation" when it is activated. It holds the promise.

like image 92
bfncs Avatar answered Sep 21 '22 06:09

bfncs


I don't know of a way to force Chrome to not clear the Network debugger, but this might accomplish what you're looking for:

  1. Open the js console
  2. window.addEventListener("beforeunload", function() { debugger; }, false)

This will pause chrome before loading the new page by hitting a breakpoint.

like image 32
Matt York Avatar answered Sep 18 '22 06:09

Matt York