Tip: Viewing Network Requests with the Safari Debugger

I’m not a heavy Safari user, but I use the heck out of the web tools when testing PhoneGap/Cordova apps. Sometime recently (I believe), the UI changed a bit in terms of the Network request panel and I couldn’t see my requests anymore. I finally figured out the issue and I thought I’d share. To be clear, when I say I figured it out, I mean I found the right post on StackOverflow and all credit goes to user enyo. I’m just writing this up and sharing pretty pictures.

Ok, so what exactly is the issue? I noticed recently that when I go to my debug tools, select Timelines, click Network Requests and record, nothing seemed to show up in the detail panel, specifically:

I would click things in my app that I knew were firing XHR calls and nothing would show up in the detail. Turns out, the issue is due to timeline UI:

See that section I highlighted above? Look on the far right and see a darker gray “thingy” you can grab on top. Being that this is Apple they probably don’t call it a thingy. What isn’t obvious (well to me anyway) is that you can click and drag to select a portion of the time line. If you find the timeline moving too quick, just hit stop recording.

What you will discover is that the Network panel will only show items within a selected timeframe! So that makes sense I suppose, but I wish that by default you could select nothing and have everything show up.

Ok – but once you know that you may run into another problem. For me, my timeline was zoomed in such that every inch or so of screen space was about one tenth of a second. Note the timestamps in the screen shot above. I wasn’t sure how to zoom, but on the StackOverflow link I shared above, they mentioned that if you scroll up and down it will zoom. I confirmed that scrolling down let me “zoom out” rather high:

I then selected from time zero to day 92000 or so, and frankly, if that isn’t enough, then I don’t know what is. 😉

I asked Apple’s Safari evangelist (Jonathan Davis) if there was some way to always show all items and he said not yet. The zoom level, however, will stick, so in theory you don’t have to keep zooming out. It also appears as if the selected range also persists. That means the only thing you need to do is hit the Recording button.

p.s. As a quick note, the UI for recording versus non-recording may be a bit weird. When you are not recording, the UI shows a red flight, which typically means that something is recording: