Changes between Initial Version and Version 1 of HackingWebInspector

Timestamp:

Jul 12, 2010 10:05:37 AM (14 years ago)

Author:

me@elv1s.ru

Comment:

--

HackingWebInspector

@@ +1 @@
+= Web Inspector Developer Survival Guide =
+
+[[Image(http://elv1s.ru/articles/Inspector/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 ==
+
+Run Safari or [http://nightly.webkit.org/ WebKit Nightly build]. Open Web Inspector.
+
+[[Image(http://elv1s.ru/articles/Inspector/inspect.png)]] [[Image(http://elv1s.ru/articles/Inspector/tooltip.png)]]
+
+We can edit inspectorSyntaxHightlinght.css in our favorite code editor, but we cannot make patch from it. After next update inspectorSyntaxHighlight.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 made 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 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!
+
+== 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 branch purple_css_values
+git checkout purple_css_values
+}}}
+
+
+ 2. [http://webkit.org/building/build.html Build WebKit]
+{{{
+WebKitTools/Scripts/build-webkit --debug
+}}}
+ [Do we really need --debug flag here?]
+
+ First build takes ≈40 minutes.
+
+ 3. [http://webkit.org/building/run.html Run it]
+{{{
+WebKitTools/Scripts/run-safari --debug
+}}}
+
+ 4. Edit `WebCore/inspector/front-end/inspectorSyntaxHighlight.css` within a git repository.
+
+ 5. There are two options:
+   1. Copy files files from `WebCore/inspector/front-end/` to the build by running `WebKitTools/Scripts/build-webkit --debug --inspector-frontend`. Do it after every time you modify Inspector's files.
+   2. Make a symlink
+   {{{
+rm -rf WebKitBuild/Debug/WebCore.framework/Resources/inspector
+ln -s WebCore/inspector/front-end/ WebKitBuild/Debug/WebCore.framework/Resources/inspector
+}}}
+
+ 6. Edit inspectorSyntaxHighlight.css.
+
+ A tip: You can reload Web Inspector just like regular web page (Cmd+R on Mac,  Ctrl+R on Windows and Linux).
+ [[Image(http://elv1s.ru/articles/Inspector/reload.png)]]
+
+ 7. Commit
+ {{{
+git status WebCore/inspector/front-end/
+git diff WebCore/inspector/front-end/
+git commit WebCore/inspector/front-end/`
+ }}}
+
+ 8.  [http://webkit.org/coding/contributing.html#changelogs ChangeLogs]
+ {{{
+WebKitTools/Scripts/prepare-ChangeLog --help
+WebKitTools/Scripts/prepare-ChangeLog --bug xxxxx --git-commit HEAD
+git commit WebCore/ChangeLog
+ }}}
+
+ Instead of xxxxx you should put bug number, like [https://bugs.webkit.org/show_bug.cgi?id=32926 32926].
+
+ 9. Make a patch
+ {{{
+git diff master..HEAD > purple_css_values.patch
+ }}}
+
+ 10. [http://webkit.org/coding/contributing.html#submit Submit a patch] and wait for a review!
+
+
+If you have any questions there are always people willing to help. Just jump onto 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].