The DevTools docs have moved! For the latest tutorials, docs and updates head over to the new home of Chrome DevTools.
To modify the Settings in DevTools:
- Click on the Settings cog and open up the General Settings pane to make changes. Alternatively, you can use the shortcut ? to open to Settings pane too.
Prevents the caching of resources ONLY for pages which have DevTools open. This will not disable caching if the DevTools are closed.
Enable Ctrl + 1-9 shortcuts to switch panels
You are able to use Ctrl + 1-9 shortcuts to jump to specific tabs in Chrome when multiple tabs are open, with tabs 1-8 and 9 being the last tab if more than 9 are open. This setting will enable DevTools to function in the same way, so you are able to switch between panels quickly.
Note: Enabling this may cause conflicts with shortcut keys that are used by other applications.
Split panels vertically when docked to right
Enabling this will change the layout of the panels so the main section is stacked on top of the sidebar sections. You may find this useful when there is not enough horizontal space when they are side-by-side which is the case for smaller screens.
- As authored - (how the code was written in the stylesheet)
rgb(128, 255, 255)
hsl(300, 80%, 90%)
The color format setting lets you control how the color codes are displayed in the Styles Sidebar of the Elements panel. In addition to the Settings option for controlling the color format, you can click on the gear icon at the top of the Styles Sidebar to change the format of color codes.
Selecting As authored will use the color format for properties as defined in the stylesheet.
Show user agent styles
You may find it useful to show user agent styles in the Styles Sidebar of the Elements panel.
The user agent refers to the browser. Each browser implements a default stylesheet consisting of basic style rules which are applied to DOM Elements in a page. If you've ever had a difficult time removing white-space between two elements, for example, it may have been because of the user agent stylesheet adding a default margin or padding to that particular type of element.
As with any text editor you can choose to wrap long lines of code in the Elements panel.
Show Shadow DOM
With Shadow DOM, elements can get a new kind of node associated with them. This new kind of node is called a shadow root. An element that has a shadow root associated with it is called a shadow host. The child nodes of a shadow host isn't rendered; the content of the shadow root is rendered instead.
- Shadow DOM 201
- Shadow DOM 301
- Shadow DOM Polyfill
- Visualizing Shadow DOM Concepts
- Define presentational boxes using shadow DOM
This will display a ruler overlay along the top, left and bottom sides of the viewport.
Search in content scripts
When looking at the Content Scripts tab in the Sources panel you will see both the scripts added by extensions (or by User Scripts which are compiled into extensions in Chrome), and also content scripts that are built-in parts of the browser, specifically the API that extensions can use.
Note: When developing Chrome apps or extensions enable this setting so you can search within these native API scripts, otherwise it is not useful having it enabled.
Enable JS source maps
Enable CSS source maps
Enables Source Maps for CSS files generated using a preprocessor (for example, Sass).
For details see Working with CSS Preprocessors.
Auto-reload generated CSS
Only used if Enable CSS source maps is turned on. Determines whether generated CSS files should be reloaded when the source file is saved.
Specifies how code is indented when editing in DevTools:
- 2 spaces
- 4 spaces
- 8 spaces
- Tab character
Show whitespace characters
This will show dots for spaces and tab characters in the Sources panel.
High resolution CPU profiling
Enables you to zoom into the graph to view it by a tenth of a millisecond on Flame charts.
Display XHR request objects in the console which expand to show details of the request.
Preserve log upon navigation
When navigating through multiple pages of a site you may choose to not clear the console logs with each page load so you can view the history of output across pages.
Note: Both of these settings can be changed by right clicking on the console.
ExtensionsOpen links in:
a panel chosen automatically
Workspaces allow you to select custom directories in your file system which are always available for you to edit within the Sources panel. This can be one specific project directory or a directory that contains multiple different projects within it.
To use this feature it open the Workspaces tab via the Settings pane. Here you will see an Add Folder link allowing you to add local directories for editing (eg: project root directories).
Once you've added a folder directory, you will be able to view, edit and save changes to files within it anytime you are working in the Sources panel. All changes to files will persist down to local file contained in directory.
In addition to adding a file system for your Workspace, you are also able to add file Mappings individual file urls to the path of the file on your local machine.