DevOps Zone is brought to you in partnership with:

Raymond Camden is a developer evangelist for Adobe. His work focuses on web standards, mobile development and Cold Fusion. He's a published author and presents at conferences and user groups on a variety of topics. He is the happily married proud father of three kids and is somewhat of a Star Wars nut. Raymond can be reached via his blog at www.raymondcamden.com or via email at raymondcamden@gmail.com Raymond is a DZone MVB and is not an employee of DZone and has posted 234 posts at DZone. You can read more from them at their website. View Full User Profile

Dev Tools Tip: Preserving Network Logs on Leaving a Page

01.07.2014
| 7131 views |
  • submit to reddit

Imagine you have some code that is being fired right before, or during, a click that leads you to another page. If you use the console than you are in luck. Both Chrome and Firefox have options to preserve the console on navigation. In case you've never seen it, here is the option in Chrome. You find this by opening the Dev Tools and clicking the gear icon in the lower right hand corner.

But what about network requests? Chrome does provide you an option to log XHR requests and they will persist if you leave the current page. But you can't get the header information once you leave the page. All you can do is rerun the request. Also, if you are doing anything with JSON/P, it will not be logged here as it isn't an XHR request.

So I mentioned on Twitter that I wish the Network panel had the same feature as the console. Luckily Rich Gilbank (@richgilbank) saw my tweet and pointed out that you certainly could preserve those requests. How? Just click the black circle icon at the bottom.

I had seen that icon before but never clicked on it. Why? Because I assumed it was the "Start CPU Profiling" action you get under profiles. In my own defense, look at the other icons in that area. From what I know, they mostly stay the same no matter where you are in the tools. But in this case, the same icon had a different meaning for the Network tab. (And now I'm going to have to re-check those icons in other tabs as well.)

One small caveat. While the preserved log contains the request and response headers, it does not contain the actual response. There is another option you can consider as well. Add a breakpoint to the action that sends you to another URL. This only works if you are using JavaScript to push the user in the first place. But it would let you pause before you left and see the network requests right before that event.

And of course - there are excellent third party tools like Charles - but in general I try to stick to my browser tools.

Published at DZone with permission of Raymond Camden, author and DZone MVB. (source)

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)