Web Inspector Vs. Firebug

Firefox's third-party plugin Firebug vs WebKit's built-in Web Inspector
The following rant references an add-on for Mozilla Firefox called Firebug, and a feature of WebKit browsers called Web Inspector. Both allow you to inspect the source code that makes a website.

If you ever tweet about being unhappy with the WebKit Web Inspector, someone from the WebKit team will inevitably take notice and ask you why. I might reply, “Because it’s not Firebug!” Firefox could almost have it all with Firebug, but Firefox’s main problem is that it’s not WebKit.

My fundamental problem with Web Inspector is the Elements tab. My argument boils down to this: The CSS view does not resemble a stylesheet, and the HTML view does not resemble source code.

Nor does it behave like the code you write all day. Editing a visible HTML element or a CSS property requires at least two clicks to begin–which separates it from the standard user experience of a text-editor.

For example, when I hover an element in the HTML view of Web Inspector, my cursor is an arrow and can select elements to inspect. However, in Firefox, my cursor is the text cursor just as it would be if I were back writing the original code in my favorite text-editor. A simple click puts me into place to begin editing the code. This same action in Web Inspector requires a double-click. I don’t double-click to begin editing in a text-editor, so to me, this makes Firebug feel simpler for quick debugging during development.

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

  1. HTML view is not a monospaced font.
  2. CSS view is not a monospaced font. (This is mostly a personal thing. I prefer code in a monospaced font. I can imagine others do as well.)
  3. CSS view does not show the full cascade of rules for a selected element. For example, if I inspect a div, I should be able to see what font-family it will inherit.
  4. Toggling properties in the CSS view is more troublesome than it is in Firebug. The checkbox on the right is harder to hone in on with a cursor because your eye is already looking to the left at the left-aligned properties.
  5. Web Inspector does not work when JavaScript is disabled.
  6. You cannot make an accurate text selection on a webpage while the Web Inspector is open inside the window. Similarly, you cannot enter text on a webpage without the page scrolling directly to the bottom of the document, where the Web Inspector resides. (A temporary solution to this is to detach the Web Inspector from the window, but I do not prefer working this way.)
  7. You cannot add new elements to the DOM.
  8. You cannot select an element in the DOM from its closing tag. You must select from the opening tag.
  9. More than one Web Inspector may open within the same window. This may be a feature (as you could access more than one tab at a glance) but I have often experienced it as a bug.
  10. Inspected elements do not distinguish between margin and padding with different color visual outlines; instead they are the same color. This is minor but slightly annoying.

The Web Inspector has made great strides since its initial release. For example, many enhancements have been added since I originally drafted this article, such as adding attributes in the HTML view or anchors that point to stylesheets from the CSS view.

But Firebug feels much more like a text-editor, and Web Inspector like a passive, well, text-inspector. And while Firebug solves a lot of my particular 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 Inspector could be much better.

If you discuss this article with friends, I recommend the Short URL: http://jwr.cc/x/2h.



, , ,




4 responses to “Web Inspector Vs. Firebug”

  1. […] full post on Hacker News If you enjoyed this article, please consider sharing it! Tagged with: Firebug […]

  2. […] Web Inspector Vs. Firebug · Jay Robinson (tags: design webdev css html browser firefox debugging firebug safari) […]

  3. Yair

    Nice and interesting post.
    I’ll add to this 2 things that prevent me from using Web Inspector:
    1. You can’t add properties to a css rule on the fly. In Firebug, you can easily right-click inside the area of any css rule and choose “new property”. I found no such option in Web Inspector.
    2. When adding/editing css properties, you can start typing the property name, and firebug will auto-complete it. Using the up and down arrow key will browse through all the possible values that start with the letters that you typed. The same is true for the properties values; using the up and down arrow keys will browse through all the possible values for that css property. That saves you the need to remember the exact syntax and to go to the W3 documentation all the time.

    These two things alone renders Web Inspector quite useless to me , as these are features I use heavily on a daily basis.

    – Yair

  4. C.Shamis

    Nor does Web Inspector offer any way to view XHR POST data. How in the heck are you supposed to debug AJAX calls when you can’t see what’s getting passed back and forth?
    Some well meaning (but hopelessly misguided) people have suggested using Wireshark to parse the packets.

    Well… if I was willing to go to the trouble of using a packet sniffer to see the conversation, I wouldn’t exactly need Web Inspector in the first place now would I?

    So, why bother having it? It doesn’t do anything useful at all.

Leave a Reply

Your email address will not be published. Required fields are marked *