Tracing web applications with Fiddler or FireBug
Posted by Olaf Monien in Development, IntraWeb, tags: debugging, Delphi, fiddler, firebug, Internet, IntraWeb, log, network logger, web applicationApparently many developers of Web sites and especially Web applications (IntraWeb, ASP.NET, PHP etc) are still not aware of existing tools to trace/debug the communication flow between Web browsers and Web server.
Often, certain errors such as missing images, non working JS files etc, pop up (i.e. customer calls and says “your Web app is totally broken”), and its very hard to determine whats happening. You could now add logging capabilities to your Web application and try to find out whats happening. That’s not a bad idea, but often it would help more to see what’s really sent over the wire, which resources fail to load etc.
Firefox: Firebug
For Firefox there is Firebug. Firebug is kind of a Swiss Army knife for all sorts of analyzing from within the Firefox Web browser. From JavaScript debugging, over JavaScript profiling, CSS and DOM explorer down to a network logger. For a nice introduction how to install and use Firebug see here.
The first thing you should always check with a faulty Web application is, if it loads all resources correctly. This can be done in the Network tab:
In this case the first two requests are answered by an HTTP 200 code, which means successfully loaded. The following request are all answered by HTTP 304, which means the resource has not been modified since the browser requested it last time. In other words these resources are cached.
Anytime there is an invalid request (wrong path, file does not extist), Firebug will mark that with an HTTP 404 response code, highlighted in red. This is very handy.
Internet Explorer: Fiddler
For IE there is Fiddler. Fiddler is a “debugging HTTP proxy”, which directly integrates with IE (but is not limited to). Once Fiddler is started from IE’s Tools menu, it willopen a port and automatically registers IE to use that as proxy location. (You can also register Firefox or any other browser to use that proxy) All subsequent requests will go through fiddler then, which generates well organized logs, like the following one:
This lets you drill down into the communication between your web browser and web server. For DOM or CSS inspection you would need an other tool though: Internet Developer Toolbar. And for JavaScript debugging you would need yet another tool: Visual Studio.
Entries (RSS)