Changes between Initial Version and Version 1 of WebInspectorDebugging


Ignore:
Timestamp:
Apr 23, 2015 3:40:30 PM (7 years ago)
Author:
Brian Burg
Comment:

--

Legend:

Unmodified
Added
Removed
Modified
  • WebInspectorDebugging

    v1 v1  
     1# Debugging the Web Inspector
     2
     3This page contains tips and suggested workflows for isolating, understanding, and fixing code in the Web Inspector, particularly in the user interface.
     4
     5## Inspecting the Inspector
     6
     7For the Mac port, set the following defaults to allow inspecting the inspector.
     8
     9{{{
     10defaults write com.apple.Safari WebKitDeveloperExtrasEnabled -bool YES
     11}}}
     12
     13
     14## Rebuilding When Files Change
     15
     16The Web Inspector interface is loaded from the build directory (./WebKitBuild/), not the source tree (./Source/WebInspectorUI/).
     17Its code is not compiled like other parts of WebKit, but it is processed by scripts that copy its resources to the build directory.
     18Thus, to see changes you've made to Web Inspector's JS, CSS, or images, you must re-run the inspector build scripts. This can be done without recompiling all of WebKit by running the following:
     19
     20{{{
     21make -C Source/WebInspectorUI/ release
     22}}}
     23
     24
     25To automate this step, you can connect the above command to `entr`.
     26The `entr(1)` tool (http://entrproject.org/) can perform an action when it detects that files have changed.
     27The following command will run indefinitely, invoking the inspector's build scripts whenever any interface files change.
     28
     29{{{
     30find -E Source/WebInspectorUI/ -regex ".*\.(js|css|html|svg|png)" | entr make -C Source/WebInspectorUI/ release
     31}}}
     32
     33Then, you can open and close the inspector (or reload with Cmd+R) to see the new changes.
     34
     35NOTE: depending on your system configuration, you may need to adjust the maximum open files limit for entr to work in this case. There are approximately 1000 inspector files, so this can be fixed with the following:
     36
     37{{{
     38ulimit -n 2048
     39}}}
     40
     41
     42## Automating Reproduction/Setup Steps
     43
     44
     45## Using Logging inside WebInspectorUI
     46
     47To log console messages from the inspected page and inspector pages to the system console, set the following preferences.
     48{{{
     49defaults write com.apple.Safari "com.apple.Safari.ContentGroupPageIdentifier.WebKit2LogsPageMessagesToSystemConsoleEnabled" -bool YES
     50defaults write com.apple.Safari WebKitLogsPageMessagesToSystemConsoleEnabled -bool YES
     51}}}
     52
     53Using `console.log` and friends in the inspector interface's code will log messages in the next-level inspector.
     54However, both will be interleaved if you enable output to the system console as above.