about me
I'm a 35'ish year old web application developer from South Portland, Maine. I love meeting fellow techies, drop me a line if you want to talk shop.
Categories
Firefox’s Firebug vs Safari’s Web Inspector
Posted on 03/05 at 09:12 AM
Like most web developers (that I like) I use Firefox for building my web applications. Its stable, it renders beautifully and it has more 3rd party plugins than you can shake a stick at. But without a doubt the biggest reason I use FF is a plugin called Firebug. I use it primarily for debugging Javascript but Firebug can do sooooo much more. Internet Exploder has nothing like it! Safari didn’t used to .... but for some reason ... it now does?! huh?!
I took a few screenshots tonight from both Firebug and Web Inspector that I thought were interesting.
I didn’t realize it, but Web Inspector now has a Console that you can execute javascript in, just like Firebug’s, and it works wonderfully!! And it has a Profiler like Firebugs, but with more FLARE. It looks reminiscent of the storage bar in iTunes if you happen to have an iPod or iPhone. You’ll also find a DOM browser and CSS attributes browser just like in Firebug.
I’m impressed that Web Inspector has grown into a more mature tool for developers. For whatever reason though, Apple still doesn’t make the tool easy to use. It lacks Firebug’s INSPECT button ... where you can quickly left-click to select a DOM element on a page. Web Inspectors version of this is to right-click on your target ... but thats awkward at best. Knowing Apple, it will remain that way for eternity. Bummer. Web Inspector is neat, but it still cant hold a candle to Firebug. I do hope they improve it.
Oh and by the way ...
Web inspector is hidden by default, if you would like to try it out then open Terminal (/Applications/Utilities/Terminal) and paste in the following line at the prompt.
defaults write com.apple.Safari IncludeDebugMenu 1
Now quit safari and then launch it again. right click somewhere on a page and select Web Inspector. This will also make available a DEBUG menu at the top of your screen. Feel free to browse.
 |
 |
 |
 |
 |
 |
11 Comments
hey i have the solution..email me and i’ll share it with you bro
i hope somebody can help us here lol
safari —Blah & Booo!!! Long Life The KING!! Thanks for the comparison CodeOfficer.
Firebug is great. I never even knew Safari had a comparison, but then again, I use PC.
This is probably the most useful thing I’ll learn all day. I guess I can leave work now:) Thanks!
Can you edit CSS variables with the Web Inspector in Safari? That would really complete this feature.
if you don’t want to use Terminal, you can reveal web inspector by going to preferences then advanced options and check the “show develop menu in menu bar” option…
actually, you couldnt be more wrong about Web Inspector not having an “Inspect” feature, hit escape when you open Web Inspector, that will toggle the “Console”, you’ll see an icon shaped like a magnifying glass near the top of the console to the left of the DOM path, click it and rock out… obviously you haven’t spent much time with this tool. i hope you feel like a retard now.
Leave a comment?
Please use Pastie or Gist if you need to write code in your comments.
Often times I will release code for free or go that extra distance to help others online. If my skills were useful to you, please consider a small donation. Thank you very much.
You Can Find Me
@ github.com
@ twitter.com
@ calendaraboutnothing
My Wishlists
My Other Sites
Foundation's Edge, RJones Family, We're Not.com (only for staging), Ailee Jones (same as rjones for now)
Friends of Mine
Aaron, Barnaby, Brian, Chris, Dirk, Frank, Four, Justin, Matt, Mike, Monty, Paul, Sean, Travis
IRC Hangouts
I can usually be found lounging on irc.freenode.net while I work, on the following channels: #fauna, #github, #hello-heroku, #jquery, #passenger, #ruby, #rubyonrails, #slicehost, #sproutcore, #textmate, #werenot.
As an aside, if you don’t like using the CLI to toggle features like the inspector, it might be worth taking a look at the ”Secrets” prefpane. It gives you gui access to a whole host of options through an interface in the System Preferences.