From 5bbd92697af0716d5a689728a7ca235b3fadd7fd Mon Sep 17 00:00:00 2001 From: Jared Williams Date: Mon, 18 Nov 2013 02:29:16 -0500 Subject: [PATCH] updated the settings doc to include the latest settings in the list. --- docs/settings.html | 608 ++++++++++++++++++++++----------------------- 1 file changed, 300 insertions(+), 308 deletions(-) diff --git a/docs/settings.html b/docs/settings.html index 7bddf8d..7cffebf 100644 --- a/docs/settings.html +++ b/docs/settings.html @@ -8,476 +8,468 @@ - + - - + + + -

- To modify the Settings in DevTools: -

-

+

+ To modify the Settings in DevTools: +

+

-
- -
+
+ +
-

General

+

General

-

Disable cache

-

Prevents the caching of resources ONLY for pages which have DevTools open. This will not disable caching if the DevTools are closed.

+

Disable cache

+

Prevents the caching of resources ONLY for pages which have DevTools open. This will not disable caching if the DevTools are closed.

-

Disable JavaScript

-

Immediately suspends all JavaScript from running on the tab running the instance of DevTools which has this checked.

+

Disable JavaScript

+

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.

-

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.

+

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.

+

Note: Enabling this may cause conflicts with shortcut keys that are used by other applications.

-

Appearance

+

Appearance

-

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.

+

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.

-
- -
+
+ +
-

Elements

+

Elements

-

Color format

- +

Color format

+ -
- -
+
+ +
-

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.

-

Show user agent styles

-

You may find it useful to show user agent styles in the Styles Sidebar of the Elements panel.

+

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.

+

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.

-

Word wrap

-

As with any text editor you can choose to wrap long lines of code in the Elements panel.

+

Word wrap

+

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.

+

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.

-
- -
+
+ +
- + -

Show rulers

-

This will display a ruler overlay along the top, left and bottom sides of the viewport.

+

Show rulers

+

This will display a ruler overlay along the top, left and bottom sides of the viewport.

-
- -
+
+ +
-

Rendering

+

Rendering

-

Show paint rectangles

-

- 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. -

+

Show paint rectangles

+

+ 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.

-

Show composited layer borders

-

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.

+

Force accelerated compositing

-

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.

+

Show composited layer borders

+

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.

-

Show FPS meter

-

Overlays an FPS meter at the top right of the browser window which updates in real-time.

-
- - -
+

Show FPS meter

+

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.

+
+ + +
+

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.

-

Enable continuous page repainting

-

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.

-
- -
+

Enable continuous page repainting

+

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.

+
+ +
-

Sources

-

Search in content scripts

-

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.

+

Show potential scroll bottlenecks

-
- -
-

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.

+

Sources

-

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.

+

Search in content scripts

+

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.

+
+ +
-

Enable source maps

-

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.

+

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.

-

Enable CSS source maps

-

Enables Source Maps for CSS files generated using a preprocessor (for example, Sass).

+

Enable JS source maps

-

For details see Working with CSS Preprocessors.

- +

Enable source maps

+

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.

-

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.

-

For details see Working with CSS Preprocessors.

+

Enable CSS source maps

+

Enables Source Maps for CSS files generated using a preprocessor (for example, Sass).

- +

For details see Working with CSS Preprocessors.

-

Indentation

+ -

Specifies how code is indented when editing in DevTools:

+

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.

+

For details see Working with CSS Preprocessors.

+ +

Detect Indentation

+

Specifies how code is indented when editing in DevTools:

-

Profiler

+ -

Show objects' hidden properties

-

+

Show whitespace characters

+

This will show dots for spaces and tab characters in the Sources panel.

-

Show uninstrumented native memory

-

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.

+

Profiler

-
- -
+

Show advanced heap snapshot properties

+

-

The gray bars in the chart show the uninstrumented native memory being used.

+

High resolution CPU profiling

+

Enables you to zoom into the graph to view it by a tenth of a millisecond on Flame charts.

-

Timeline

-

Show CPU activity on the ruler

-

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.

+

Timeline

-
- -
+

Show CPU activity on the ruler

+

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.

-

Limit number of captured JS stack frames

- +
+ +
-

Controls 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.

+

Limit number of captured JS stack frames

+ +

Controls 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.

+

Note: Setting the option to 0 will entirely turn off stack sampling.

-

Console

+

Console

-

Log XMLHttpRequests

-

Display XHR request objects in the console which expand to show details of the request.

+

Log XMLHttpRequests

+

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.

-

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.

-

Note: Both of these settings can be changed by right clicking on the console.

+
+ +
-
- -
+

Extensions

-

Extensions

+ Open links in: a panel chosen automatically +

- Open links in: a panel chosen automatically -

+

Workspace

-

Workspace

+

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.

-

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).

-

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.

-

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.

-

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

-

Port forwarding

+

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.

-

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

-

Device port: 8080

+

Target: 127.0.0.1

-

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.

-

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.

-

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.

-

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.

-

See Reverse Port Forwarding - for more information.

-

Experiments

+

Experiments

+

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.

-

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.

+
+ +
-

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.

-
- -
-

Once Chrome re-opens, open up the Settings pane > Experiments tab that is now available.

+

Native memory profiling

+

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.

-

Native memory profiling

-

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.

-

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.

-

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.

+

Native memory timeline

+

This setting replaces the DOM counters view on the Timeline panel when viewing the Memory section with a dynamic memory distribution graph. -

Native memory timeline

-

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.

-
- -
-

Note: Enabling this feature may have a significant performance impact at the time of writing this, so use with caution.

+

Canvas inspection

+

Allows you to capture a single canvas frame so you can inspect all the draw function calls that are made in during that frame.

+
+ +
-

Canvas inspection

-

Allows you to capture a single canvas frame so you can inspect all the draw function calls that are made in during that frame.

+ -
- -
- +

Sass stylesheet debugging

+

Enables source maps for CSS files generated using a preprocessor (for example, Sass).

-

Sass stylesheet debugging

+

For details see Working with CSS Preprocessors.

-

Enables source maps for CSS files generated using a preprocessor (for example, Sass).

+ -

For details see Working with CSS Preprocessors.

+

CSS Regions Support

+

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.

- -

CSS Regions Support

-

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.

+

Show Overrides in drawer

+

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.

-

Show Overrides in drawer

+
+ +
-

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.

-
- -
+

Enable toolbar customization

+

-

Enable toolbar customization

-

+

Enable port forwarding

+

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.

-

Enable port forwarding

-

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.

+

Open console as overlay

+

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.

-

Open console as overlay

-

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.

+

Enable heap objects tracking profile type

+

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.

-

Enable heap objects tracking profile type

-

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.

+

Enable text editor autocompletion

+

When working in the Sources panel use Cmd + Space to show autocomplete options.

- -

Enable text editor autocompletion

-

When working in the Sources panel use Cmd + Space to show autocomplete options.

- -

Back to top

+

Back to top