wiki:WebInspectorDebugging

Version 3 (modified by BJ Burg, 9 years ago) (diff)

add defaults key for inspecting the remote inspector.

Debugging the Web Inspector

This page contains tips and suggested workflows for isolating, understanding, and fixing code in the Web Inspector, particularly in the user interface.

Inspecting the Inspector

For the Mac port, set the following defaults to allow inspecting a local Web Inspector.

defaults write com.apple.Safari WebKitDeveloperExtrasEnabled -bool YES

For the Mac port, set the following defaults to allow inspecting a remote Web Inspector.

defaults write com.apple.WebInspector DeveloperExtrasEnabled -bool YES

Rebuilding When Files Change

The Web Inspector interface is loaded from the build directory (./WebKitBuild/), not the source tree (./Source/WebInspectorUI/). Its code is not compiled like other parts of WebKit, but it is processed by scripts that copy its resources to the build directory. 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:

make -C Source/WebInspectorUI/ release

To automate this step, you can connect the above command to entr. The entr(1) tool (http://entrproject.org/) can perform an action when it detects that files have changed. The following command will run indefinitely, invoking the inspector's build scripts whenever any interface files change.

find -E Source/WebInspectorUI/ -regex ".*\.(js|css|html|svg|png)" | entr make -C Source/WebInspectorUI/ release

Then, you can open and close the inspector (or reload with Cmd+R) to see the new changes.

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:

ulimit -n 2048

Automating Reproduction/Setup Steps

Often when developing a feature or fixing a bug, you need to interact with the UI to reproduce the bug or conditions where a feature is used. Rather than manually clicking UI elements over and over for every iteration, you can script these interactions to happen automatically when the Inspector opens. To do so, edit the body of WebInspector.runBootstrapOperations() as defined in Source/WebInspectorUI/UserInterface/Base/Bootstrap.js.

TODO: add useful snippets here.

Using Logging inside WebInspectorUI

To log console messages from the inspected page and inspector pages to the system console, set the following preferences.

defaults write com.apple.Safari "com.apple.Safari.ContentGroupPageIdentifier.WebKit2LogsPageMessagesToSystemConsoleEnabled" -bool YES
defaults write com.apple.Safari WebKitLogsPageMessagesToSystemConsoleEnabled -bool YES

Using console.log and friends in the inspector interface's code will log messages in the next-level inspector. However, both will be interleaved if you enable output to the system console as above.