New developer tools in Firefox 10 and 11

Firefox 10, due out January 31st (the same day Firefox 11 becomes an official Beta release), finally rounds out the browser’s growing collection of developer tools with Page and Style Inspectors.

In some ways, these tools are similar to Firebug, but they’re also uniquely Mozilla-ey.

Rather than try to reproduce Firebug or the WebKit developer tools, Mozilla has included only the most essential features, focusing instead on making the experience elegant.

Does the new approach work, or will designers run screaming back to Firebug? Let’s take a look.

You can pull up the Page Inspector by right-clicking a web page and choosing “Inspect.” (Firebug recently changed its context menu item to read “Inspect in Firebug,” so it will coexist peacefully with the built-in dev tools.) At the bottom of the screen, a purple bar appears with a list of the selected element’s parents and children.

You can click parents or children to select them, and you can right-click an element to see its siblings. There are also buttons labeled “Inspect,” “HTML,” and “Style.” If Firebug’s sea of tabs and buttons drove you up the wall, this layout will be a godsend. If just you want to see the DOM, having to click “HTML” first may drive you up the wall.

 

Digging in

Clicking the HTML button bring up a panel that shows the hierarchy of HTML tags that make up your page. In this view, you can expand and collapse tags and edit their attributes. Clicking the “Inspect” button lets you hover over elements to inspect them, and as you do so, Firefox highlights the element you’re inspecting and darkens the rest of the page.

Clicking the “Style” button brings up the Style Inspector, showing the CSS rules that apply to the selected element. In the Style Inspector, you can switch from “Rules” to a “Properties” section that gives you the computed CSS properties for the selected element, along with links to Mozilla’s documentation for each property.

The Style Inspector sits to the right of the page, while the Page inspector and HTML pane sit at the bottom of the screen. You can choose to display both panes, just one of them, or neither.

The Firefox HTML inspector, expanded.

That basically covers the entirety of what the Page and Style Inspectors do. The web console and JavaScript scratchpad, introduced in earlier versions of Firefox, are separate tools. There is no network activity monitor. There’s no user agent switcher, no “edit as HTML feature,” no performance-testing tools, no way to inject new tags into a page, no way to activate an element’s hover state. There’s not even a “layout” panel for viewing the dimensions, padding, and margins of your element.

Despite all those limitations, I keep coming back to the Page and Style Inspectors. I come back for the uncluttered interface, the thoughtfully placed panes, and that funky purple chrome. I come back because they’re a pleasure to use, and because they meet my needs most of the time.

The inspectors’ simple UI also means that they’re useful even when I’ve made the window small to test responsive designs. When they don’t meet my needs, I just open Firebug or the Web Developer Toolbar. (I’d do this a lot less if the built-in dev tools had equivalents to Firebug’s Layout and Net panels.)

The Firefox HTML inspector used to analyze a responsive design

Mozilla’s development tools don’t have to match the feature set of their competitors’ tools, because the specialized features of those tools already exist as Firefox extensions. That’s what makes the Firefox dev tools unique.

 

These browsers go up to 11

In addition to the HTML and Style Inspector, some innovative features are slated for later releases of Firefox. Firefox 11’s developer tools let you view your web page as three-dimensional stacks of tags. Each time you nest a tag, that stack of tags gets taller. This feature is actually surprisingly helpful—you can see at a glance whether an element is inside the wrong parent, and seeing those tags pile up will cure new developers of div-itis right quick.

The Firefox 3D inspector analylzing Web Designer Depot

Also due out in Firefox 11 is a style editor. This is tool lets you create new stylesheets, much like any good text editor would. The main difference is that your changes are applied to live web pages as soon as you finish typing.

Previously, this sort of live CSS editing has been the domain of development environments like Espresso, so it’s awesome to see this feature built right into the browser. More features, including “tooling to assist with application performance issues,” are planned for later this year.

Firefox 11's CSS editor

Even in Firefox 11, though, comparing the built-in dev tools with Firebug (or with the WebKit dev tools) is a little like comparing iOS with Android. The former has a clean, intuitive UI and some innovative ideas, but it’s short on power user features.

The latter has every feature that you can think of, and you can configure the blazes out if it, but it’s not quite as elegant as Cupertino’s wunderkind. Unlike iOS and Android, it’s easy to use both tools at the same time if you want. Mozilla continues to contribute to Firebug and has made it clear that Firebug is here for the long haul.

Firefox's HTML inspector and Firebug, existing together in harmony.

Which tool is right for you? That depends on what features you need, what features you can live without, and how you feel about hunting down extensions to fill in the gaps in your tool of choice. Whatever you think about the new developer tools, this is one area where you can’t accuse Firefox of aping WebKit.

 

Are you excited about the new dev tools in Firefox 10? What are your go-to dev tools? Let us know in the comments!

0 shares
  • http://www.jonxmack.co.uk Jon X Mack

    Mozilla really need to introduce Chrome style version numbering, channels, and silent updating.

    They place far too much emphasis on the version number (Download Firefox 9.0.1 now!), as a member of the web development community I’d much rather see stable/beta (one version up)/dev (two versions up). Aurora would become dev, then you’d have the current beta and stable builds also readily available. 

    This whole Firefox 9/10/11 thing is just pointless, because it means absolutely nothing. While for example, FF4 bought major improvements from 3.6, the upgrade from 9 to 10 is probably the first update in the last 4 that has actually brought in something noticeably new, and even then it’ll only be used by developers. Upgrading FF used to mean that you were gaining something obvious, these days it means pretty much nothing to the average user.

    • http://twitter.com/ivanbernat Ivan Bernat

      Mozilla is bringing silent updating to Windows versions of their apps soon, it was discussed at some point last year.

    • http://twitter.com/WeArePrimate We Are Primate

      Seconded to silent updates. It’s one of the best features Chrome offers and a huge boon to the web industry – just knowing that visitors are automatically using the latest version of a browser is fantastic. Now if only we could get IE to do the same :P

  • http://twitter.com/MWSeymour Matthew Seymour

    Still looking forward to the 3D layer view!! Will be awesome. Roll on FF11

  • Anonymous

    All of this is truly nice for developers and I look forward to using the tools, but what does it mean to joe down the street? Will this serve to turn an already bloated browser into something that you have to get up at 5 am just to start the app running? Is it anything that will attract the regular daily user? Chrome is now ahead of FF in speed

    • http://blueskyonmars.com/ Kevin Dangoor

       As Ryan points out, Firefox in independent tests is quite fast (and in some tests, the fastest of all browsers).

      I just thought I’d mention that everything we put into Firefox is tested for impact on speed. The developer tools don’t slow down your browser startup or page load speed, and there are automated tests design the sorts of problems.

      So, you’re absolutely correct that the “regular daily user” of Firefox does not care about these tools. But, we make sure that we’re not impacting those users with these features.

      Plus, we’re hoping that great tools shipping in every browser will help more people to explore what makes the web tick. We want more web makers.

  • http://www.ryandebeasi.com/ Ryan DeBeasi

    Tom’s Hardware did some extensive browser performance testing earlier this month. On Mac OS, Safari 5 was fastest. On Windows, Firefox 9 was fastest. Of course, these rankings shuffle around every few months, and any of the other browsers could take back the crown pretty quickly.

    http://www.tomshardware.com/reviews/macbook-air-chrome-16-firefox-9-benchmark,3108.html

    Everyone’s needs are different. For me, user experience and developer friendliness are just as important as raw speed. There are great things about each major browser, but no browser is perfect, and no browser will meet everyone’s needs.

  • Anonymous

    Fo rme, the number 1, must have, killer feature is th eability to edit CSS rules i Firebug and see those changes live in the browser. That FF10 inspector doesn’t have this means I have no desire to start using it.
    Firebug is pretty intensive and can slow the browser down, but its absolutely critical to my role in front end development, and the reason i still use FF over any other browser.

  • Anonymous
  • http://www.developer.web.tr/ Oğuz Çelikdemir

    Of course Firebug. The new tools of Firefox seems to me for beginners and not usefull. For instance, the checkbox beginning of the property doesn’t necessary. The firebug behaviour well done to hide property ( invisible until mouseover ). We need realy great CSS and JavaScript editor work on modern browsers. Because, end of day, we are tired a lot is because of the travelling between editor and browser. We just want to change a css property value or just want to look simple toggle effect result.

  • http://twitter.com/WeArePrimate We Are Primate

    Pretty cool although it looks like most of the really nice stuff is reserved for FF11. Until then I’ll probably be sticking with FireBug. Old habits die hard!

  • https://me.yahoo.com/iamadin#2af12 Adin

    I find it annoying that every time I “inspect” an element I then have to click on the HTML and STYLE buttons to open up the bottom and side panes.

  • http://nnpcto.kz/ Sergio

    In itself Firefox it is certainly faultless also appendices good, but everything, there are lacks. For example, I have got used to work in the old version and after updating have noticed, what not all appendices used by me are compatible with new Firefox and I consider it as a lack.