Fbloggs Geekdom

Firebug – debug your applications. An absolute must. Best features:

• Debugger – step through, over, etc.
• Console log for monitoring AJAX interactions -shows parms sent, data returned, round-trip time.

Web Developer – fantastic CSS diagnostic support. Best features:

• View generated source – important if your script modifies the original DOM of your page
• Display Element Information – shows all the properties of an element in a convenient popup. To use, press Ctrl+Shift+F or select menu Information/Display Element Information
• Edit CSS – lets you edit the CSS selectors in real-time, and shows you the results – almost as you type

MeasureIt. Lets you find the height and width of any element or area of the page, in pixels. Helps diagnose CSS issues, for example, when you use combinations of margin, width, padding and border attributes.

Codeburner from Sitepoint, one of my favorite online journals (www.sitepoint.com). Integrates with Firebug to provide comprehensive cross-reference information on HTML and CSS. Best feature:

• Browser compatibility tables

Tags: CSS, FireFox, JavaScript, jQuery, Web Development

FireFox doesn’t have a native global event handler. Here’s how to create one using FireFox’s event-capturing model.

Tags: Browser differences, FireFox, IE, JavaScript, Web Development

Firebug beta 1.0 is now available. This is by far the best toolbar available for FireFox or IE for debugging web applications. See This blog entry at Sitepoint for more details.  A few  of the features I really like are:

• The debugger  – identifies exact line of script in error.
• The HTML view – lets you view contents of externally linked Javascript files, also.
• The CSS inspector – shows you all ancestor css rules for elements, not just the current CSS rule, so you can see the total effect of the cascade.
• The ability to change CSS settings on the fly. For example, hover over a color, click on it, then change the RGB value to see another color – it does this for the specific area on the page, as well as in the sheet.

Tags: FireFox, JavaScript, Web Development