Firebug
From BarCamp DC Wiki
Presented at BarCamp DC, August 11th, 2007
Kevin Lawver sponsored this session. Visit http://dayofawesomeness.com/
Russell Heimlich
"Firebug integrates with Firefox to put a wealth of web development tools at your fingertips while you browse."
Tips:
In console, any CSS properties that are 'struckthrough' is an indication that the CSS property has been 'overridden' somewhere else in the CSS properties.
In properties for a CSS declaration, you can increase/decrease the size of the properties simply by holding down the up and down arrows while highlighting the value (ooohs and ahhhs from the crowd). This also lets you shift between other defined elements (example, switching between font-family types). Try this for color with a non-hexadecimal value (ex. 'color: black') it has all the silly color element names (DodgerBlue, Cornflower, etc) and will show a test swatch.
You can use the javascript console to run command line javascript.
You can also use console.debug in your script to display objects in the console.
Use the Net tab to test browser response time for testing javascript loads.
Can also use a firebug plugin called 'yslow' to assess the performance of your web page based on Yahoo's criteria:
YSlow - Extension for Firebug FirePHP - PHP Extension for Firebug
