Preferences
Configure the appearance and behavior of DevTools and its panels using
Settings >Preferences. This tab lists both general customization options and panel-specific ones.
To set preferences, open
Settings >Preferences and scroll to one of the sections described next.
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:
Checkboxes- Drop-down lists
Deprecated
To restore default preferences, scroll to the end of thePreferences tab and clickRestore defaults and reload.
Appearance
This section lists options that customize DevTools appearance.
Themes
sets a color theme for DevTools UI.
Panel layout
arranges panes in panels.
AffectsElements >Styles and sister tabs, and theSources >Debugger pane. Theauto option makes the layout depend on DevTools width.
Language
sets the locale for DevTools UI.
To apply this setting, reload DevTools.
EnableCtrl/Cmd +0-9 shortcut to switch panels lets you open panels using the keyboard.
This video shows how to switch between the tabs using the corresponding keyboard shortcuts.
Disable paused state overlay hides thePaused in debugger
overlay in the viewport when code execution is paused.
Show What's New after each update automatically opens theWhat's New drawer tab after each Chrome update.
Sources
This section lists options that customize theSources panel.
Search in anonymous and content scripts lets you search all loaded JavaScript files, including those in Chrome extensions, using theSearch tab.
This video shows how to search for text in an extension source file.
Automatically reveal files in sidebar selects files on theSources >Page pane when you switch between tabs in theEditor.
This video shows how, with this option enabled, theSources panel selects files in the navigation tree as you switch between tabs.
Enable JavaScript source maps lets DevTools find sources of generated or minified JavaScript files.
Key point: This option works only if the source maps are available.TheSources panel also puts a link to the generated or minified file in the status bar.
Enable tab moves focus makes the
Tab key move focus inside DevTools instead of inserting a Tab character in theEditor.
Requires to reload DevTools.
Key point: This setting makes
Default indentation inactive because the
Tab key doesn't insert characters in this case.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.
Detect indentation sets indentation to the one in the source file opened in theEditor.
Requires to reload DevTools.
Key point: This setting overrides
Default indentation. In the following video, the default indentation is set to eight spaces, while the detected indentation in the file is two spaces.
Show whitespace characters: All lets you to see whitespace characters as dots (...) and tabs as lines (—).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.
Autocompletion enables handy suggestions in theEditor.
This video first doesn't show any suggestions. Then when you enable this option, theEditor shows suggestions for command completion.
Auto bracket closing automatically adds a closing bracket or tag when you type an opening one.
This video shows typing opening brackets before and after enabling automatic bracket closing.
Bracket matching underlines and highlights inlight red in theEditor a square bracket, curly bracket, or parenthesis without a pair.
Code folding lets you fold and unfold code blocks in curly brackets in theEditor.
Requires to reload DevTools.
This video shows how to fold code blocks when you enable this option.
Show whitespace characters
displays whitespace characters in theEditor.
Requires to reload DevTools. Options do the following:
- All denotes all whitespace characters as dots (
...). Additionally, theEditor denotes theTab character as a line (—). - Trailing highlights whitespace characters at the end of lines inlight red.
Display variable values inline while debugging shows you the variable values next to assignment statements while the execution is paused.
Focus Sources panel when triggering a breakpoint opensSources >Editor at the line with the breakpoint that paused execution.
This video first shows theSources panel out of focus when paused at a breakpoint. Then when you enable this option, DevTools opens theEditor in theSources panel and shows you the line of code with the breakpoint.
Automatically pretty print minified sources makes those sources readable.
Whenpretty-printed, theEditor may show a single long code line in multiple lines, preceded by- to indicate that it's a line continuation.
Enable CSS source maps lets DevTools find the sources of generated CSS files, for example,.scss, and show them to you.
Key point: This option works only if the source maps are available.- TheSources panel shows
.scssfiles under theAuthored section of the navigation tree. - TheElements >Styles pane shows links to sources next to CSS rules applied to an element.
Allow scrolling past end of file lets you scroll further than the last line in theEditor.
This video shows you how to scroll past the end of file when you enable this option.
Allow DevTools to load resources, such as source maps, from remote file paths. Disabled by default for security reasons.
Caution:Remote file paths are a security vulnerability. It is best to use this option only if you are aware of consequences.If left disabled, DevTools logs to theConsole messages similar to the following:
Default indentation
lets you choose the number of spaces the
Tab key inserts in theEditor.
Key point:
Detect indentation overrides this setting and sets indentation to the that of the source file. Requires to reload DevTools.
Enable tab moves focus overrides the
Tab key. It moves focus instead of inserting characters.
Show whitespace characters: All lets you to see whitespace characters as dots (...) and tabs as lines (—).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 theElements panel.
Show user agent shadow DOM displays shadow DOM nodes in the DOM tree.
Word wrap breaks long lines in the DOM tree and wraps them to the next line.
Show HTML comments displays HTML comments in the DOM tree.
Reveal DOM node on hover selects the corresponding node in the DOM tree as you hover over an element in the viewport in
inspect mode.
This video first shows that DOM nodes aren't selected in the DOM tree. Then when you enable this option, theElements panel selects the nodes on hover.
Show detailed inspect tooltip displays the tooltip in the viewport in
inspect mode as you hover over an element.
Show rulers on hover displays the rulers in the viewport as you hover over elements in the DOM tree.
Show CSS documentation tooltip displays a tooltip with a short description when you hover over a property in theStyles pane.
TheLearn more link takes you anMDN CSS Reference on the property.
Network
This section lists options that customize theNetwork panel. Most of the options are the same as in the panel's settings.
Preserve log is the same asPreserve log in theNetwork 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 is the same as
Record network log in theNetwork panel. Starts or stops recording requests in the network log.
Enable network request blocking blocks requests that match patterns in theNetwork request blocking drawer.
This video first shows that the requests aren't blocked. Then, after you enable this option, a pattern in theNetwork request blocking drawer blocks them.
Disable cache (while DevTools is open) is the same asDisable cache in theNetwork panel. Disables browser cache.
Allow to generate HAR with sensitive data adds options to theExport HAR button that let you export with or without sensitive data (sanitized).
Sensitive data is the data inCookie,Set-Cookie, andAuthorization headers.
Color-code resource types highlights requests in different colors depending on their type in theWaterfall column of the network log.
Group network log by frame is the same asGroup by frames in theNetwork panel. This option groups requests initiated by inline frames.
Force ad blocking on this site blocksdetected ads on the page while DevTools is open.
Performance
This section lists options that customize thePerformance panel.
Flamechart mouse wheel action
assigns scroll or zoom action to your mouse wheel when you navigate the flame chart.
This example shows both scroll and zoom mouse wheel actions on a flame chart in thePerformance panel.
Console
This section lists options that customize theConsole. Most of the options are the same as inConsole Settings.
Hide network messages hides network messages in theConsole.
This video shows how to hide network messages with this option both in
Settings and inConsole Settings.
Selected context only makes theConsole show messages only for the selected context: top, iframe, worker, or extension.
This video shows how to enable this option both in
Settings and inConsole > Settings and select the context in theConsole.
Log XMLHttpRequests makes theConsole log XHR and fetch requests.
This video shows how to enable this option both in
Settings andConsole > Settings and log theXHR finished loading messages to theConsole.
Show timestamps makes theConsole show timestamps next to messages.
Autocomplete from history makes theConsole suggest commands you ran earlier as you type.
You can find the same option inConsole > Settings.
Accept autocomplete suggestion on Enter makes theConsole accept the selected suggestion from the autocomplete drop-down when you pressEnter.
This video shows what happens when you pressEnter before and after enabling this option.
Group similar messages in console makes theConsole group similar messages together.
You can find the same option inConsole > Settings.
Show CORS errors in console makes theConsole show theCORS errors it logged.
You can find the same option inConsole > Settings.
Eager evaluation makes theConsole show a preview of an output as you type a command.
You can find the same option inConsole > Settings.
This video shows various output previews.
Treat code evaluation as user action turns any command you run in theConsole into user interaction.
In other words, it setsnavigator.userActivation.isActive totrue upon evaluation. You can find the same option inConsole > Settings.
This video shows the evaluation result ofnavigator.userActivation.isActive before and after enabling this option.
Automatically expand console.trace() messages makes theConsole display expandedconsole.trace() messages when it logs them.
Preserve log upon navigation makes theConsole log aNavigated to message upon every navigation and save logs across all pages.
You can find the same option inConsole > Settings.
Extension
This section lists options that customize link handling for Chrome DevTools extensions.
Link handling
sets an option to open files with when you click a link to a source file, for example, in theElements >Styles pane.
Persistence
This section lists options that control how DevTools saves the changes you make.
Enable local overrides makes DevTools persist changes you make to sources across page loads.
For more information, seeLocal Overrides.
Debugger
This section lists options that control theDebugger behavior.
Disable JavaScript lets you see how your web page looks and behaves whenJavaScript 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
icon in the address bar and DevTools shows a warning
icon next toSources.
Disable async stack traces hides the "full story" of the async operation in theCall Stack.
By default, theDebugger tries to trace async operations if the framework you're using supports such tracing.
For more information, seeView async stack traces.
Global
This section lists options that have global effects in DevTools.
Auto-open DevTools for popups opens DevTools when you click links that open new tabs. That is, all links withtarget=_blank.
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 pressEnter.
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 pressEnter.
Sync
This section lets you set up the synchronization of settings between devices.
Enable settings sync lets you sync DevTools settings across multiple devices.
To use this setting, firstenable Chrome Sync. For more information, seeSync settings.
Except as otherwise noted, the content of this page is licensed under theCreative Commons Attribution 4.0 License, and code samples are licensed under theApache 2.0 License. For details, see theGoogle Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.
Last updated 2024-07-16 UTC.