Explore DOM with Firebug

• Writing by Rajveer
• On February 9th, 2008 at 3:43 am

I believe I don’t have to tell everybody how great is FireBug for Web Development, but still I am writing it for a newbie. FireBug is a very easy to use and feature-rich, I think it’s the best plugin available for FireFox.

Firebug puts together with Firefox to place a rich web development tool at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page. Firebug helps you find DOM objects quickly and then edit them on the runtime.

While some things are already available in Web Developer Toolbar, Firebug takes a slightly different approach, treating all elements in a hierarchical, DOM-like style. My favorite: It displays a hierarchical list of all HTML tags, and highlights the corresponding screen area on mouse over. Big time-saver!

Steps to debug JavaScript with Firebug

Firebug provides a strong debugger for working with JavaScript. You may set breakpoints to halt execution as particular points in a script or set conditional breakpoints to stop execution only if certain conditions are met. In addition, the debugger allows you to step through script one line at a time to closely monitor execution.

While using the debugger, the stack provides a snapshot of the environment at any given moment. This allows you to view variables, as well as monitor the call stack. The watch functionality allows you to watch variables and expressions as code executes. JavaScript code may be inserted into pages to generate debugging data as well. The code profiler allows you to generate a report of function calls and the time consumed by these calls. The debugging features are located in the Console tab.

The Console is one of my favorite Firebug features. The auto complete feature helps if you don’t remember the numerous features of the JavaScript language. In addition to running code, it shows the JavaScript error message log.

Here is the link to install Firebug for Firefox.

• You can leave a response, or trackback from your own site.
• Category (X)HTML, CSS, JavaScript
• Add this post to Del.icio.us - Digg - Technorati

• Next post: First HTML 5 working draft arrives from W3C

Possibly Related Writings

• A template for CSS Zen Garden Submission
• CSS frameworks for designers
• Why tableless layout
• Give your feedback and contribute to CSS typography
• Great online CSS reference with live demos

2 Responses

1. Sirened April 10th, 2008 at 10:57 pm

   Yes, I do think your opinion is righteous. (So do lots of people). Luckily majority of people are intelligent :).

2. Inspired Buddy » The best open source tool for web development August 21st, 2008 at 7:30 am

   [...] Mozilla Firefox browser preview to check the errors and warnings using firebug plugin. You can even configure the preview tabs against any preferred server or URL, it saves lot of [...]

Leave a Reply

Name *

Mail *

Website

Notify me of followup comments via e-mail

If this is your first comment on Inspired Buddy then your comment will be held for moderation. So please do not repost if your comment does not appear immediately. I will remove any inappropriate or irrelevant comments.