How to "go deeper" than firebug/chrome dev tools net panel?

Question

How do I take a deeper look at what's going on in the network level of my web browser than the developer tools network panel will provide? For example, I'm trying to debug an issue on a page right now in Firefox (18.0.1) where the loading "spinner" keeps going continuously long after the page has finished loading.

The firebug net panel shows all resources loaded ("200 OK") but the loading icon on the tab is still spinning and the text on the bottom of the window still shows "Transferring data..". How would I take a closer look and see what is supposedly still transferring? Note that this only seems to happen with Firefox and only on a fresh load (not when resources are cached).

Answer 1

After checking your link with Wireshark and with HTTPScoup (a different tool), my conclusion from both was that all the data arrives successfully and no connection remains open with your server's IP. The problem in FF I think is related to something else

Google reveals that in some cases, it is possible to confuse FF into this state. It doesn't have to be related to open network connections.

Take a look at this questions for example: FireFox sits on "Transferring data from..." or "Read...."

The issue there was unclosed tags in the HTML body.. so try to find problems like this one too. You can try fixing some validation errors by running a validator such as this one. Since you have about 200 validation errors, I suggest you start by deleting half your HTML code until the problem goes away and this way zero-in on the problem location. Then go in and fix the tag mess.. looking a little in the HTML source gave me a headache :)

Answer 2

I would use a tool like Fiddler or Wireshark to do this. Both of these tools provide more low level packet information.

I would start with Fiddler. Fiddler is meant for http traffic analysis whereas Wireshark is a full-fledged packet sniffing tool for all layers of network traffic.

Another advantage to both of these tools is that you can use them with any browser. One disadvantage to fiddler is I believe it is only available for Windows.

Answer 3

I would recommend a very nice Firefox extension called HttpFox which is a bit easier to use than wireshark and friends

It lets you see the HTTP calls made by the page in much greater detail, and also the flow between pages (fast redirects and such). Here is what it looks like: