6 ms·

Web Inspector Vs. Firebug

82 points by johns 17y ago

megaman821 17y ago
I couldn't put my finger on why exactly I liked Firebug better than Web Inspector, but this article sums it up. It is all the little things that make Firebug more usable.
- boucher 17y ago
  I can point to a dozen examples of far better usability in the WebKit Inspector, but rather than do that, I'll just note that almost all of these are fixed in the Chrome version of the Web Inspector.
  - lftl 17y ago
    Really? I'm using Chrome on Linux, and most of these points still seem to be present on my build. Maybe Ubuntu is serving me up a stale version of the dev build?
    - notauser 17y ago
      I have been using the Safari/Chrome inspector a lot recently to clean up the cross-browser version of The Plan Is. I'm probably biased because I learned how to use Firebug first, but it always feels like Firebug was designed to do what developers needed, and the Web Kit inspector was designed to copy as many of the Firebug features as possible. There are some sharp and pointy edges that look good but introduce friction. That may be because Firebug is an extension and was mostly built by people who needed the functionality. (Similarly the IE8 inspector, whilst horrible, feels like something that was (badly) designed rather than copied.)
      - boucher 17y ago
        That Firebug is an extension is one of its worst features. Every version of Safari or WebKit I download has a working inspector built in. Every time I launch an archived version of Firefox, or get a new version of Firefox, I get warnings about incompatible Firebug plugins. It's a real pain when it comes to testing across multiple versions.
  - csallen 17y ago
    Firebug has better usability in the places where it counts. The result is that using Firebug is, in general, faster than using Web Inspector. Let's take editing, for example: * WI requires double-clicking, whereas FB allows single-clicking. If you think this is trivial, then try this out: Spend a day on the web double-clicking textboxes, links, and other elements that normally require single clicks. It will annoy the hell out of you, especially if you use a trackpad instead of a mouse. * On a related note, FB shows you a text-editing cursor when you hover over an editable field. WI, on the other hand, shows you the same cursor no matter what you're hovering over. It fails to provide context clues as to what can be edited. * When editing a field, WI doesn't update the page with your changes until you press enter. Firebug, however, updates the page in real-time, so you can see your changes before submitting them. This is huge. * EDIT: After spending the last hour working with Web Inspector, I was reminded of something else: For no apparent reason, WI will sometimes reject my edits. I will edit a style, press enter, and it simply reverts to the previous value. Ugh. I don't know if this is a bug or not, but I remember running into it almost a year ago (admittedly much more often than I do now, though it shouldn't be happening at all). Using Firebug is just faster by comparison. If you're a light user then it might not matter to you. If you do heavy DOM manipulation and design work on a regular basis, however, then speed is everything.
    - boucher 17y ago
      where it counts.... to you. Not where it counts to me. WebKit has an actually usable JavaScript profiler, the one in Firebug is useless. WebKit can debug into eval'd code, Firebug is terrible at it. Chrome's version of the inspector has a heap profiler, Firebug doesn't. Same goes for decent cookie and local storage viewing. WebKit's resource monitor is more intuitive. Etc.
      - csallen 17y ago
        Good point. Those are all aspects of Firebug and Webkit that I don't use on a regular basis. It seems they each have a lot to learn from each other.
hackoder 17y ago
While firebug is clearly superior, web inspector is much more stable. It ends up being a combination of both (or one of the older, less-featured, more-stable versions of firebug).
- boucher 17y ago
  I don't use Firefox at all, because for what I do it's clearly inferior. I don't think I've launched Firebug to do anything other than log in the last 6 months.
  - freetard 17y ago
    Firebug to log in?
    - blasdel 17y ago
      He's using Firebug to log javascript errors via console.log, to test his stuff in Gecko / Firefox
      - boucher 17y ago
        Right. Sentence was non obvious, sorry.
  - dpurp 17y ago
    This is also available in Safari (not sure about Chromium) http://developer.apple.com/safari/library/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/DebuggingYourWebsite/DebuggingYourWebsite.html#//apple_ref/doc/uid/TP40007874-CH8-SW20 http://developer.apple.com/safari/library/documentation/Appl...
    - greut 17y ago
      it sure is.
  - jonknee 17y ago
greut 17y ago
vs DragonFly :-) I really like the console of Web Inspector that mixes the input and output, like a bloody console and shows the errors even if the inspector was hidden (which is linked to the fact that it's webkit bundled basically)
- aeosynth 17y ago
  DragonFly's cold start takes about ten seconds. Unusable. I like Web Inspector's tab completion, although it has issues when I try it on Linux.
dasil003 17y ago
Nice list. My personal pet peeve with Web Inspector is no hot-key for inspecting an element in a page (Command-Shift-C in Firebug)... instead you have to open web inspector, click the magnifying glass, click back to the window, and then click an element.
- exogen 17y ago
  I right-click on the element and select Inspect Element (without opening inspector first).
- Flow 17y ago
  In Windows Chrome it's Ctrl-Shift-I
  - jmtulloss 17y ago
    And Command-Option-I in Chrome/Safari on Mac.
  - dasil003 17y ago
    That opens the window, I'm talking about directly inspecting something.
    - Flow 17y ago
      You are right, it only opens the window.
mgrouchy 17y ago
This is literally the only reason why Firefox is still installed on my Macbook Pro. I have managed to switch completely to Chromium otherwise.
- pkulak 17y ago
  Same here. And I really only use it when I really need to get down and dirty. Web Inspector works fine 99% of the time.
- alanthonyc 17y ago
  Do you ever get the font problem? I try to use Chrome, but the fonts get screwed up approximately every other time I boot up.
  - mgrouchy 17y ago
    I have never had this issue. I use the dev channel of Chromium. I don't use the standard beta channel of google Chrome for Mac
  - jpcx01 17y ago
    I had this issue. Chrome on mac doesn't like to load fonts from anything other than the hard coded paths they programmed in. Usually not a problem for people, but after tracking things down I had to uninstall FontExplorer X and after that haven't hit the issue again. Was a real pain in the ass to fix, but despite these kinds of bugs I still can't help using Chrome for mac as my main web browser.
    - alanthonyc 17y ago
      Thanks. It is a pain in the ass. If the problem were consistently one thing or another on my system, I could live with it. As it is, not knowing whether or not the problem will pop up is too much for me to deal with. I'll take another look at my font libraries and setup to see if there's anything I can do.
    - Dylanfm 17y ago
Willie_Dynamite 17y ago
Now if only firebug wouldn't break Adblocks Element Hiding Helper.
robbed 17y ago
I wish there was a way to clear the resources tab without reloading the page.
jpcx01 17y ago
Firebug is obtrusive, buggy, and slow. However, for the reasons this article suggests, and some others (no right click - delete element in web inspector), I'm stuck with using Firebug for the foreseeable future. I can't wait to replace it with web inspector. I try to use the latest one on Chromium and it works for very small things, but Firebug is essential whenever I'm doing heavy hacking on DOM elements.
Timothee 17y ago
The author makes good points. Especially: "But Firebug feels much more like a text-editor, and Web Inspector like a passive, well, text-inspector" Personally, I use Safari as my main browser and like Web Inspector because it feels more "solid" and works for me in most cases. But anytime I need to tweak HTML and CSS (for layout for example) I use FF/Firebug. Adding elements, changing CSS is much easier and intuitive with Firebug.
blasdel 17y ago
Is Mozilla officially supporting Firebug development yet? They ignored it for years, choosing to keep supporting and even bundling their useless "Web Developer Toolbar". The Web Inspector lives in the tree with the code, is tested along with it. and is released as one package. Mozilla constantly breaks the already-fragile Firebug through automatic updates to Firefox, or by haphazardly updating the extension from addons.mozilla.org.
csallen 17y ago
Firefox has been on my bad side lately. For months now, it's been the slowest, most unreliable browser on both my PC and my MacBook (not counting IE). That said, since Chrome's release, the ONLY reason I have continued to use Firefox is Firebug. I do a lot of heavy design work and DOM modification, and sadly Web Inspector is just not up to the job. Like someone else posted, I never really knew why this was the case, but this post hits it spot on. Most importantly: * I want my CSS to look like CSS. Specifically, I want it to look exactly like the CSS I wrote. Firebug does this perfectly, and Web Inspector does not. * I want to edit things with a single click. Double-clicking is for grandmas, I don't have that kind of time. I did just notice that Web Inspector in Chrome allows me to right-click nodes and select "Edit as HTML". And the editing here is actually very good, good job.
timdorr 17y ago
Well don't just blog about it, get patching! http://trac.webkit.org/browser/trunk/WebCore/inspector/front-end http://trac.webkit.org/browser/trunk/WebCore/inspector/front... ;)
mcantor 17y ago
Does anyone else find the font on this site almost illegible in Chrome? Maybe I'm going crazy...
threepointone 17y ago
I just noticed that the styling for the web inspector is defined via css. One such relevant file is file:///System/Library/Frameworks/WebKit.framework/Versions/A/Frameworks/WebCore.framework/Resources/inspector/inspector.css I'm sure one could tweak this and make it look better. anyone up for the challenge, instead of complaining? FWIW, my complaint with WI isn't that it looks bad, but that it's buggy. Just try a console.log(arguments) inside any function and try, you'll see what I mean. That being said, it's my primary debugger now. I just go to firebug in dire circumstances. I even use Stainless.app sometimes; it has the same engine, and is a little lighter than safari. EDIT: Even all the js is available! http://i.imgur.com/hXuJ3.png http://i.imgur.com/hXuJ3.png I smell a side-project coming on...

82 points by johns 17y ago

I couldn't put my finger on why exactly I liked Firebug better than Web Inspector, but this article sums it up. It is all the little things that make Firebug more usable.

boucher 17y ago
I can point to a dozen examples of far better usability in the WebKit Inspector, but rather than do that, I'll just note that almost all of these are fixed in the Chrome version of the Web Inspector.
- lftl 17y ago
  Really? I'm using Chrome on Linux, and most of these points still seem to be present on my build. Maybe Ubuntu is serving me up a stale version of the dev build?
  - notauser 17y ago
    I have been using the Safari/Chrome inspector a lot recently to clean up the cross-browser version of The Plan Is. I'm probably biased because I learned how to use Firebug first, but it always feels like Firebug was designed to do what developers needed, and the Web Kit inspector was designed to copy as many of the Firebug features as possible. There are some sharp and pointy edges that look good but introduce friction. That may be because Firebug is an extension and was mostly built by people who needed the functionality. (Similarly the IE8 inspector, whilst horrible, feels like something that was (badly) designed rather than copied.)
    - boucher 17y ago
      That Firebug is an extension is one of its worst features. Every version of Safari or WebKit I download has a working inspector built in. Every time I launch an archived version of Firefox, or get a new version of Firefox, I get warnings about incompatible Firebug plugins. It's a real pain when it comes to testing across multiple versions.
- csallen 17y ago
  Firebug has better usability in the places where it counts. The result is that using Firebug is, in general, faster than using Web Inspector. Let's take editing, for example: * WI requires double-clicking, whereas FB allows single-clicking. If you think this is trivial, then try this out: Spend a day on the web double-clicking textboxes, links, and other elements that normally require single clicks. It will annoy the hell out of you, especially if you use a trackpad instead of a mouse. * On a related note, FB shows you a text-editing cursor when you hover over an editable field. WI, on the other hand, shows you the same cursor no matter what you're hovering over. It fails to provide context clues as to what can be edited. * When editing a field, WI doesn't update the page with your changes until you press enter. Firebug, however, updates the page in real-time, so you can see your changes before submitting them. This is huge. * EDIT: After spending the last hour working with Web Inspector, I was reminded of something else: For no apparent reason, WI will sometimes reject my edits. I will edit a style, press enter, and it simply reverts to the previous value. Ugh. I don't know if this is a bug or not, but I remember running into it almost a year ago (admittedly much more often than I do now, though it shouldn't be happening at all). Using Firebug is just faster by comparison. If you're a light user then it might not matter to you. If you do heavy DOM manipulation and design work on a regular basis, however, then speed is everything.
  - boucher 17y ago
    where it counts.... to you. Not where it counts to me. WebKit has an actually usable JavaScript profiler, the one in Firebug is useless. WebKit can debug into eval'd code, Firebug is terrible at it. Chrome's version of the inspector has a heap profiler, Firebug doesn't. Same goes for decent cookie and local storage viewing. WebKit's resource monitor is more intuitive. Etc.
    - csallen 17y ago
      Good point. Those are all aspects of Firebug and Webkit that I don't use on a regular basis. It seems they each have a lot to learn from each other.

hackoder 17y ago

While firebug is clearly superior, web inspector is much more stable. It ends up being a combination of both (or one of the older, less-featured, more-stable versions of firebug).

boucher 17y ago
I don't use Firefox at all, because for what I do it's clearly inferior. I don't think I've launched Firebug to do anything other than log in the last 6 months.
- freetard 17y ago
  Firebug to log in?
  - blasdel 17y ago
    He's using Firebug to log javascript errors via console.log, to test his stuff in Gecko / Firefox
    - boucher 17y ago
      Right. Sentence was non obvious, sorry.
- dpurp 17y ago
  This is also available in Safari (not sure about Chromium) http://developer.apple.com/safari/library/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/DebuggingYourWebsite/DebuggingYourWebsite.html#//apple_ref/doc/uid/TP40007874-CH8-SW20 http://developer.apple.com/safari/library/documentation/Appl...
  - greut 17y ago
    it sure is.
- jonknee 17y ago

greut 17y ago

vs DragonFly :-) I really like the console of Web Inspector that mixes the input and output, like a bloody console and shows the errors even if the inspector was hidden (which is linked to the fact that it's webkit bundled basically)

aeosynth 17y ago
DragonFly's cold start takes about ten seconds. Unusable. I like Web Inspector's tab completion, although it has issues when I try it on Linux.

dasil003 17y ago

Nice list. My personal pet peeve with Web Inspector is no hot-key for inspecting an element in a page (Command-Shift-C in Firebug)... instead you have to open web inspector, click the magnifying glass, click back to the window, and then click an element.

exogen 17y ago
I right-click on the element and select Inspect Element (without opening inspector first).
Flow 17y ago
In Windows Chrome it's Ctrl-Shift-I
- jmtulloss 17y ago
  And Command-Option-I in Chrome/Safari on Mac.
- dasil003 17y ago
  That opens the window, I'm talking about directly inspecting something.
  - Flow 17y ago
    You are right, it only opens the window.

mgrouchy 17y ago

This is literally the only reason why Firefox is still installed on my Macbook Pro. I have managed to switch completely to Chromium otherwise.

pkulak 17y ago
Same here. And I really only use it when I really need to get down and dirty. Web Inspector works fine 99% of the time.
alanthonyc 17y ago
Do you ever get the font problem? I try to use Chrome, but the fonts get screwed up approximately every other time I boot up.
- mgrouchy 17y ago
  I have never had this issue. I use the dev channel of Chromium. I don't use the standard beta channel of google Chrome for Mac
- jpcx01 17y ago
  I had this issue. Chrome on mac doesn't like to load fonts from anything other than the hard coded paths they programmed in. Usually not a problem for people, but after tracking things down I had to uninstall FontExplorer X and after that haven't hit the issue again. Was a real pain in the ass to fix, but despite these kinds of bugs I still can't help using Chrome for mac as my main web browser.
  - alanthonyc 17y ago
    Thanks. It is a pain in the ass. If the problem were consistently one thing or another on my system, I could live with it. As it is, not knowing whether or not the problem will pop up is too much for me to deal with. I'll take another look at my font libraries and setup to see if there's anything I can do.
  - Dylanfm 17y ago

Willie_Dynamite 17y ago

Now if only firebug wouldn't break Adblocks Element Hiding Helper.

robbed 17y ago

I wish there was a way to clear the resources tab without reloading the page.

jpcx01 17y ago

Firebug is obtrusive, buggy, and slow. However, for the reasons this article suggests, and some others (no right click - delete element in web inspector), I'm stuck with using Firebug for the foreseeable future. I can't wait to replace it with web inspector. I try to use the latest one on Chromium and it works for very small things, but Firebug is essential whenever I'm doing heavy hacking on DOM elements.

Timothee 17y ago

The author makes good points. Especially: "But Firebug feels much more like a text-editor, and Web Inspector like a passive, well, text-inspector" Personally, I use Safari as my main browser and like Web Inspector because it feels more "solid" and works for me in most cases. But anytime I need to tweak HTML and CSS (for layout for example) I use FF/Firebug. Adding elements, changing CSS is much easier and intuitive with Firebug.

blasdel 17y ago

Is Mozilla officially supporting Firebug development yet? They ignored it for years, choosing to keep supporting and even bundling their useless "Web Developer Toolbar". The Web Inspector lives in the tree with the code, is tested along with it. and is released as one package. Mozilla constantly breaks the already-fragile Firebug through automatic updates to Firefox, or by haphazardly updating the extension from addons.mozilla.org.

csallen 17y ago

Firefox has been on my bad side lately. For months now, it's been the slowest, most unreliable browser on both my PC and my MacBook (not counting IE). That said, since Chrome's release, the ONLY reason I have continued to use Firefox is Firebug. I do a lot of heavy design work and DOM modification, and sadly Web Inspector is just not up to the job. Like someone else posted, I never really knew why this was the case, but this post hits it spot on. Most importantly: * I want my CSS to look like CSS. Specifically, I want it to look exactly like the CSS I wrote. Firebug does this perfectly, and Web Inspector does not. * I want to edit things with a single click. Double-clicking is for grandmas, I don't have that kind of time. I did just notice that Web Inspector in Chrome allows me to right-click nodes and select "Edit as HTML". And the editing here is actually very good, good job.

timdorr 17y ago

Well don't just blog about it, get patching! http://trac.webkit.org/browser/trunk/WebCore/inspector/front-end http://trac.webkit.org/browser/trunk/WebCore/inspector/front... ;)

mcantor 17y ago

Does anyone else find the font on this site almost illegible in Chrome? Maybe I'm going crazy...

threepointone 17y ago

I just noticed that the styling for the web inspector is defined via css. One such relevant file is file:///System/Library/Frameworks/WebKit.framework/Versions/A/Frameworks/WebCore.framework/Resources/inspector/inspector.css I'm sure one could tweak this and make it look better. anyone up for the challenge, instead of complaining? FWIW, my complaint with WI isn't that it looks bad, but that it's buggy. Just try a console.log(arguments) inside any function and try, you'll see what I mean. That being said, it's my primary debugger now. I just go to firebug in dire circumstances. I even use Stainless.app sometimes; it has the same engine, and is a little lighter than safari. EDIT: Even all the js is available! http://i.imgur.com/hXuJ3.png http://i.imgur.com/hXuJ3.png I smell a side-project coming on...