Web Inspector Vs. Firebug
jayrobinson.org
jayrobinson.org
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.
I'll take another look at my font libraries and setup to see if there's anything I can do.
I don't have FontExplorer installed...
https://chrome.google.com/extensions/detail/bmagokdooijbeehm...
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.
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.)
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.
* 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.
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.
"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.
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.
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...
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)
I like Web Inspector's tab completion, although it has issues when I try it on Linux.
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.