I’m coming to appreciate more and more all of the hard work software developers perform. I wouldn’t consider myself an open source elitist, but there’s something special about the associated ideologies. When a large community of people band together to work on a project, a lot of fantastic products can be created.
One such product is WebKit, the open source Web browser rendering engine used by Safari (as well as a number of other products). It’s very important to keep in mind that Safari and WebKit are two very different things. Safari is a Web browser that uses WebKit as it’s rendering engine.
The WebKit developers put forth the effort to port WebKit to Qt, which is, as stated by the developers:
Qt is a comprehensive development framework that includes an extensive array of features, capabilities and tools that enable development of high-performance, cross-platform rich-client and server-side applications.
Qt is truly cross-platform and allows deployment on a wide range of hardware configurations, as opposed to other “cross-platform” products that are restricted to Windows and Mac OS X. The fact that the WebKit developers put forth the effort of porting to Qt4 gives users the ability to run their rendering engine on any platform. Thanks to their hard work, it’s quite easy to run a WebKit-based browser in Linux.
Preparing your Linux system for WebKit
I’d like to be explicit in saying that the following instructions are geared towards a fresh install of Ubuntu 7.04, but should be applicable to a wide variety of Linux distributions. First and foremost you’ll need to add extra repositories. After you have followed those steps we can begin.
There are a number of packages you’ll need to successfully build a Qt4 Web browser that uses WebKit.
sudo apt-get install libqt4-dev libxslt-dev gperf bison libsqlite3-dev flex build-essential subversion
There will be a lot of additional packages to install, so don’t be surprised if the list of packages for installation is significantly large.
Obtaining a nightly build of WebKit
Next, we’ll need to use Subversion to check out the WebKit source. The following command will check out files to a folder titled WebKit within your working directory, so be sure your working directory is appropriate (I used my home directory).
svn checkout http://svn.webkit.org/repository/webkit/trunk WebKit
You will be able to monitor the checkout process as each file is listed in your terminal.
The checkout will take some time, as there are quite a few files to download. When the checkout is complete, you’ll see the following message:
Building your Qt4 WebKit browser
When the checkout is complete, you can initiate the build of your Qt4 WebKit browser using the following command:
QTDIR=/usr/share/qt4/ WebKit/WebKitTools/Scripts/build-webkit
The script will take a minute to prepare the build, and then the process will begin.
This step can take quite a bit of time depending on your hardware configuration, so take a few minutes to have a cup of coffee and relax while your browser is being built. Your terminal will scroll with hundreds of lines of build commands and more, so don’t feel the need to sit and watch it build (unless you’re interested — I was).
When your build is complete, you’ll see the following message:
Running the browser
A successful build means you can run your Qt4 WebKit browser using the following command:
WebKit/WebKitBuild/Release/WebKitQt/QtLauncher/QtLauncher about:blank
A very basic browser window will appear with limited controls and an address bar. There will be some information scrolling in your terminal, but it can generally be disregarded.
You’ve now got a native WebKit browser to play around with in Linux. I took a second to attach the launch command to an entry in an panel using the WebKit icon. It’s more convenient than keeping the command saved somewhere to copy and paste when I’d like to test in WebKit.
You can also add your WebKit browser as an entry in your Applications menu using the menu editor if you prefer.
Some quirks I’ve come across so far
There are a few things that will appear out of place. First and foremost, you’ll notice that form inputs will have, what seem to be, a random background-color. I may be completely mistaken, but I haven’t looked into things deep enough to find the rhyme or reason behind the discrepancy. From what I can tell, if the input is styled with CSS, the style takes precedence over any ‘default’ colorization.
The next issue I’ve come across is that you’re not able to work with xHttpRequest. This is another issue I have not researched in enough detail, but if anyone has any insight regarding an inability to make use of XHR, I’d be interested in reading about it.
Finally, the only other quirk I’ve come across so far is that you’ll need to include http:// in any URL you enter in the address bar. While this may seem like a small detail to write about, after my first successful build I spent a few minutes thinking that something went wrong.
Things to keep in mind
Perhaps the most important thing to keep in mind is that you’re running a nightly build of WebKit, not the build Safari is using. The nightly versions are much more advanced than Safari’s WebKit, so some of the quirks that appear in Safari may be handled in your Qt4 browser.
Due to the version discrepancy, you can’t depend on a nightly build of WebKit sufficing for a legitimate test in Safari. It is useful, however, to take a quick look at overall structural elements of your designs before making the effort of moving to an OS X machine.
Footnotes and inspiration
I was originally drawn to working with WebKit on Linux by a post on the same subject at as days pass by. I had followed his instructions and ran into a few issues. Going on his advice, I joined #webkit on irc.freenode.net and started discussing a few issues with one of the developers there. He (or she) was extremely helpful in assisting me to successfully build WebKit. I was also directed to a Wiki page which included similar instructions to the post on as days pass by. I felt compelled to write this post based on specific instructions surrounding Ubuntu Feisty but would like to give much credit to the hard work of others.
Comments
Heh. The reason the wiki page looks similar to my instructions is that I wrote the wiki page too 😉
@Stuart Langridge: Well that would make sense! Haha I had no idea, my apologies. Thanks for your original documentation as it was the inspiration for this post.
I’ve started using the Windows webkit-based browser Swift (http://try.swift.ws/ if you haven’t tried it already). It’s in 0.2 alpha so it’s very unstable, but at least it’s consitent with CSS rendering bugs found in Safari.
One thing that made me disappointed was that Swift didn’t support drop shadows on text. Do the Linux version of Webkit provide these? If so I just might switch over to Ubuntu 7.04 (which looks sweet) just for the sake of drop shadows 🙂
Off topic: you seem to be running ubuntu, have you tried 7.04 yet?
@Fredrik Wärnsberg: Unfortunately no, I’m not seeing any CSS3 in my WebKit build. That could be because I did a very standard build. I haven’t fully explored the capabilities of building my own browser using WebKit, but I’ll be sure to post any updates to the article.
Yes, I’ve upgraded my machines to 7.04 with both clean installs and upgrades, both of which worked just fine. I’m a big fan of Ubuntu and this release doesn’t disappoint.
How does this relate to Konqueror? I had read that Safari was built on a Konqueror foundation. Does Konqueror also use the WebKit rendering engine? It seems to be a pretty good preview of what to expect from Safari. Are you finding this not to be the case?
@Simanek: Great question. If I remember correctly, Konqueror still uses KHTML as it’s rendering engine. WebKit is based on KHTML but has made some changes as well. I will continue to check in both Konqueror as well as WebKit from here on out I believe, but you’re right Konqueror can usually clue you in to some Safari quirks to expect.
Re: random background colours on form elements
Qt has its own colour scheme that you can view/edit by running qtconfig in case you’re curious.
Opera/Linux uses them as well if not overridden.
Of course that doesn’t answer the CSS priority issue.
@zolan: I had assumed it was something like that, but wasn’t positive. Thanks for clearing it up!
If you get problems about missing libraries, e.g.
error while loading shared libraries: libWebKitQt.so.1: cannot open shared object file: No such file or directory
try the following:
LD_LIBRARY_PATH=WebKit/WebKitBuild/Release/lib WebKit/WebKitBuild/Release/WebKitQt/QtLauncher/QtLauncher about:blank
[…] O leitor João Antunes deixou o seguinte link, nos comentários. Através podemos instalar o webkit que se comporta de forma idêntica ao Safari. […]
[…] Re: opera 9.20 Installing and Running WebKit in Linux Using Qt – Monday By Noon […]
[…] 这篇文章介绍了一下，怎么在 Linux 上使用 Qt 库建立一个 WebKit 引擎的浏览器，虽然现在这么做对普通用户意义不大，但对一个 Linux 上的网页开发者来说，完全可以把它当成一个调试器，因为 Safari 来了，我们不能对它坐视不管。基于 gtk 还有一个叫做 Gtk+ WebCore 的项目，以前在 Edgy 上编译过，很容易崩溃，连浏览自己的博客都成问题。说到这里想感叹一下，Firefox 一直是我最喜欢的浏览器，在可用性、扩展性、稳定性、支持 Web 标准、速度上都还不错，如果换上一颗奔腾的芯，会有什么样的效果呢？ […]
hi,
thanks for the instructions, i never knew how to build webkit on linux, now I do.
Thanks a lot,
Martin
After type
QTDIR=/usr/share/qt4/ WebKit/WebKitTools/Scripts/build-webkit
I got error here..
make[1]: *** [tmp/FontQt.o] Error 1
make[1]: Leaving directory `/root/WebKit/WebKitBuild/Release/WebCore’
make: *** [sub-WebCore-make_default-ordered] Error 2
@pragnesh: Unfortunately I’m not familiar with that error. I’ll be sure to revisit the install process to see if I can find anything. In the meantime it might be good for you to hop in #webkit on irc.freenode.net — the operators there very helpful and friendly.
hi,
I tried to build webkitqt as instructions,but when I download source code and run WebKit/WebKitTools/Scripts/build-webkit script, hint me error:
Could not find top level webkit directory above source directory using FindBin.
anybody know it,thanks.
@Jeff: Unfortunately I’m not familiar with such an error — I will see if I can dig anything up, though.
When executing the QTDIR command, the script runs, but after a while I get this error:
/WebCore/platform/PlatformString.h:171: error: expected ‘,’ or ‘…’ before ‘&’ token
It won’t complete the build :/
Alexander,
I got the same problem, someone in the IRC channel suggested that I must upgrade QT to 4.3 to build webkit.
[…] toutefois vous trouverez des infos en Français sur le blog-notes de JM et un tuto détaillé ici (en […]
Jeff,
did you finally managed to build and run webkit with QT ?
On my side i had to install libqt4-dev-kdecopy to have Qt 4.3. While building i got 2 or 3 errors easy to fix (like fct missing or wrong file name). I finally go the build to complete successfully.
I launch it with: WebKit/WebKitTools/Scripts/run-launcher
but then i got some error while the client is runing:
FIXME: UNIMPLEMENTED: ../../../WebCore/platform/qt/WidgetQt.cpp:120 (virtual void WebCore::Widget::show())
or
FIXME: UNIMPLEMENTED: ../../../WebKit/qt/WebCoreSupport/FrameLoaderClientQt.cpp:195 (virtual void WebCore::FrameLoaderClientQt::forceLayoutForNonHTML())
was wandering if you meet the same kind of problem or if you can point me to where i can find a solution.
Thanks.
[…] hab ich mir deshalb mal unter Gutsy Webkit aus dem SVN gezogen. Mondaybynoon zeigt recht gut, wie das geht. Der Startbefehl war beim Build vom 3. November 2007 etwas anders, aber […]
[…] opciones no son viables, continúa leyendo. Empecemos con los créditos. Todo lo saqué del sitio MondayByNoon, lo modifiqué un poco y lo probé personalmente, así que gracias a ellos por compartir su […]
Installing QT will take how much time ??
@Kiran: It shouldn’t take very long at all – I’d imagine a maximum of one or two minutes.
[…] and now there is the last one: safari. or rather said it’s engine webkit, which is shortly said a fork to khtml by apple. i have been abled to get the engine as such, which is open source to run following this great howto. […]