= Contributing to Web Inspector = [[Image(inspector.png)]] Let's say, we don't like red color for CSS property names. We want to change it to purple. == Inspect The Inspector == On Mac, set the following defaults to allow inspecting the inspector, and logging console messages to stdout. (To increase the level of possible inception, add more defaults for higher page group levels.) {{{ defaults write com.apple.Safari __WebInspectorPageGroupLevel1__.WebKit2ApplicationChromeModeEnabled -bool YES defaults write com.apple.Safari __WebInspectorPageGroupLevel1__.WebKit2DeveloperExtrasEnabled -bool YES defaults write com.apple.Safari __WebInspectorPageGroupLevel1__.WebKit2LogsPageMessagesToSystemConsoleEnabled -bool YES }}} Run Safari or [http://nightly.webkit.org/ WebKit Nightly build]. Open Web Inspector. We can edit `SyntaxHighlightingDefaultTheme.css` in our favorite code editor, but we cannot make a patch from it. After next update `SyntaxHighlightingDefaultTheme.css` will be overwritten and our changes disappeared. == 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] [Can we make a nice http://webkit.org/inspector-bugs link?] * [http://webkit.org/new-inspector-bug Create New Web Inspector Bug] 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 notify 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! == 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 by running `make -C Source/WebInspectorUI release`. Do it after every time you modify Inspector's files. A tip: You can reload Web Inspector just like regular web page (Cmd+R on Mac, Ctrl+R on Windows and Linux). 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].