Wednesday, June 8, 2011

Using Firebug to troubleshoot dynamic web pages.


When building a site troubleshooting why images, scripts, xml files aren't being accessed can be a bit difficult. The solution I am using at the moment is a combination of FireBug for Firefox http://getfirebug.com/ and Fiddler for everything else including Flash CS5 IDE.

Firebug when activated allows among other things a NET tab that shows all incoming and outgoing data transactions from Firefox - very handy is the red highlighting of broken links - e.g xml files, images that are missing or in the wrong location.

All of these incoming/outgoing data requests are turned into hyperlinks allowing you to get access to individual elements on a page.

Firebug also allows you to change the code on a page on the fly to test if changes will work, an example of this is going to a site hosted by someone else and changing the background or the style that controls the colour of text on a page. Although these changes are not saved they are displayed in the browser. Another useful tool is the ability to select an area of a page and see the code associated with that area be it a div, table, TR, TD, iFrame etc.

Fiddler has the same capabilities it allows you to change code on the fly see incoming/outgoing traffic and also includes a powerful event-based scripting subsystem, and can be extended using any .NET language. Fiddler is freeware and is available here: http://www.fiddler2.com/fiddler2/

No comments:

Post a Comment