Firebug and YSlow for Safari
I was reading up on another one of those “top X command line hacks for OS X” posts (more specifically Mac OS X Tips) and came across something I never really paid attention to. It was the “Inspect Element” menu item on the right-click menu in safari. If you don’t see this, thats probably because you do not have the Debug menu enabled, you can do that with
$>defaults write com.apple.Safari IncludeDebugMenu 1
(swapping the 1 with a 0 to remove it).
This WebInspector window is actually pretty useful and shares a lot of the functionality of FireBug and YSlow for FireFox. I’m specifically referring to Safari 3.0 from here on out, and all screen shots will also be of this version.
Lets do a little comparison — what does WebInspector offer?
Using this site as my guinea pig
The other handy feature is the console. This will alert you of all the website’s quirks. I had to use Google as an example here because my site, naturally, has no errors that show up
I recently downloaded YSlow a week or so ago and I’ve been messing around with it to see how I can optimize my dev projects. While I’m not overly impressed with YSlow’s scoring — its damn near impossible to get that score above a D/C, and I think its geared more towards higher end websites than general websites — the WebInspector provides the same functionality… with less cockiness (see what I mean after the article).
It will show the loading times, or loading sizes for each element on the page which can help you visualize where your bottlenecks are. It also provides helpful little notes on compressing your CSS and JS code.
Naturally Safari and FireFox will remain very different browsers and each will retain their strengths / weaknesses. Maybe I’m crazy, but I prefer to develop with Safari as my browser. I’m not really sure how this happened, but, meh, it works.
I’m not suggesting Safari is better, or even comparing it to FireFox for that matter — I just really think WebInspector offers a lot
more than I realized in the past and is fairly unknown.
Since I’m doing general websites and not global, massive-traffic commercial sites things like CDN (Content Delivery Network) aren’t relative to me. Also, ETags are a bit of a pain in the ass to implement for small sites. These 2 F’s can severely drag down your score which, while meaningless, is a bit of a bummer. (I know the Expires Headers can be important, but this shot was taken from a site on my development server, and not production so thats not implemented.)