Grow your CSS skills. Land your dream job.

Cutting Edge Browsers and Their Development Tools

Published by Chris Coyier

This is a hot time in the world of browsers. Despite a rocky morning, Firefox 3 got over 8 million downloads when it was released. It's up to over 24 million now. I bet many of you are amongst these downloaders, I know I was =)

I bet many of you do your web design and development in Firefox. Things just seem to behave as you expect them to in Firefox. Plus, it has a wealth of invaluable development tools like the Web Developer Toolbar and Firebug. If you have never heard of or aren't currently using Firebug, I did an introductory screencast for it you can check out.

The ability to view and manipulate the entire DOM of a web page after it is rendered is crazy powerful. I'm not sure if Firebug was the first tool ever created to do this (I doubt it), but it has certainly popularized it. The way that it works, being part of the browser itself, has started a new paradigm of browser-specific development tools. Let's take a look at all the browsers and their latest offerings.

Firefox 3 and Firebug 1.2

Not much needs to be said here, this standard combo has got all the right stuff. Error catching, easy to use "inspect" option for drilling down into code at just what you need to be seeing, performance testing, view of the full DOM, live editing, a console...

You can get Firefox 3 from the regular Mozilla download page. In order for Firebug to work with Firefox 3, you will need the latest Beta release, Firebug 1.2, available only from the Firebug Releases page.

 

Opera 9.5 and Dragonfly

No need for a separate download, Opera 9.5 comes bundled with the Dragonfly development tools automatically. Activate by going to Tools > Advanced > Developer Tools.

Very similar to Firebug, the debug menu pops up from the bottom of the browser window but can optionally be detached. You are able to see the full DOM and it supports "Find element by clicking" which is very useful. You are able to see the "full computed style" as well as the CSS rules that are applying to that element. Rules that are over-written are also shown, only grayed out. Other Firebug like features include an error console and "layout view" which shows the width/height, padding, border, margin of the element.

Dragonfly is very new, and I feel they have a ways to come before it can match the quality and ease of use of Firebug, but it does offer some compelling features unique to itself. First, we can't forget to mention that this tool existing at all is a great help in allowing us to troubleshoot for Opera specifically. Firebug sure as heck can't help with that. Second, Dragonfly is a "hybrid-application" meaning it is part web-app and part desktop-app. It resides in local storage, but it is instantly updated when there is a new version, no manually downloading a new version. Third, Opera has a good amount of market share for mobile browsers. You can connect mobile devices to your computer and debug using your computer screen which I could see being immensely useful for mobile troubleshooting. Fourth, Javascript debugging includes a step-by-step mode which I could imagine being quite useful.

Dragonfly is missing some vital features at the moment, like live-editing your CSS. This feature is planned for Alpha 2, coming soon.

 

Internet Explorer 8 and Developer Tools

The IE 8 Beta comes bundled with the developer tools already installed. You can get the IE Developer Toolbar for IE 7 too, if you have that installed. I found the IE Developer Toolbar to be buggy under IE 7 and opted to use the DebugBar instead, which offers about the same functionality. I imagine when IE 8 is officially released, the developer tools will be a separate download.

I think "Select element by click" feature in Developer Tools works fairly well, but still can't live up to Firebug in how just roaming your mouse around the screen highlights different elements. The style viewer is a bit convoluted in that is groups style rules by where they were inherited from starting with the top most parent. This feels backwards to me, as most of those rules are long over-written. You also can't live-edit them, which is a bummer, but you can at least turn individual rules on and off with a single click which is a huge help.

Much like Dragonfly, the fact that this tool even exisits is a huge help to designers and developers needing to troubleshoot and debug in IE. Yes, there is even javascript debugging tools (with neat stuff like Breakpoints) in this tool as well. Remember that Windows system can only have one version of IE installed at once, so if you upgrade to IE 8 your regular IE 7 version will be gone. IE 8 can "Emulate IE 7" though, so you aren't completely rudderless there.

For testing multiple versions of IE (albiet without developer tools), you should check out IE Tester.

Safari 4 (developer preview) and Web Inspector

The current public release of Safari (3) has some pretty cool tools as part of the web inspector. The visualizer for seeing the load times of the different elements of the page is second to none. But Safari 4 (developer preview), which is available for free download to ADC members, has even more juicy developer tools. If you want to check it out, it's a free signup then just go to the "downloads" section of the ADC site.

The web inspector is by far the sexiest of all the developer tools covered here. It has really nice code highlighting and everything looks and functions very smooth and cleanly. A nice breath of fresh air after using the IE development tools. Notably missing from the Web Inspector is any clear way to "click to select" a page element you are trying to troubleshoot. I think someone once told me there was a way but I have since forget and can't find it. Maybe I was daydreaming. You can however click elements in the code and see them highlighted in the browser window.

Live CSS editing is available, which is nice, but you can easily "shut off" styles like you can with Firebug or the IE dev tools. A layout view (called "metrics") is available to show a visual for calculated widths and padding and whatnot. Script debugging is present as well as a real live command-line console which is neat to see. Icons in the lower right are a direct swipe from Firebug, but are very useful for warning you about page errors right away.

 

Opinions

Is anyone using any of these full-time for their debugging? I'm sure you can tell I'm a Firebug guy myself but I am extremely happy that we have such powerful debugging tools for all the major browsers in case we need to do browser-specific troubleshooting (like, uhm, all the time).

Feel free to share your thoughts if you have more extensive experience using any of these tools.

Comments

  1. Paul Walker

    “I think someone once told me there was a way but I have since forget and can’t find it.”

    Right click an element &, from the context menu, select “Inspect Element”. Not quite as obvious, but it works.

  2. Ivan Nikolic

    Firebug is a lifesaver. I don’t know how could I work without it. Even my collegues are impressed with power and ease of use of this great tool.

  3. I just use.. All =D.. but safari web as default combined with firebug.

  4. Alongside of these, I love Karmatics’ Aardvark extension for Firefox: http://karmatics.com/aardvark/

  5. Alpha 2 of Opera Dragonfly should have already been released when you published this article. CSS editing is now supported, but DOM editing wont be added until the next alpha. I’m not sure if other debuggers have it, but Opera Dragonfly also supports auto-complete in CSS editing. Press up or down arrows when the property is highlightd and it will suggest properties that Opera supports. For values it lets you increase or decrease the value. As this is live it is pretty useful (If I don’t say so myself), especially on mobile devices.

    David Storey
    Chief Web Opener
    Product Manager – Opera Dragonfly
    Opera Software

  6. I must say that I have long given up on Firefox, I love Safari for web development, no matter how much I am flamed for that.

  7. wolfflow

    Regarding Opinion query, Yes I use Safary 3 Beta for Windows with the “Develop” feature and I can say that you get
    .css .js .xml .php and even more information much faster and precise as with “FireBug” . Apple development Team as done agreat Job and I’m sure that even for no-insider of Web-development Safari is going to offer more tools and stability and compatibility with any type of web-pages.

    Cheers

  8. I have to agree with Thomas here I used to be a Firefox guy but then safari on the mac changed all that.

  9. Alan C

    In one respect, the IE8 tool surpasses Firefox. With CSS inspection, it allows you to see the “inheritance” view and the “computed style” view rolled into one.

  10. Good to see some developer tools being offered across browsers, that’s cool.

    I use Firebug. It’s great, but I wish didn’t lose your spot when going from inpecting to editing though (or maybe it does and I’m using it wrong?). Also, it seems like it doesn’t show multiple stylesheets, only the main one.
    I also still like Web Developer Toolbar for viewing CSS and outlining differently postioned elements.

  11. It’s also amazing to see how much all the other developer tools resemble Firebug in appearance. Nothing’s better than to have Firebug at the ready when you’re looking at a neatly designed webpage which makes you curious on how it’s set up. It’s like a markup scalpel.

  12. i may sound dumb.
    but how can u bring the safari Web Inspector to life.
    i downloaded the development version “4”.

    any idea?

  13. @David Storey: Thanks for mentioning that. Live CSS editing is great, and the tap up-and-down to change values is awesome. That is probably my favorite feature of Firebug, so glad to hear that feature is making it’s way to other editors as well.

    @Fouad: Develop > Show Web Inspector. I think the Develop menu is active by default, but if it’s not, I think it’s a preference.

  14. Well I use webkit nightly builds, because then I can access CSS3 features way before a official safari release.

    and I use purely webkit, since my apps consist of Coda, CSSEdit (great for documenting large unknown stylesheets).

  15. Obviously debugging in IE is a pain, and for JavaScript I recommend using CompanionJS. It gives you a console and has some handy, if limited, features. I’m surprised no one else has mentioned it yet.

  16. Firebug is amazing in Firefox, i’ve not really tired the other tools but i highly recommend firebug.

  17. I have been using firefox for last 5 yrs….. till now ..I m using it…the features ..performance and specially the add ons …I like everything abt it….
    it has improved version after version..though I ve use Internet Explorer also but thats not good as much as Firefox is…
    Jenny

  18. Firebug truly is the greatest thing since sliced bread! Especially when creating stylesheets for large markup files you did not create (like a blogspot blog).

    I have used firefox for years. I started because at the time it was the only browser (that I knew of) that had tabbed browsing. Eventually all the other browsers caught up but I was hooked. Then when I started doing a little coding I began to loathe IE (and sometimes people who swore by it).

  19. Permalink to comment#

    You said IE 8, which is great but is there anything for older versions of IE? I tried Firebug Lite, but it’s a little, well… Buggy.

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".