Explore the DOM with Firebug
A very useful Firefox extension that makes it both easy and fun to explore the DOM is Joe Hewitt’s FireBug. Firebug logs JavaScript, CSS, and XML errors to a console. You can configure which errors to log, so if you don’t want CSS errors in the Firebug console, just turn them off.
Want to explore the DOM of the document you are viewing? Just open the Firebug Inspector and the DOM is right there. Click the “Inspect” button and you can use your keyboard to navigate through the DOM. Anything you select in the inspector is highlighted on the rendered page.
When your scripting doesn’t work properly and you can’t figure out why, use Firebug’s lightweight JavaScript debugger to set breakpoints and examine your scripts as they execute.
Firebug does more than just inspect. It will also let you edit the values of existing attributes, which can be very useful when debugging. If you want to use another approach than “alert debugging” when working with JavaScript, you can use JavaScript to write text and objects to the FireBug console.
There’s more to FireBug than what I have described here, so try it out for yourself.
- Previous post: WCAG 2 disregards Web standards
- Next post: Levels of HTML knowledge
Information, sponsorship, and externals
About the author
Roger Johansson is a Swedish web professional specialising in web standards, accessibility, and usability. More about me and this site.
Latest articles
- Validation statistics from Nikita the Spider Comments off
- An analysis of the sites crawled by the bulk validation tool Nikita the Spider during March 2008.
- Authentic Jobs API and Affiliates program Comments off
- The Authentic Jobs job listing service now has a public API and an affiliate program.
- What does Acid3 mean to you and me? Comments off
- Opera and Apple have announced that their web browsers pass the Acid3 Browser Test, but how will that help web designers and developers?
- Designing Web Navigation (Book review) Comments off
- Learn the fundamentals of navigation design and design better navigation systems for large and small sites as well as for web based applications.
- DOMAssistant bundle for TextMate Comments off
- To save keystrokes and speed up development I have created a DOMAssistant bundle for TextMate.
- First impressions of Internet Explorer 8 Beta 1 Comments off
- My impressions after trying out Internet Explorer 8 Beta 1 for a couple of days.
Comments
FireBug is so useful I sometimes wonder how I managed before it came along. Working on websites without FireBug is like trying to repair a car with a butter knife.
I recently written in-depth about Firebug here: Javascript Debugging with Firebug.
The new version is packed with some very wonderful features.
Great Flash tutorial here:
http://www.digitalmediaminute.com/screencast/firebug-js/
Firebug is a great tool. It seems much more practical than Venkman, but still a bit awkward when compared to traditional language debuggers.
Amazing!
I :heart: Firebug a little more every day
It's a great tool to use. I would recommend it to everybody.
Sounds like an improved version of the built in Error Console (previously called JavaScript Console) and the DOM Inspector.
ah.. Great plugin for me, just a little tricky with its Harsh checking lines.
Great start, but some styles don't show up in the inspector (text-indent:-5555px;).
Sorry, comments are closed for this post.