Warning: call_user_func() [function.call-user-func]: First argument is expected to be a valid callback in /home/robzbd/sites/blog.ubrio.us/wp-content/plugins/akismet/widget.php on line 126
Firebug and YSlow for Safari

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

FireBug Similarities

This contains all the normal stuff such as DOM, stylesheet, javascript and image browsing. The only real difference here is that you cannot edit your CSS live — which I never really use anyway.

Web Inspector

Web Inspector


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 :)

YSlow Similarities

Web Inspector

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.

Script Debugging

Ahhh. The meat and cheese of website debugging. Pesky JavaScript errors. Positioned under the Debug menu, the “Show JavaScript Console” option will soon become your best friend. I really have no clue why this is not included by default on Safari, it has to be one of the most useful features… then again, I’m a developer. :)

Final Notes

YSlow Score

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



Comments

  1. atul August 13th

    Comment Arrow

    Hi,
    nice post….I too think yslow is a bit subjective, but then removing etags from your server would be a good idea as most people don’t use If-Modified-Since: headers.

    have a look at mine


Add Yours

  • Author Avatar

    YOU


Comment Arrow




About Author

Rob Hurring

Ruby, Rails, PHP, bash... oh my!