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.
- Next post: First HTML 5 working draft arrives from W3C
2 Responses
Leave a Reply
Featured Books
Web Standards and Regulatory Compliance
Accessibility is about making websites accessible to those with aural, visual, or physical disabilities, or rather, constructing websites that dont exclude these people from accessing the content or services provided.
Head First HTML with CSS & XHTML
Tired of reading HTML books that only make sense after you're an expert? Then it's about time you picked up Head First HTML with CSS & XHTML and really learned HTML.
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
.
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 [...]