= 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 }}} To log console messages from the inspected page and inspector pages to the system console, set the following preferences. {{{ defaults write com.apple.Safari "com.apple.Safari.ContentGroupPageIdentifier.WebKit2LogsPageMessagesToSystemConsoleEnabled" -bool YES defaults write com.apple.Safari WebKitLogsPageMessagesToSystemConsoleEnabled -bool YES }}} After updating these settings, run the [http://nightly.webkit.org/ 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 == * [https://bugs.webkit.org/buglist.cgi?query_format=advanced&short_desc_type=allwordssubstr&short_desc=&component=Web+Inspector&long_desc_type=substring&long_desc=&bug_file_loc_type=allwordssubstr&bug_file_loc=&keywords_type=allwords&keywords=&bug_status=UNCONFIRMED&bug_status=NEW&bug_status=ASSIGNED&bug_status=REOPENED&emailassigned_to1=1&emailtype1=substring&email1=&emailassigned_to2=1&emailreporter2=1&emailcc2=1&emailtype2=substring&email2=&bugidtype=include&bug_id=&votes=&chfieldfrom=&chfieldto=Now&chfieldvalue=&cmdtype=doit&order=Reuse+same+sort+as+last+time&field0-0-0=noop&type0-0-0=noop&value0-0-0= Existing Web Inspector Bugs] * [http://webkit.org/new-inspector-bug Create New Web Inspector Bug] 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. [https://trac.webkit.org/wiki/UsingGitWithWebKit Using Git with WebKit] {{{ git clone git://git.webkit.org/WebKit.git cd WebKit git checkout -b purple_css_values }}} 2. [http://webkit.org/building/build.html Build WebKit] {{{ Tools/Scripts/build-webkit --release }}} A clean build takes 20-80 minutes depending on the vintage of your machine. 3. [http://webkit.org/building/run.html Run it] {{{ Tools/Scripts/run-safari --release }}} 4. Edit `Source/WebInspectorUI/UserInterface/SyntaxHighlightingDefaultTheme.css` within a git repository. 5. 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. 7. Look at your changes {{{ git status git diff Source/WebInspectorUI/ }}} 8. [http://webkit.org/coding/contributing.html#changelogs ChangeLogs] {{{ Tools/Scripts/check-webkit-style Tools/Scripts/prepare-ChangeLog --bug xxxxx # edit WebCore/ChangeLog }}} Instead of xxxxx you should put bug number, like [https://bugs.webkit.org/show_bug.cgi?id=32926 32926]. 9. [http://webkit.org/coding/contributing.html#submit 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 [http://freenode.net/irc_servers.shtml Freenode IRC] and visit #webkit or #webkit-inspector. ---- Parts of the tutorial was taken from [http://bogojoker.com/inspector_build/ Quick Hacking on the Web Inspector].