⚠ Archived content — this site is no longer maintained.   Current WebKit documentation is at docs.webkit.org.

Changes between Version 11 and Version 12 of WebInspectorDebugging


Ignore:
Timestamp:
Jun 7, 2026, 11:56:27 PM (14 hours ago)
Author:
darbinyan@apple.com
Comment:

--

Legend:

Unmodified
Added
Removed
Modified
  • WebInspectorDebugging

    v11 v12  
    1 = Debugging the Web Inspector
    2 
    3 This 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 
    7 For the Mac port, set the following defaults to allow inspecting a '''local''' Web Inspector.
    8 
    9 {{{
    10 defaults write com.apple.Safari WebKitDeveloperExtrasEnabled -bool YES
    11 defaults write com.apple.Safari WebKitDebugDeveloperExtrasEnabled -bool YES
     1{{{#!html
     2<div style="padding: 1em; background: #fff8c4; border-left: 4px solid #f5c842; margin: 1em 0;">
     3    <strong>⚠ This page has moved.</strong> The current documentation is at
     4    <a href="https://docs.webkit.org/Deep%20Dive/Web%20Inspector/Debugging.html">docs.webkit.org/Deep Dive/Web Inspector/Debugging</a>.
     5</div>
    126}}}
    13 
    14 NOTE: You may need to first give Terminal Full Disk Access. Remember to turn this off afterwards.
    15 
    16 {{{
    17 System Preferences > Security & Privacy > Privacy give Terminal "Full Disk Access"
    18 }}}
    19 
    20 
    21 == Rebuilding When Files Change
    22 
    23 The Web Inspector interface is loaded from the build directory (./WebKitBuild/), not the source tree (./Source/WebInspectorUI/).
    24 Its code is not compiled like other parts of WebKit, but it is processed by scripts that copy its resources to the build directory.
    25 Thus, 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:
    26 
    27 {{{
    28 make -C Source/WebInspectorUI/ release
    29 }}}
    30 
    31 
    32 To automate this step, you can connect the above command to `entr`.
    33 The `entr(1)` tool (http://entrproject.org/) can perform an action when it detects that files have changed.
    34 The following command will run indefinitely, invoking the inspector's build scripts whenever any interface files change.
    35 
    36 {{{
    37 find -E Source/WebInspectorUI/ -regex ".*\.(js|css|html|svg|png)" | entr make -C Source/WebInspectorUI/ release
    38 }}}
    39 
    40 Then, you can open and close the inspector (or reload with Cmd+R) to see the new changes.
    41 
    42 NOTE: 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:
    43 
    44 {{{
    45 ulimit -n 2048
    46 }}}
    47 
    48 
    49 == Using Logging inside WebInspectorUI
    50 
    51 To log console messages from the inspected page and inspector pages to the system console, set the following preferences.
    52 {{{
    53 defaults write com.apple.Safari "com.apple.Safari.ContentGroupPageIdentifier.WebKit2LogsPageMessagesToSystemConsoleEnabled" -bool YES
    54 defaults write com.apple.Safari WebKitLogsPageMessagesToSystemConsoleEnabled -bool YES
    55 defaults write com.apple.Safari WebKitDebugLogsPageMessagesToSystemConsoleEnabled -bool YES
    56 }}}
    57 
    58 Using `console.log` and friends in the inspector interface's code will log messages in the next-level inspector.
    59 However, both will be interleaved if you enable output to the system console as above.
    60 
    61 = Tips for Debugging Tests
    62 
    63 == Force Synchronous TestHarness Output
    64 
    65 Setting `InspectorTest.debug()` will log all inspector protocol traffic and `console.log` output to stderr which can be observed when the test completes or times out.
    66 
    67 Setting `InspectorTest.forceDebugLogging = true` will force all test output to be emitted via window.alert, which in a LayoutTest will add a message to test output without modifying the test page.
    68 This is useful if you suspect problems in the test harness itself, or if the test crashes before writing buffered output into the test page (which is usually scraped to produce the test output).
    69 
    70 
    71 == Logging to System Console/stderr While Running Tests
    72 
    73 This is basically the same as above, except that the defaults domain is different. Since the test executable WebKitTestRunner resets its domain defaults on every run, you must set logging defaults globally. This is not recommended for other purposes since it may cause unrelated WebKit instances to log lots of messages.
    74 
    75 {{{
    76 defaults write -g "com.apple.Safari.ContentGroupPageIdentifier.WebKit2LogsPageMessagesToSystemConsoleEnabled" -bool YES
    77 defaults write -g WebKitLogsPageMessagesToSystemConsoleEnabled -bool YES
    78 defaults write -g WebKitDebugLogsPageMessagesToSystemConsoleEnabled -bool YES
    79 }}}
    80 
    81 == Disabling Minification and Concatenation
    82 
    83 By default, all Inspector resources are combined in a single file to minimize the time spent loading many small local files through WebKit's loading infrastructure. Unfortunately, this can make stack traces in test output hard to read. To disable combining of test resources:
    84 
    85 === On Mac
    86 
    87 Go to the file:
    88 
    89 {{{
    90 ./OpenSource/Source/WebInspectorUI/Configurations/DebugRelease.xcconfig
    91 }}}
    92 
    93 and set `COMBINE_TEST_RESOURCES = NO`. Then rebuild the WebInspectorUI project:
    94 
    95 {{{
    96 make -C OpenSource/Source/WebInspectorUI/ release
    97 }}}
    98 
    99 and run your test again.
    100 
    101 === On Linux GTK
    102 
    103 Add `COMBINE_TEST_RESOURCES=NO` to `--cmakeargs`. In Debug build inspector resources are not combined by default, if you want to run Release binary but disable combining of inspector UI resources add `COMBINE_INSPECTOR_RESOURCES=NO`. Build WebKit:
    104 
    105 {{{
    106 build-webkit --gtk --cmakeargs="-DCOMBINE_INSPECTOR_RESOURCES=NO -DCOMBINE_TEST_RESOURCES=NO"
    107 }}}
    108 
    109 and run your test again.