Table of Contents

Start By Getting WebKit

Before you do any work on the Web Inspector you should checkout the project! You can do that with Subversion or Git. Its easy, and there are already plenty of instructions to guide you through that process.

Get Started Links

If you have any questions there are always people willing to help. Just jump onto IRC and visit #webkit or #webkit-inspector.

Create / Update a Bug Report

It will benefit both you and the usual Web Inspector developers if you create or comment on a bug report for the feature or fix you intend to work on. A "Bug" report is for all code changes, this include fixes, issues, and ideas for new features.

This step is very important, because your update will automatically notiy the regular Web Inspector developers. This will allow them to immediately provide you with some feedback, and pointers / guidance for solving the issue or adding the feature!

Useful Bug Links:

Now Do Your Hacking

The code for the inspector lies in WebCore/inspector. Its User Interface is made up of HTML, JavaScript, and CSS and can be found in a level deeper in WebCore/inspector/front-end.

Its very clean and readable code, so you shouldn't have too much trouble getting started. However, it is a big project and you may find yourself getting lost. Again feel free to ask questions. If you've followed this guide correctly you should have already have a bug report with CC'd individuals. Leave a comment asking a question and you will receive feedback! Or, jump on IRC for real-time feedback.

"Building" the Inspector

Making changes to just the Web Inspector's front-end may not get picked up by the usual build-webkit build script. That is because no C++ files may have been modified. In most cases you just need to copy over the modified JavaScript files to the appropriate directory. This copy operation is nearly instantaneous compared to the sometimes fearfully long builds.

All you need to do is build-webkit --inspector-frontend . The appropriate files will be copied over and you should be all set.

Using build-webkit rsyncs the files from your repository to the appropriate resources directory in your target build. So if you are building normally with the --debug flag, then you should add that here as well. You should also be aware that this command doesn't copy over changes to localized strings found in WebCore/English.lproj/localizedStrings.js.

Note that this does not combine all of the JavaScript files into one large "inspector.js" file. This is actually very desirable for testing. When inspecting the inspector it is much more usable to have all of the files show up in the Script panel separatly, in their natural order, making debugging much easier.

Creating a Patch

When you've finished some work and want to submit a patch there are some simple things to remember! They are listed on the Contributing page!

  • Make sure you have a ChangeLog entry! Use prepare-ChangeLog.
  • If you use Git and you included new images or changes to the localized strings make sure you use git diff --binary to include the binary files!