Developers often have varying preferences or workflows that can significantly affect their productivity. An example of this is the never-ending “tabs vs spaces” debate.
Web Inspector has a variety of settings that control different aspects of the interface and workflow, all of which are preserved across Web Inspector sessions.
These settings can be changed via the Settings Tab:
The Settings Tab itself is further divided into a number of panes, each of which contains inputs for a “category” of settings.
This pane contains settings that are used thoughout the interface.
- Prefer indent using controls what character text areas use for indentation (spaces vs. tabs).
- Tab width controls the width of a tab, measured in the number of spaces it would take to render with the same size in a monospaced font. This has the same effect as the
- Indent width determines the width of each level of indentation in the number of spaces it would take to render with the same size in a monospaced font.
- Line wrapping contains settings related to line wrapping in text areas.
- Wrap lines to editor width controls whether lines that are longer than the text area’s width should overflow horizontally “off screen” (thereby allowing for horizontal scrolling) or whether they should automatically wrap to prevent that.
- Show contains settings related to how certain content is shown in text areas.
- Whitespace characters controls whether whitespace characters are shown (
·for each space and
—for each tab) in text areas.
- Invisible characters controls whether non-printable characters (e.g. carriage return, which is
↵) are shown in text areas.
- Search contains settings related to the various ways which content is searched/filtered in Web Inspector.
- Case Sensitive controls whether the given search string should be case sensitive.
- Regular Expression controls whether the given search string should be interpreted as a regular expression.
- Zoom controls the magnification of Web Inspector’s interface.
This pane contains settings specific to DOM debugging and the Elements Tab.
- Element Selection contains settings related to element selection using the page overlay.
- Show page rulers and node border lines controls whether page rulers and node border lines are shown during element selection.
- CSS Changes contains settings related to the Changes panel in the details sidebar in the Elements Tab.
- Show only for selected node controls whether the Changes panel in the details sidebar in the Elements Tab shows modifications (made using Web Inspector) to any CSS rule or only to those that match the currently selected DOM node.
This pane contains settings related to how Web Inspector treats resources, as well as settings that affect the workflow of debugging resources.
- Show Scope Chain on pause controls whether the Scope Chain panel in the details sidebar in the Sources Tab is automatically shown shown whenever execution pauses (“breaks”), such as from a breakpoint.
- Source Maps contains settings related to source maps.
- Enable Source Maps controls whether Web Inspector automatically fetches source maps for resources it knows about.
- Images contains settings related to how images are shown in Web Inspector.
- Show Transparency Grid controls whether Web Inspector draws a checkerboard background behind images to help visualize transparent content.
This pane contains settings related to the Console, as well as controls for whether certain types of information are logged to the Console from the inspected target.
- Saved Result Alias allows you to set an alternate prefix for saved values in the Console.
- For more information, please read Command Line API.
- Traces contains settings related to
- Auto-expand determines whether
console.tracemessages should automatically be expanded when they’re first shown in the Console.
- WebRTC Logging controls the amount of information that WebKit logs to the Console related to WebRTC.
- Media Logging controls the amount of information that WebKit logs to the Console related to media content, such as
- MSE Logging controls the amount of information that WebKit logs to the Console related to Media Source Extensions.
For more information, please read Script Blackboxing.
This pane contains settings that control in-development features, often including things like:
- general changes to the overall interface
- entirely new features or workflows, often in their own tab or sidebar panel
- redesigned systems or debugging tools, added alongside or as an enhancement to existing ones
Keep in mind that these features are experimental, and can change even between subsequent versions of Safari Technology Preview.