Web Inspector ReferenceWeb Inspector Settings

Contents

• General
• Elements
• Sources
• Console
• Blackbox
• Experimental

Developers often have varying preferences or workflows that can significantly affect their productivity.

Web Inspector has a variety of settings that control different aspects of theinterfaceand workflow, all of which are preserved across Web Inspector sessions.

These settings can be changed via theSettingsTab:

TheSettingsTab itself is further divided into a number of panes, each of which contains inputs for a “category” of settings.

General

This pane contains settings that are used thoughout theinterface.

• Appearancecontrols the appearance of the Web Inspectorinterface.
• Prefer indent usingcontrols what character text areas use for indentation (spaces vs. tabs).
• Tab widthcontrols 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 thetab-sizeCSS property.
• Indent widthdetermines 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 wrappingcontains settings related to line wrapping in text areas.
• Wrap lines to editor widthcontrols 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.
• Showcontains settings related to how certain content is shown in text areas.
• Whitespace characterscontrols whether whitespace characters are shown (·for each space and—for each tab) in text areas.
• Invisible characterscontrols whether non-printable characters (e.g. carriage return, which is\rand/or↵) are shown in text areas.
• Searchcontains settings related to the various ways which content is searched/filtered in Web Inspector.
• Case Sensitivecontrols whether the given search string should be case sensitive.
• Regular Expressioncontrols whether the given search string should be interpreted as a regular expression.
• ⇧⌘F from selectioncontrols whether the global search should be populated by the currently selected text when invoked via⇧⌘F.
• Zoomcontrols the magnification of Web Inspector’sinterface.

Elements

This pane contains settings specific to DOM debugging and theElementsTab.

• DOM Treecontains settings related toDOM tree.
• De-emphasize nodes that are not renderedcontrols whether DOM nodes that are not actually rendered in the inspected page are be displayed in greyscale.
• Element Selectioncontains settings related toelement selectionusing thePage Overlay.
• Show page rulers and node border linescontrols whetherpage rulers and node border linesare shown during element selection.
• Details Sidebarscontains settings related to theDetails Sidebar.
• Show independent Styles sidebarcontrols whether theStylespanelis shown as a separate column.
• CSScontains settings related to CSS introspection and debugging tools.
• Show changes only for selected nodecontrols whether theChangespanel in theDetails Sidebarshows modifications made using Web Inspector to any CSS rule or only to those that match the currently selected DOM node in theDOM Tree.
• Show property syntax in documentation popovercontrols whether syntax is shown when viewing documentation about a CSS property.

Sources

This pane contains settings related to how Web Inspector treats resources, as well as settings that affect the workflow of debugging resources.

• Debuggingcontains settings related to the debugging experience with resources (e.g. JavaScript and CSS).
• Show Scope Chain on pausecontrols whether theScope Chainpanel in theDetails Sidebarin theSourcesTabis automatically shown shown wheneverJavaScript execution pauses.
• Source Mapscontains settings related to source maps.
• Enable Source Mapscontrols whether Web Inspector automatically fetches source maps for resources it knows about.
• Imagescontains settings related to how images are shown in Web Inspector.
• Show Transparency Gridcontrols whether Web Inspector draws a checkerboard background behind images to help visualize transparent content.

Console

This pane contains settings related to theConsole,as well as controls for whether certain types of information are logged to theConsolefrom the inspected target.

• Saved Result Aliasallows you to set analternate prefix for saved valuesin theConsole.
• Tracescontains settings related toconsole.trace.
• Auto-expanddetermines whetherconsole.tracemessages should automatically be expanded when they’re first shown in theConsole.
• WebRTC Loggingcontrols the amount of information that WebKit logs to theConsolerelated to WebRTC.
• Media Loggingcontrols the amount of information that WebKit logs to theConsolerelated to media content, such as<video>.
• MSE Loggingcontrols the amount of information that WebKit logs to theConsolerelated to Media Source Extensions.

Blackbox

This pane contains settings related to script blackboxing, which is the ability to indicate to the JavaScript debugger that it should neverpause JavaScript executioninside any given script.

For more information, please readScript Blackboxing.

Experimental

This pane contains settings that control in-development features, often including things like:

• general changes to the overallinterface
• 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 ofSafari Technology Preview.