Getting to Know WebKit
This past week I finally got fed up with Firefox’s continual memory leaks and sluggish behavior. I had enjoyed the unparalleled expansion capabilities that Firefox held, but it’s not stable enough for me. My computer is on all the time, I avoid reboots when possible (as of this writing my computer has been up for 19 days) and even restarting Firefox alone became a challenge with dozens of tabs open.
I switched to WebKit and couldn’t be happier. WebKit might sound familiar - it’s an open source web browser engine that is also a system framework in Mac OS X that’s used by Safari, Dashboard, Mail, and other OS X applications. On first glance, WebKit seems identical to the Safari browser included in OS X. However, other there are a few subtle differences. Since WebKit is open source, changes and bug fixes are constantly being added. Therefore, it is far more up-to-date than Safari, which utilizes the same code. I take advantage of the nightly releases. Also, the WebKit icon has a gold compass instead off a silver one but that’s just a triviality compared to my main point - WebKit is fast.
I won’t bore you with the details of WebKit’s blazing speed but Macintalk benchmarked many OS X browsers and WebKit did rather well, especially compared to Firefox.
Firefox vs WebKit
Switching from Firefox to WebKit definitely had its share of issues. When it comes to web development tools, there is no replacement for the Firebug extension for Firefox. Well, there is Firebug Lite. Regardless, WebKit does has some useful tools of its own.
- The WebKit nightlies come with a JavaScript debugger called Drosera that is comparable to Firebug’s debugging abilities (don’t take my word for it though, I rarely debug JavaScript).
- You can enable the debug menu in WebKit by running the following line in the terminal.
- As of last January, WebKit has had a powerful tool called Web Inspector. It’s not enabled by default in Safari, but is in the nightly WebKit builds. The Web Inspector lets you browse the live DOM hierarchy and CSS attributes of any web page in a slightly transparent window. If it’s enabled, you simply right-click on a page element of interest and select Inspect Element.
- My favorite part about WebKit is the Activity window which displays exactly what each webpage loads. Before Firebug had the Net tool, there was no other tool as easy to use. I generally keep it running in the background so I can easily summon it and see what a page is doing.
WebKit Add-ons
Unfortunately, extensions and add-ons are not supported or enabled with WebKit’s nightly builds but I have been able to get a few to work without incident. I currently use a plugin called Tidy that sits in the bottom right corner of the status bar and tells me if the current page I’m on has any errors or warnings - similar to Firebug. However, more complex plugins like Saft only play nicely with Safari so you’ll have the tradeoff of a more updated browser or more functionality.
Luckily, the amazing Inquisitor search plugin works flawlessly in WebKit.
WebKit Changes I Would Like to See
There are a few things about WebKit that bug me (but not enough to go back to Firefox) and I would like to find a way to hack features these in myself or encourage WebKit developers to commit these changes.
- Bookmark Tab Titles - Currently, if you have a bookmark called “del” for del.icio.us, the tab’s title will read “del” when you load the page instead of the complete page title. While this is only a minor annoyance, I have gotten used to relying on the title of my gmail tab to see how many emails I have. The only workaround is to manually refresh the page, at which point the accurate page title is displayed.
- Tab Cycling Shortcut Keys - In Safari and WebKit, hitting Apple+number will open the bookmark in your bookmarks bar corresponding to that number. For example, if your second bookmark was for Yahoo.com and you hit Apple+2, Yahoo.com would load. I have become ever so used to Firefox’s shortcut keys where Apple+number would bring the corresponding tab to the front. With WebKit you must hit Shift+Apple+”[" or "]” to cycle backward and forward through tabs.
- Better Live Spellcheck - The live spellchecking abilities in Firefox 2.0 are phenomenal. WebKit will go so far as underlining incorrectly spelled words but it only seems to do it on text you have just typed and not text from a blog post draft that was already there. Also, the right-click menu doesn’t suggest correct spellings. To use WebKit’s spellcheck, head over to Edit » Spelling » Check Spelling As You Type.
- Find - WebKit’s find is a far cry from Firefox’s find, which shows results live as you type.
What’s Holding You Back?
If you’re on a Mac, why do you use Firefox instead of Safari/WebKit? Or rather, what browser do you use? There are a lot to choose from: Camino, Firefox, Flock, iCab, OmniWeb, Opera, Safari, SeaMonkey, Shiira, WebKit and probably a few more I left out.
For me the tradeoff has always been speed versus utility and extensibility. Even ignoring the Firefox memory leak which can cripple Firefox after a few hours/days, a freshly launched Firefox install takes much longer to render CSS and load images than WebKit. Although, some developers don’t like the way WebKit handles JavaScript.
On a side note, I still use Firefox for one thing. I set my Firefox’s homepage to chrome://s3fox/content/s3foxWindow.xul, which accesses the S3 Firefox Organizer plugin so I can easily access my Amazon S3 account.
Update: Mark Rowe from WebKit pointed out a several errors in my article, mainly that WebKit is just the rendering engine and Safari is the browser that utilizes WebKit. This way, the WebKit nightlies make use of Safari, just with the newer rendering engine.
It’s a really miniscule reason but to me it’s the deal breaker - I love having bookmarks toolbar icons in Firefox (even if I have to add a few lines into userChrome.css). Then I can delete all the text next to it and have a neat bookmarks bar like so: http://lifehacker.com/assets/resources/2007/03/smart%20bookmarks%20bar.png (only significantly better looking because it’s Firefox on OS X).
On my laptop/PowerBook I use WebKit, purely because I have to do a few Web Programming modules in Uni and I quite like the DOM Inspector. Also, it doesn’t use the stupid Aqua buttons like Safari does. I hate those default buttons!
On my iMac I use Safari just because I want to keep it stable (WebKit has been known to crash on me) for as long as possible. I don’t want things crashing on me until they are six months old, at least! Heh.
I like to use WebKit/Safari as .Mac lets me sync the bookmarks at a click of a button. If I’m on campus browsing around and doing work and find things I need to read (and therefore bookmark them) I can easily switch to my iMac when I get home. If there was a really (and I mean really, really) easy way to do this for Firefox then I’d probably switch back.
Love me some Firefox.
By the way, an easy way to get the updates for WebKit is a little application named NightShift.
Launch that app, one click and it downloads the new version and scraps the old one. Perfect if you really want to make the switch and can’t be bothered with updating daily.
Steffan, thanks for the NightShift mention.. totally forgot to mention it.
Wait. So even though OmniWeb performed better on the test, supports plugins, and has a ton of built-in features Safari couldn’t even dream of, you still chose WebKit? I know there’s a $15 price tag, but really, OmniWeb is the best out there on any platform. Auto tab-saving, great tab previews, workspaces, built-in ad blocking, the list just goes on and on.
Great post! I was not familiar with WebKit, and your post was very detailed and helpful.
I use Firefox because of the Google browser sync… I’m always adding and removing bookmarks at home and at work and I want my bookmarks to be synchronized. I know I could go with a pay service like .Mac (ha!) but it’s not worth the money to me just for that service. I tried a few other services like del.icio.us but just couldn’t get into it like I use my regular bookmarks (I usually keep a few hundred at any time).
Another feature of importance to me is the ability to block obnoxious Flash animations and other scripts, and of course there are several extensions for Firefox to assist in this. This is a necessity for me when I browse MySpace!
Lastly, perhaps it’s just me, but I don’t see slow-downs in Firefox. I keep my browser open usually all day (I use FF both at home and at work) and probably work in between 5 and 10 tabs at a time (a lot of my work is web-based). It might get sluggish sometimes, but I usually chalk that up to our lousy connection (I work at a university and we give most of our bandwidth to the residential students).
I think that, if it gets to the point where I fret over a few lost seconds due a slow browser, I need to step away from the computer!
Keep up the good work…
Firefox is unbearably slow on my G4 Powerbook — even opening a new tab takes a few seconds. However, the bookmark sync with my Windows and Linux boxes (using Foxmarks) is great.
I’ve been wanting to use Safari or Webkit, but it’s just still not supported on Google Docs :(
I have become accustomed to firefox- it is my browser of choice, and woot, they have it installed at my university. However, the memory leaks at home on my mac are really annoying. Camino is ok, but not as good as firefox. Cmon, firefox, what’s the issue?
Right now, there are two Mac widget implementations:
* widget/src/mac (Carbon widgets, used by Firefox, Thunderbird, etc..)
* widget/src/cocoa (Cocoa widgets, used by Camino)
We plan to complete and polish Cocoa widgets such that they can be used by all Mozilla.org Mac OS X products. Carbon widgets will be deprecated. Firefox 3.0 will be the first release of Firefox using Cocoa widgets.
Source: Mozilla
—
I use Camino because it uses native OS X widgets, instead of the XUL interface. I think Firefox 3 will be much better implemented into OS X when it comes out.
I used Firefox a few times in OS X, didn’t really like it. Just doesn’t fit my style. I like my apps to be simple. Camino is a lightweight browser and the new beta has some great features like spell check (something I loved in Safari), built in flash blocking, better security features from previous versions, and session saving.
As for WebKit, I love the speed. I just hate the fact that I can’t visit sites like Yahoo without getting messages about using an unsupported browser.
I too prefer WebKit over Firefox, however I am bummed that I can’t run Saft. Because having WebKit open tons of other windows instead of tabs is really annoying. I’d love to keep evrerything in one window with tabs. Anyone know a way to force WebKit to open new windows in tabs?
Firefox for me. I’m too used to it, and besides, its quite fast on an Intel Mac. Also, it is more accurate than Safari at interpreting CSS, which is nice.
@Ivan Storck: Look under Preferences for “Tabs”, you probably haven’t enabled it.
I really, really love Safari’s extreme speed - I used to use it as my one & only browser. But the fact that it lacked any real extensibility got annoying. I ended up switching to Firefox, but, as you do, I hate its memory leak issues and slow page rendering. I’ve tried Opera but it is just too ugly. I might, maybe switch to WebKit. Maybe. But the beta-ness of it scares me a little — For something that I depend on as much as a browser I need absolute stability.
Sorry, but I forgot to mention OmniWeb… I’m considering that, but I’m not sure I want to pay for a browser — I tend to change my browser of choice with the seasons.
I recently ditched Firefox in favor of Camino. The latest beta is pretty nippy, but maybe I should give webkit another go.
Excellent post, really reinforces my decision to move from Firefox to Safari/Webkit. I’ve had a look at the nightly builds before, but until now haven’t tried it out.
As far as plugins go, do not forget PicLens — great image-veiwing utility. Works great with WebKit too.
Do you have any idea why the full Cocoa text features, like spelling suggestions, don’t work in Webkit? They used to a few months back.
I actually just switched to Firefox a couple months ago, after having used Safari since it’s debut. For me, it was the fact that Firefox was faster than Safari, and it rendered pages more correct, overall. The reason for the speed increase is probably because I have an ancient Mac, and I haven’t done a clean install in a good while.
I could never go back now however. Too dependent on all the add-ons :)
I just made the switch from Safari/OmniWeb to Firefox over the weekend. The two add-ons that finally made me switch are the del.icio.us bookmarks integration and FireGPG, especially the latter which allowed me to mostly ditch Mail.app/PGP Desktop for Gmail. I do miss the InquisitorX search plugin on Safari and OmniWeb’s general speed, but Firefox seems better supported across the web and AdBlock is a lot more reliable than PithHelmet at blocking adds without breaking website functionality.
Thanks for the link, Paul. The DOM inspector has been around for much longer than last January, though — as you can see here (screenshot from a nightly build from ~March 2006). It’s very useful indeed for designing with CSS.
@Mackie - Sorry for the confusion, by last January I meant January 2006. http://webkit.org/blog/?p=41
You know how you’ll hear a new word for the first time and then all of a sudden you hear it 10 times in the next two days? It’s like that with WebKit. I just read that Macintalk article also, and then downloaded WebKit, and now your article. I’m interested to see how it compares to safari. My main issue for using a browser is speed and reliability.
I did read an article a while ago talking about how much Safari slows down your computer when using Adobe programs, but FireFox doesn’t.
@Shawn, I’ve read that article about Adobe programs too. Personally I can’t notice the difference but I don’t really do intensive things in Photoshop/InDesign. Also, I bet it will go away once CS3 comes around.
Its all about the del.icio.us extension and Firebug. I need those like drugs, so Firefox it is.
Now if only it worked on Windowz. I’m really hoping that Firefox 3 fixes the memory issue, because now I have to restart FF every two days or so.
Intrigued I went to try Webkit but it wont even launch. I’m sure I have deleted all my extensions, bar SafariPlus which I can’t see how to delete. Any hints on how to get Webkit to load?
Paul, it’s worth clarifying that WebKit and Safari are very different things. In many parts of your post you conflate the two. WebKit is an HTML rendering engine. Safari is a web browser that uses WebKit to display web pages. The WebKit.app application you download from http://nightly.webkit.org/ contains an updated version of WebKit and *not* Safari. It makes use of the version of Safari that you have installed on your system. Every single one of the “WebKit” improvements you would like to see are in the domain of the Safari application.
Extensions are not explicitly disabled with nightly builds. You may receive warning dialogs asking you to disable them before filing bug reports and some extensions will disable themselves when they notice that they are being run against a newer version of WebKit than the developer has tested with. This is highly desirable as many extensions hook into undocumented and unsupported parts of WebKit/WebCore which means that there is a very real likelihood their use will result in crashes with the nightly builds. Other extensions such as Inquisitor are almost entirely at the Safari application level, in which case changes to WebKit are not particularly important from their point of view.
Thanks for clearing everything up Mark!
Awesome, looks like I’ll be giving this a try.
I don’t know how well this will work for WebKit.app, but I’ve been able to change the supported Safari versions for different plugins (primarily PithHelmet) in the past by using the “Show Package Contents” function on the respective bundle. Inside each plugin package is an info.plist file that you will need to open in you favorite text editor. Look for a line that mentions something about “SupportedSafariBuild”, or something similar. This entry has a value that you can modify to force the plugin to support a higher version of Safari. Right now, before any modifications, my Saft plugin supports Safari version 419.3.
Be warned, I don’t know how stable this method is, but I never had too many problems using it to force PithHelmet to support updated versions of NetNewsWire. Also, this may not work at all. YMMV.
Paul, just to clarify something. Webkit is only the HTML/CSS/JS rendering engine. When using the nightlies of Webkit, you are still using Safari. Webkit just attaches itself to Safari (in a manner of speaking), and replaces the Webkit rendering engine.
That said, the next verison of Safari (Leopard) that will use the updated Webkit engine is going to be a huge boon for CSS developers hoping someone (anyone!) would push forward with CSS3 adoption.
I met with a few of the Webkit developers last year at WWDC, and I’m extremely confident that Webkit/Leopard is going to really shake up the browser field.
Thank you, Paul. Nice post. I only have to add that there is no necessity of adding spell check. System wide spell check based on Aspell, like Cocoaspell does the job.
Paul, I too made the switch to webkit. I use safari anyways, and webkit just makes it better, no I can use all my google stuff without having to open camino or flock. Very nice.
As far as delicious integration with safari/webkit - no problem. I’ve got http://codesorcery.net/pukka tied to shortcut apple-1 and delicious homepage tied to apple-2 doesn’t get any faster than that. I got tired of sitting around waiting for the java to load the delicious bookmarks in firefox.
Pukka is the perfect webkit companion and yes it’s worth the $5.
Dude, the fact that you can go 19 days without rebooting is a testament to MacOS. I can’t go more than a few days with my XP system. I’ve got to get a MacBook Pro, I just need to find $2,500 that isn’t going towards feeding or sheltering me.
How does WebKit work with something like the Nightly Build download, or other applications that use it - for instance a programming language I uses - do they all use the systems framework, or do some use local versions of the framework?