Getting Started with Servo

Servo is a browser engine developed by Mozilla and now running individually. It shared many philosophies from gecko and one of its original goals is to make more components in a browser more modular. Despite it's not pretty active after the layoff of Mozilla, there are many crates still being maintained pretty well. Crates like url, html5ever, selector are widely used by many organizations like Deno, Vercel, and Rome. There are also non-web related crates that are actually came from Servo too, such as bindgen, core-foundation, brotli. Servo itself shaped the foundation of many rust ecosystems and is still worth exploring it IMHO. It still has the potential to become a competent engine for general usage. I would like to encourge people to partipate Servo again and getting familiar with it. And perhaps in the future, we can push its boundry further. In this post, I want you to let you know how to run a minimum demo to play around with it.

Setting up environment

Aka the most difficult part.

Setting environment is usually the least interesting part, but bare with me, it will become better after this step. Basically you should just need to follow these instructions from Servo's README and it will be good to go.

Building

Mozilla has a passion that really realy likes to utilize python scripts for building projects. So in Servo, it uses ./mach build scripts to do most jobs. Servo comes with two build mode: dev and release. One for developing and debugging purpose, the other for optimized build. To build the project, run one of the following commands:

./mach build --dev
./mach build --release

This will build library crates under components directory and build winit port binary. There are other ports can be built, but winit one is the most common option when developing it.

Since this is a fairly large project, it usually takes several minutes to complete the build. If you are developing it and just want to check build errors, you can run this command:

./mach check

Running

To run the winit port binary, we could run one of the following commands with file path or url as argument:

./mach run --dev [url/path]
# For example
./mach run --release https://www.google.com

Unlike cargo run, this will not run the build command again. It executes the built binary directly and open a window as a web page. There are more arguments and shortcut listed in Servo's README.

Testing

There are several test suite with cammands to run them. But what we care about the most right now is the compatibility of wpt.fyi. It's a test suite to check how complete a web engine is. Wpt runs daily pipeline for Servo, and Servo also include these tests too. To run a wpt test, we can choose one test under tests/wpt directory and run following command:

./mach test-wpt tests/wpt/mozilla/tests/mozilla/input_value.html

You can also just run the directory, it will run all tests under that directory. As the time of this post written, the main focu is full coverage of CSS 2 which tests can be found at tests/wpt/web-platform-tests/css/CSS2. We will talk about wpt testing and how to debug them in the future posts.

Documentation

The generated documentation can be found on official website. But of course this means only default features. If you want to see the docmentation from different features, you can go with ./mach doc.

Summary

That's pretty much it! There are definitely more commands and tools you can use. You can run ./mach --help or browse Servo's wiki search them. In the next post, I would like to talk about the overview structure of Servo. So people can get the idea how it looks like and could dive into the part they are interesed the most.