wiki:HackingWebInspector

Modifying the Web Inspector

The Web Inspector user interface is implemented using JavaScript, CSS, and HTML. So, it's relatively easy to dig into the Web Inspector's sources and fix bugs or add new features. This wiki page documents the minimal steps required to modify styles used by the Web Inspector and submit your changes as a patch for review.

Let's say, we don't like red color for CSS property names, and we would prefer property names to be purple instead. Let's get started!

Inspect The Inspector

Since the Web Inspector UI is just another web page, we can inspect the Web Inspector with a second-level Web Inspector instance to quickly see what's going on. This requires a few magic settings to enable the "Inspect..." context menu on the Web Inspector window.

For the Mac port, set the following defaults to allow inspecting the inspector.

defaults write com.apple.Safari WebKitDeveloperExtrasEnabled -bool YES

After updating these settings, run the WebKit Nightly. Then, open the Web Inspector and right-click to inspect the inspector itself.

By inspecting the CSS property names in the second-level inspector, we quickly find that the colors are defined by rules in Source/WebInspectorUI/UserInterface/SyntaxHighlightingDefaultTheme.css. To create and submit a patch with our changes, we must to create an accompanying Bugzilla bug, and compute the diff of our changes against WebKit trunk.

Create / Update a Bug Report

The WebKit project uses "bugs" in Bugzilla for fixes, new features, and any other code changes. Every commit must have an accompanying Bugzilla bug. So, the first step is to ensure that your proposed enhancement or fix has an associated bug.

Once you find or create a bug report, make sure to add a comment stating your intent to work on the bug. This step is very important; comments on bugs in the Web Inspector Bugzilla component will automatically notify Web Inspector reviewers. This will allow them to answer any questions you may have about a proposed fix, and give feedback, pointers, and guidance for solving the issue.

Now Do Your Hacking

  1. Using Git with WebKit
    git clone git://git.webkit.org/WebKit.git
    cd WebKit
    git checkout -b purple_css_values
    
  1. Build WebKit
    Tools/Scripts/build-webkit --release
    
    A clean build takes 20-80 minutes depending on the vintage of your machine.
  1. Run it
    Tools/Scripts/run-safari --release
    
  1. Edit Source/WebInspectorUI/UserInterface/SyntaxHighlightingDefaultTheme.css within a git repository.
  1. Copy files from Source/WebInspectorUI/UserInterface to the build directory by running make -C Source/WebInspectorUI release. Do it after every time you modify Inspector's files.
  1. Look at your changes
    git status
    git diff Source/WebInspectorUI/
    
  1. ChangeLogs
    Tools/Scripts/check-webkit-style
    Tools/Scripts/prepare-ChangeLog --bug xxxxx
    # edit WebCore/ChangeLog
    

Instead of xxxxx you should put bug number, like 32926.

  1. Upload a patch and wait for a review!
    Tools/Scripts/webkit-patch upload xxxxx -m "patch"
    

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


Parts of the tutorial was taken from Quick Hacking on the Web Inspector.

Last modified 2 years ago Last modified on Apr 23, 2015 3:20:23 PM

Attachments (4)

Download all attachments as: .zip