and open up the Settings pane to make changes.- To modify the Settings in DevTools: -
and open up the Settings pane to make changes.+ To modify the Settings in DevTools: +
and open up the General Settings pane to make changes. You can also use the shortcut ? to open to this pane.
-
+ Prevents the caching of resources ONLY for pages which have DevTools open. This will not disable caching if the DevTools are closed.
+Prevents the caching of resources ONLY for pages which have DevTools open. This will not disable caching if the DevTools are closed.
-Immediately suspends all JavaScript from running on the tab running the instance of DevTools which has this checked.
+Immediately suspends all JavaScript from running on the tab running the instance of DevTools which has this checked.
+Note: Both the Disable cache and Disable JavaScript settings will ONLY apply when DevTools is open. When it is open, for the page which has the DevTools open.
-Note: Both the Disable cache and Disable JavaScript settings will ONLY apply when DevTools is open. When it is open, for the page which has the DevTools open.
+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.
-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.
-Note: Enabling this may cause conflicts with shortcut keys that are used by other applications.
+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.
-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.
+
+
- #DAC0DErgb(128, 255, 255)hsl(300, 80%, 90%)#DAC0DErgb(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.
-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.
-Selecting As authored will use the color format for properties as defined in the stylesheet.
+You may find it useful to show user agent styles in the Styles Sidebar of the Elements panel.
-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.
-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.
-As with any text editor you can choose to wrap long lines of code in the Elements panel.
+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.
-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.
+
+
- This will display a ruler overlay along the top, left and bottom sides of the viewport.
+
+ This will display a ruler overlay along the top, left and bottom sides of the viewport.
-
- + When this is enabled you be able to see the regions where Chrome paints. This can help diagnose and ultimately avoid unnecessary paints on a page. You can also use this to study painting behaviors just by hovering over links, popups, or some content which dynamically updates. +
+
+ - When this is enabled you be able to see the regions where Chrome paints. This can help diagnose and ultimately avoid unnecessary paints on a page. You can also use this to study painting behaviors just by hovering over links, popups, or some content which dynamically updates. -
+Furthermore, showing paint rectangles shows repainted areas for each frame making it easy to visualize what slows pages down. Ideally you want to keep the number of areas being repainted as low as possible.
-
- Furthermore, showing paint rectangles shows repainted areas for each frame making it easy to visualize what slows pages down. Ideally you want to keep the number of areas being repainted as low as possible.
+This highlights where layers are on-screen. Use this to accelerate render times in Chrome. It can help to reduce the time it takes to render elements which may be animating or have CSS transforms/transitions applied to them that change the shape or positioning of the element.
+Note: The blue grid represents tiles, which you can think of as sub-units of a layer that Chrome uses to upload parts of a large layer at a time to the GPU. They aren't really too important in most cases.
-This highlights where layers are on-screen. Use this to accelerate render times in Chrome. It can help to reduce the time it takes to render elements which may be animating or have CSS transforms/transitions applied to them that change the shape or positioning of the element.
+
+ Note: The blue grid represents tiles, which you can think of as sub-units of a layer that Chrome uses to upload parts of a large layer at a time to the GPU. They aren't really too important in most cases.
+Enabling Show paint rectangles and Show layer borders together can also be useful for finding any unnecessary paints which occur and cause a relayout on the Timeline panel.
-
- Enabling Show paint rectangles and Show layer borders together can also be useful for finding any unnecessary paints which occur and cause a relayout on the Timeline panel.
+Note: Show paint rectangles and composited layer borders settings will only apply when DevTools is open.
-Note: Show paint rectangles and composited layer borders settings will only apply when DevTools is open.
+Overlays an FPS meter at the top right of the browser window which updates in real-time.
+
+ 
+ Overlays an FPS meter at the top right of the browser window which updates in real-time.
+When running Chrome on Android you may also show a GPU memory meter as part of the overlay. Enabling the FPS meter is specially helpful when developing pages that have animations.
-
-
- This is a tool that helps you identify elements on the page which are costly. The page will continuously repaint, showing a counter of how much painting work is happening. Then, you can hide elements and mutate styles, watching the counter, in order to figure out what is slow.
-When running Chrome on Android you may also show a GPU memory meter as part of the overlay. Enabling the FPS meter is specially helpful when developing pages that have animations.
+
+ Shows area of the page that slow down scrolling. Touch and mousewheel event listeners can delay scrolling. Some areas need to repaint their content when scrolled.
-This is a tool that helps you identify elements on the page which are costly. The page will continuously repaint, showing a counter of how much painting work is happening. Then, you can hide elements and mutate styles, watching the counter, in order to figure out what is slow.
-
- Content scripts are JavaScript files contained within Chrome extensions that run in the context of web pages but from a protected scope that is completely separate from ordinary page JavaScript. As such, content scripts and page scripts cannot interact with each other in an ordinary way.
-
+ Content scripts are JavaScript files contained within Chrome extensions that run in the context of web pages but from a protected scope that is completely separate from ordinary page JavaScript. As such, content scripts and page scripts cannot interact with each other in an ordinary way.
+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 enabling this setting is so you can search within these native API scripts is useful, otherwise it is not useful having it enabled.
-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.
+If you have code which is concatenated and minified it is difficult to tell what file a piece of code may be in when you need to debug it. Enabling this setting is useful for debugging JavaScript and working with Source maps in general.
-Note: When developing Chrome apps or extensions enabling this setting is so you can search within these native API scripts is useful, otherwise it is not useful having it enabled.
+
+ Enables Source Maps for CSS files generated using a preprocessor (for example, Sass).
-If you have code which is concatenated and minified it is difficult to tell what file a piece of code may be in when you need to debug it. Enabling this setting is useful for debugging JavaScript and working with Source maps in general.
+For details see Working with CSS Preprocessors.
-
- Enables Source Maps for CSS files generated using a preprocessor (for example, Sass).
+Only used if Enable CSS source maps is turned on. Determines whether generated CSS files should be reloaded when the source file is saved.
-For details see Working with CSS Preprocessors.
+ -Specifies how code is indented when editing in DevTools:
-Only used if Enable CSS source maps is turned on. Determines whether generated CSS files should - be reloaded when the source file is saved.
+For details see Working with CSS Preprocessors.
+This will show dots for spaces and tab characters in the Sources panel.
- -Specifies how code is indented when editing in DevTools:
-Enables you to zoom into the graph to view it by a tenth of a millisecond on Flame charts.
+This will show dots for spaces and tab characters in the Sources panel.
+Enabling this setting will display the CPU activity in the ruler and appear as gray bars along the bottom of the timeline chart. When you hover over the gray bars you will see the details of the CPU activity for it, with just that bar highlighted.
+
+ 30Controls the depth of the stack retrieved from the Timeline Events that are produced within JavaScript. Most of the time, the overhead associated with collecting the stack is negligible. However, for certain pages with long script URLs and deep call stacks, collecting stacks may skew the performance of the page or result in a very large logs. So you can reduce the performance impact by tweaking the number of stack frames we capture and display with each event.
+Note: Setting the option to 0 will entirely turn off stack sampling.
-This setting will be visible on the main Settings pane when the Native memory profiling experiment is enabled. When you capture native memory distribution you may choose to Show the uninstrumented native memory that is used which is not within the JavaScript heap.
-
- The gray bars in the chart show the uninstrumented native memory being used.
+Display XHR request objects in the console which expand to show details of the request.
-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.
-Enabling this setting will display the CPU activity in the ruler and appear as gray bars along the bottom of the timeline chart. When you hover over the gray bars you will see the details of the CPU activity for it, with just that bar highlighted.
+Note: Both of these settings can be changed by right clicking on the console.
-
- 
+ 30Controls the depth of the stack retrieved from the Timeline Events that are produced within JavaScript. Most of the time, the overhead associated with collecting the stack is negligible. However, for certain pages with long script URLs and deep call stacks, collecting stacks may skew the performance of the page or result in a very large logs. So you can reduce the performance impact by tweaking the number of stack frames we capture and display with each event.
+a panel chosen automatically
+
- Note: Setting the option to 0 will entirely turn off stack sampling.
+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).
-Display XHR request objects in the console which expand to show details of the request.
+
+ 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.
-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.
+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.
-Note: Both of these settings can be changed by right clicking on the console.
-
- 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.
- - -Port Forwarding allows you to create a TCP port listener on your device which you can map to a TCP port on your development machine.
- -Device port: 8080
Target: 127.0.0.1
Using this feature you are also able to make use of Workspaces and the DevTools editor in Sources while viewing the changes on your device, and all of the DevTools features as well.
- -To do this, you simply set the device port to the port number you want, and set the target to be the host machine's IP address (localhost would be 127.0.0.1). Then on your device, visit localhost:9000 and you will have access to the DevTools for the device on your local machine.
- -Note: You must enable this feature in the Settings pane > Experiments tab to be able to use it. Once enabled, you will be able to access the Port Forwarding tab in the Settings pane.
- -See Reverse Port Forwarding - for more information.
- -These are experimental features which are actively developed. It is entirely possible for them to break because of this. Due to how frequently these features change, any documentation explaining how an experimental feature functions or its usage may not be entirely up-to-date.
- - -To enable the Experiments tab of the Settings pane you need to navigate to about:flags and scroll down to the Experimental Developer Tools experiments flag. Enable it then restart the browser.
- Once Chrome re-opens, open up the Settings pane > Experiments tab that is now available.
- - -With the Native memory profiling experiment enabled, two additional profiling tools will be available on the Profiles panel which you can use to take native heap snapshots and also capture native memory distribution.
- -With these you can get a better understanding of how the render process is consuming memory which may not be within the V8 heap. It lets you know how much memory is used by the major components in your app; CSS, DOM, the render tree, fonts, images, JavaScript heap and so on.
- -
- The native heap snapshot option works much the same as the regular heap snapshot profiler does only it shows you the native memory heap. This includes anything consuming memory which may not be within the V8 heap (Chrome JavaScript engine).
- -Once you capture the native memory distribution you can determine what is using a lot of memory whether it is your Page structures or other resources that are being loaded and using memory.
- -
- Note: An additional option to Show uninstrumented native memory is added to the main Settings pane when this Experiment is turned on.
- -The DevTools heap profiler tool is helpful for finding memory leaks but it is limited to memory which is allocated in the V8 heap only. The DOM tree may be consuming a lot of memory while the heap remains small. In cases like this the heap profiler will not be very helpful.
- - -This setting replaces the DOM counters view on the Timeline panel when viewing the Memory section with a dynamic memory distribution graph. - - -
- Note: Enabling this feature may have a significant performance impact at the time of writing this, so use with caution.
- - -Allows you to capture a single canvas frame so you can inspect all the draw function calls that are made in during that frame.
- -
- Enables source maps for CSS files generated using a preprocessor (for example, Sass).
- -For details see Working with CSS Preprocessors.
- - - -CSS Regions allows a block of semantically marked-up text to automatically flow into elements. Turn this setting on to start making use of this feature.
- - -When this is checked the Overrides tab will then be accessible by simply clicking on the Settings cog and selecting Overrides from the drawer menu that pops up. When this option is not checked the Overrides tab can be accessed via the Settings pane.
- -
- With this setting enabled you will be able to access the Settings pane > Port Forwarding tab which provides to you some extra features that can be especially helpful when developing on mobile devices.
- - -When toggling the Console on other panels using the Esc shortcut key, this setting will make it overlay on top of other parts of the panel rather than push everything up and decrease the vertical space in the panel. It is especially useful on the Elements panel when the DevTools are docked-to-right.
- - -Will add to the Profiles panel and addition tool for Object allocation tracking within the V8 heap. With this feature you are able see to if any retained references to objects not picked up by garbage collection (GC) causing your site to leak memory and become unperformant.
- - -When working in the Sources panel use Cmd + Space to show autocomplete options.
- - +