FireBug is the Swiss army knife of web development gadgets: an extension for Mozilla Firefox that allows you to debug, edit, and monitor any website’s CSS, HTML, DOM and JavaScript; it also provides other web development tools [1]. It permits the logging of web pages, page error reporting, page inspection, AJAX request logging, and to top it all off - Live Page Editing.

It has wound up being one of the most useful utilities that I have at my web page development/surfing disposal. One of its most useful tricks is the HTML inspector (view screenshot). If you are ever on a page, and are curious about the layout or inner workings of the HTML, just open up FireBug, click on Inspect->HTML and navigate your mouse to the section that interests you. FireBug will highlight the HTML code you are curious about, and you can look at it in all its raw markup glory. You can use this to easily find out how a nifty feature, or a design or layout works-or even to figure out a way around a pesky pop-up JavaScript link when you want to just send a link to someone.

In fact, one of my favorite uses is, when developing DOM interactive JavaScript, I can easily find an object within the entire document. And once it’s found, I can do all the nifty JavaScript manipulation I need.
Continue reading…