
Web Inspector Vs. Firebug - johns
http://jayrobinson.org/2009/12/05/webkit-web-inspector-vs-firefox-firebug/
======
mgrouchy
This is literally the only reason why Firefox is still installed on my Macbook
Pro. I have managed to switch completely to Chromium otherwise.

~~~
alanthonyc
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.

~~~
jpcx01
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.

~~~
Dylanfm
So that's it... I need to uninstall FontExplorer. I have been using Safari to
view Github and other sites whose text turns into [A]-like characters. Very
annoying.

~~~
alanthonyc
Can you post here after you've done that to let us know the results please?

I don't have FontExplorer installed...

------
csallen
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.

------
megaman821
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
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.

~~~
csallen
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
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
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.

------
Timothee
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.

------
dasil003
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.

~~~
Flow
In Windows Chrome it's Ctrl-Shift-I

~~~
dasil003
That opens the window, I'm talking about directly inspecting something.

~~~
Flow
You are right, it only opens the window.

------
blasdel
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.

------
threepointone
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>

I smell a side-project coming on...

------
greut
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
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.

------
jpcx01
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.

------
hackoder
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
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.

~~~
dpurp
This is also available in Safari (not sure about Chromium)
[http://developer.apple.com/safari/library/documentation/Appl...](http://developer.apple.com/safari/library/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/DebuggingYourWebsite/DebuggingYourWebsite.html#//apple_ref/doc/uid/TP40007874-CH8-SW20)

~~~
greut
it sure is.

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

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

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

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

