Preferences

Sofia Emelianova
Sofia Emelianova

Configure the appearance and behavior of DevTools and its panels using Settings. Settings > Preferences. This tab lists both general customization options and panel-specific ones.

To set preferences, open Settings. Settings > Preferences and scroll to one of the sections described next.

The Appearance section in the Preferences tab.

To find out what each setting does, search this page for the setting's name and expand its description.

This reference indicates different settings with the following icons:

  • Checkbox. Checkboxes
  • Drop-down lists Drop-down.
  • Deprecated. Deprecated

To restore default preferences, scroll to the end of the Preferences tab and click Restore defaults and reload.

Appearance

This section lists options that customize DevTools appearance.

Themes: Changing DevTools theme from system preference to dark to light.
  • System preference
  • Light
  • Dark

Affects Elements > Styles and sister tabs, and the Sources > Debugger pane. The auto option makes the layout depend on DevTools width.

Panel layout: Changing the Element's panel layout from horizontal to vertical.
  • horizontal
  • vertical
  • auto

To apply this setting, reload DevTools.

Language: The Settings panel in Chinese.
  • Browser UI language
  • One of locale options, in this example, Chinese

This video shows how to switch between the tabs using the corresponding keyboard shortcuts.

Sources

This section lists options that customize the Sources panel.

This video shows how, with this option enabled, the Sources panel selects files in the navigation tree as you switch between tabs.

The Sources panel shows a link to the minified file in the status bar.

Requires to reload DevTools.

This video first shows Tab characters inserted with the Tab key. Then when you enable this option and reload DevTools, the Tab key moves focus.

Requires to reload DevTools.

This video first shows the default indentation of eight spaces. Then when you enable this option, it overrides the default indentation to that of the source file.

This video first doesn't show any suggestions. Then when you enable this option, the Editor shows suggestions for command completion.

This video shows typing opening brackets before and after enabling automatic bracket closing.

Requires to reload DevTools.

This video shows how to fold code blocks when you enable this option.

Requires to reload DevTools. Options do the following:

  • All denotes all whitespace characters as dots (...). Additionally, the Editor denotes the Tab character as a line ().
  • Trailing highlights whitespace characters at the end of lines in light red.
Show whitespace characters: Options selected: All and Trailing.
  • None
  • All (...)
  • Trailing

This video first shows the Sources panel out of focus when paused at a breakpoint. Then when you enable this option, DevTools opens the Editor in the Sources panel and shows you the line of code with the breakpoint.

When pretty-printed, the Editor may show a single long code line in multiple lines, preceded by - to indicate that it's a line continuation.

Pretty-printed code in the Sources panel.
The Sources panel shows .scss files in the Authored section of the navigation tree. The Styles pane in the Elements panel shows links to .scss sources next to CSS rules.

This video shows you how to scroll past the end of file when you enable this option.

If left disabled, DevTools logs to the Console messages similar to the following:

A message in the Console informing that loading from a remote file path is prohibited for security reasons.
Default indentation: Disabling overriding options and changing default indentation from two spaces to eight, then to the Tab key.
  • 2 spaces
  • 4 spaces
  • 8 spaces
  • Tab character

This example shows how to set the default indentation to eight spaces first and then to a Tab character.

Elements

This section lists options that customize the Elements panel.

This video first shows that DOM nodes aren't selected in the DOM tree. Then when you enable this option, the Elements panel selects the nodes on hover.

Network

This section lists options that customize the Network panel. Most of the options are the same as in the panel's settings.

Preserve log in the Network panel. Saves requests across page loads.

This video first shows the requests log refreshed on page reload, then persisted when you enable this option.

Record network log in the Network panel. Starts or stops recording requests in the network log.

The Record network log button in the Network panel.

This video first shows that the requests aren't blocked. Then, after you enable this option, a pattern in the Network request blocking drawer blocks them.

Disable cache in the Network panel. Disables browser cache.

The Disable Cache checkbox.

Group by frames in the Network panel. This option groups requests initiated by inline frames.

The network request log with requests grouped by inline frames.

detected ads on the page while DevTools is open.

An ad-related network request shown in the Network panel with the Blocked Requests filter enabled.

Performance

This section lists options that customize the Performance panel.

Flame chart mouse wheel action: Changing mouse wheel action from scrolls to zoom for the flame chart.
  • Scroll
  • Zoom

This example shows both scroll and zoom mouse wheel actions on a flame chart in the Performance panel.

Console

This section lists options that customize the Console. Most of the options are the same as in Console Settings.

Similar options in Console and in Settings.

This video shows how to hide network messages with this option both in Settings. Settings and in Console Settings.

This video shows how to enable this option both in Settings. Settings and in Console > Settings and select the context in the Console.

This video shows how to enable this option both in Settings. Settings and Console > Settings and log the XHR finished loading messages to the Console.

You can find the same option in Console > Settings.

This video shows various output previews.

In other words, it sets navigator.userActivation.isActive to true upon evaluation. You can find the same option in Console > Settings.

This video shows the evaluation result of navigator.userActivation.isActive before and after enabling this option.

Extension

This section lists options that customize link handling for Chrome DevTools extensions.

Link handling: Choosing an option to open links with.
  • Auto. Opens files in the Sources panel by default.
  • Arbitrary option that can be added by a DevTools extension.

Persistence

This section lists options that control how DevTools saves the changes you make.

Debugger

This section lists options that control the Debugger behavior.

JavaScript is disabled.

Reload the page to see if and how the page depends on JavaScript while loading.

When JavaScript is disabled, Chrome shows the corresponding Disabled JavaScript. icon in the address bar and DevTools shows a warning Warning. icon next to Sources.

An icon in the address bar and a warning icon next to Sources in DevTools.

By default, the Debugger tries to trace async operations if the framework you're using supports such tracing.

The async operation in the Call Stack.

For more information, see View async stack traces.

Global

This section lists options that have global effects in DevTools.

This video first shows how to click a link and open a new tab *without* DevTools. Then when you enable this option, a new tab opens *with* DevTools.

Search as you type makes DevTools "jump" to the first search result as you type your search query. If disabled, DevTools takes you to the result only when you press Enter.

This video first shows how DevTools "jumps" as you type a search query. Then when you enable this option, DevTools takes you to the first result when you press Enter.

Sync

This section lets you set up the synchronization of settings between devices.