You’re reading an article by Jay Robinson, a designer living in California.

Web Inspector Vs. Firebug

Firefox's third-party plugin Firebug vs WebKit's built-in Web Inspector
The fol­low­ing rant ref­er­ences an add-on for Mozilla Fire­fox called Fire­bug, and a fea­ture of WebKit browsers called Web Inspec­tor. Both allow you to inspect the source code that makes a web­site.

If you ever tweet about being unhappy with the WebKit Web Inspec­tor, some­one from the WebKit team will inevitably take notice and ask you why. I might reply, “Because it’s not Fire­bug!” Fire­fox could almost have it all with Fire­bug, but Firefox’s main prob­lem is that it’s not WebKit.

My fun­da­men­tal prob­lem with Web Inspec­tor is the Ele­ments tab. My argu­ment boils down to this: The CSS view does not resem­ble a stylesheet, and the HTML view does not resem­ble source code.

Nor does it behave like the code you write all day. Edit­ing a vis­i­ble HTML ele­ment or a CSS prop­erty requires at least two clicks to begin–which sep­a­rates it from the stan­dard user expe­ri­ence of a text-editor.

For exam­ple, when I hover an ele­ment in the HTML view of Web Inspec­tor, my cur­sor is an arrow and can select ele­ments to inspect. How­ever, in Fire­fox, my cur­sor is the text cur­sor just as it would be if I were back writ­ing the orig­i­nal code in my favorite text-editor. A sim­ple click puts me into place to begin edit­ing the code. This same action in Web Inspec­tor requires a double-click. I don’t double-click to begin edit­ing in a text-editor, so to me, this makes Fire­bug feel sim­pler for quick debug­ging dur­ing development.

But there’s a bit more to it. I’ve noted my issues below:

  1. HTML view is not a mono­spaced font.
  2. CSS view is not a mono­spaced font. (This is mostly a per­sonal thing. I pre­fer code in a mono­spaced font. I can imag­ine oth­ers do as well.)
  3. CSS view does not show the full cas­cade of rules for a selected ele­ment. For exam­ple, if I inspect a div, I should be able to see what font-family it will inherit.
  4. Tog­gling prop­er­ties in the CSS view is more trou­ble­some than it is in Fire­bug. The check­box on the right is harder to hone in on with a cur­sor because your eye is already look­ing to the left at the left-aligned properties.
  5. Web Inspec­tor does not work when JavaScript is dis­abled.
  6. You can­not make an accu­rate text selec­tion on a web­page while the Web Inspec­tor is open inside the win­dow. Sim­i­larly, you can­not enter text on a web­page with­out the page scrolling directly to the bot­tom of the doc­u­ment, where the Web Inspec­tor resides. (A tem­po­rary solu­tion to this is to detach the Web Inspec­tor from the win­dow, but I do not pre­fer work­ing this way.)
  7. You can­not add new ele­ments to the DOM.
  8. You can­not select an ele­ment in the DOM from its clos­ing tag. You must select from the open­ing tag.
  9. More than one Web Inspec­tor may open within the same win­dow. This may be a fea­ture (as you could access more than one tab at a glance) but I have often expe­ri­enced it as a bug.
  10. Inspected ele­ments do not dis­tin­guish between mar­gin and padding with dif­fer­ent color visual out­lines; instead they are the same color. This is minor but slightly annoying.

The Web Inspec­tor has made great strides since its ini­tial release. For exam­ple, many enhance­ments have been added since I orig­i­nally drafted this arti­cle, such as adding attrib­utes in the HTML view or anchors that point to stylesheets from the CSS view.

But Fire­bug feels much more like a text-editor, and Web Inspec­tor like a pas­sive, well, text–inspec­tor. And while Fire­bug solves a lot of my par­tic­u­lar issues, Safari remains my favorite browser dues to its speed. I’d like to browse, work, and debug in it all day. For HTML and CSS, I think the Web Inspec­tor could be much better.

If you dis­cuss this arti­cle with friends, I rec­om­mend the Short URL: http://jwr.cc/x/2h.