Changes between Initial Version and Version 1 of HackingWebInspector


Ignore:
Timestamp:
Jul 12, 2010 10:05:37 AM (11 years ago)
Author:
me@elv1s.ru
Comment:

--

Legend:

Unmodified
Added
Removed
Modified
  • HackingWebInspector

    v1 v1  
     1= Web Inspector Developer Survival Guide =
     2
     3[[Image(http://elv1s.ru/articles/Inspector/inspector.png)]]
     4
     5Let's say, we don't like red color for CSS property names. We want to change it to purple.
     6
     7== Inspect The Inspector ==
     8
     9Run Safari or [http://nightly.webkit.org/ WebKit Nightly build]. Open Web Inspector.
     10
     11[[Image(http://elv1s.ru/articles/Inspector/inspect.png)]] [[Image(http://elv1s.ru/articles/Inspector/tooltip.png)]]
     12
     13We 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.
     14
     15== Create / Update a Bug Report ==
     16
     17 * [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?]
     18 * [http://webkit.org/new-inspector-bug Create New Web Inspector Bug]
     19
     20It 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.
     21
     22This 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!
     23
     24== Now Do Your Hacking ==
     25
     26 1.  [https://trac.webkit.org/wiki/UsingGitWithWebKit Using Git with WebKit]
     27{{{
     28git clone git://git.webkit.org/WebKit.git
     29cd WebKit
     30git branch purple_css_values
     31git checkout purple_css_values
     32}}}
     33
     34
     35 2. [http://webkit.org/building/build.html Build WebKit]
     36{{{
     37WebKitTools/Scripts/build-webkit --debug
     38}}}
     39 [Do we really need --debug flag here?]
     40
     41 First build takes ≈40 minutes.
     42
     43 3. [http://webkit.org/building/run.html Run it]
     44{{{
     45WebKitTools/Scripts/run-safari --debug
     46}}}
     47
     48 4. Edit `WebCore/inspector/front-end/inspectorSyntaxHighlight.css` within a git repository.
     49
     50 5. There are two options:
     51   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.
     52   2. Make a symlink
     53   {{{
     54rm -rf WebKitBuild/Debug/WebCore.framework/Resources/inspector
     55ln -s WebCore/inspector/front-end/ WebKitBuild/Debug/WebCore.framework/Resources/inspector
     56}}}
     57
     58 6. Edit inspectorSyntaxHighlight.css.
     59
     60 A tip: You can reload Web Inspector just like regular web page (Cmd+R on Mac,  Ctrl+R on Windows and Linux).
     61 [[Image(http://elv1s.ru/articles/Inspector/reload.png)]]
     62
     63 7. Commit
     64 {{{
     65git status WebCore/inspector/front-end/
     66git diff WebCore/inspector/front-end/
     67git commit WebCore/inspector/front-end/`
     68 }}}
     69
     70 8.  [http://webkit.org/coding/contributing.html#changelogs ChangeLogs]
     71 {{{
     72WebKitTools/Scripts/prepare-ChangeLog --help
     73WebKitTools/Scripts/prepare-ChangeLog --bug xxxxx --git-commit HEAD
     74git commit WebCore/ChangeLog
     75 }}}
     76
     77 Instead of xxxxx you should put bug number, like [https://bugs.webkit.org/show_bug.cgi?id=32926 32926].
     78
     79 9. Make a patch
     80 {{{
     81git diff master..HEAD > purple_css_values.patch
     82 }}}
     83
     84 10. [http://webkit.org/coding/contributing.html#submit Submit a patch] and wait for a review!
     85
     86
     87If you have any questions there are always people willing to help. Just jump onto IRC and visit #webkit or #webkit-inspector.
     88
     89----
     90
     91Parts of the tutorial was taken from [http://bogojoker.com/inspector_build/ Quick Hacking on the Web Inspector].