How to get a more detailed view of web browser http process? [duplicate]

Question

This thread does a great job at detailing the process of connecting to a web page and displaying it in the browser.

But what I want to know is how can I track that process? Does Firefox or another browser have an option to log the process?

To put the question in context, I'm troubleshooting a slow website and when I click a link it says "Waiting for example.com..." This only happens when I do something in my WordPress installation and not when I try to load a static image, so there's SOMETHING in the WordPress ecosystem that's causing it to hang up. But "Waiting for example.com" is a really vague message, so it doesn't really give me anything to troubleshoot. I'd love to have a log where the browser is like "made a request to ...completed in 52ms. made a request to , timed out (20s)".

Does something like that exist? I usually search for these things but I wasn't sure what terms to use.

Answer 1

Google Chrome has built in Developer Tools that can help identify issues. There is a "network" tab that can help identify what resources are being accessed and for how long.

Answer 2

Check out Fiddler:

Fiddler is a Web Debugging Proxy which logs all HTTP(S) traffic between your computer and the Internet. Fiddler allows you to inspect traffic, set breakpoints, and "fiddle" with incoming or outgoing data.

And Wireshark:

Wireshark® is a network protocol analyzer. It lets you capture and interactively browse the traffic running on a computer network.

Related:

• 404 error - Finding what wasn't found with wireshark
• How do I trace HTTP packets with Wireshark?

Answer 3

If you like using Chrome, it has some extremely powerful built-in developer tools, that can be accessed via the shortcut Shift+Ctrl+I. Go to the network tab, and you can see all the HTTP requests and responses made by the page over the course of time, including AJAX requests, and get detailed information on each request. Using wireshark would provide similar results; however, since the Chrome tool are used specifically for debugging website issues, the presentation is done in a much more readable way.

Answer 4

Their is also microsoft's network monitor to add to techie007's list: http://www.microsoft.com/en-us/download/details.aspx?id=4865

It works similar to wireshark and I use them both when I need to. I agree with technie007's selection though but was offering up another answer.

You need to set the filter to what you want to in wireshark or network monitor to filter only specific traffic you want its not rocket science.

For example, the below will give you the packets received coming from/going to your server in wireshark just insert your ip address of the server after the equals part: ip.addr == ipaddressofserverhere

Edit: meant to add the part for only returning port 80 traffic for HTTP but could remember off my head what the filter was for it.

Answer 5

Most of the browsers now have excellent "Developer Tools" that will do all of this and more.

In addition, for Firefox, Firebug is a superb tool for analysing web connectivity and performance issues and has many plugins that add additional capabilities. There are also "lite" versions for other browsers.