updated the settings doc to include the latest settings in the list.
This commit is contained in:
Jared Williams
Родитель
5bfdf4ed7a
Коммит
5bbd92697a
|
|
@ -57,7 +57,6 @@
|
|||
}
|
||||
</style>
|
||||
|
||||
|
||||
<strong>
|
||||
<ul>
|
||||
<li><a href="#general">General</a>
|
||||
|
|
@ -189,6 +188,8 @@
|
|||
<p>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.</p>
|
||||
|
||||
|
||||
<h4>Force accelerated compositing</h4>
|
||||
|
||||
<h4>Show composited layer borders</h4>
|
||||
<p>This highlights where layers are on-screen. Use this to <a href="http://www.html5rocks.com/en/tutorials/speed/layers/">accelerate render times</a> 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.</p>
|
||||
|
||||
|
|
@ -223,6 +224,9 @@
|
|||
</div>
|
||||
|
||||
|
||||
<h4>Show potential scroll bottlenecks</h4>
|
||||
|
||||
|
||||
<h3 id="sources">Sources</h3>
|
||||
|
||||
<h4>Search in content scripts</h4>
|
||||
|
|
@ -237,6 +241,9 @@
|
|||
<p class="note"><strong>Note:</strong> 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.</p>
|
||||
|
||||
|
||||
<h4>Enable JS source maps</h4>
|
||||
|
||||
|
||||
<h4>Enable source maps</h4>
|
||||
<p>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 <a href="https://developers.google.com/chrome-developer-tools/docs/javascript-debugging#source-maps">debugging JavaScript</a> and <a href="http://www.youtube.com/watch?v=HijZNR6kc9A#t=1m32s">working with Source maps</a> in general.</p>
|
||||
|
||||
|
|
@ -244,32 +251,28 @@
|
|||
<img src="settings-files/source-maps.png">
|
||||
</div>
|
||||
|
||||
<h4 id="css-source-maps">Enable CSS source maps</h4>
|
||||
|
||||
<h4 id="css-source-maps">Enable CSS source maps</h4>
|
||||
<p>Enables Source Maps for CSS files generated using a preprocessor (for example, Sass).</p>
|
||||
|
||||
<p>For details see <a href="/chrome-developer-tools/docs/css-preprocessors">Working with CSS Preprocessors</a>.</p>
|
||||
|
||||
<aside class="note"><strong>Note:</strong> In Chrome 29 and earlier, this is experimental setting called
|
||||
<b>Support for Sass</b> or <b>Sass stylesheet debugging</b>. The experimental setting is not visible unless
|
||||
the <strong>Sass stylesheet debugging</strong> experiment is enabled.</aside>
|
||||
<b>Support for Sass</b> or <b>Sass stylesheet debugging</b>. The experimental setting is not visible unless the <strong>Sass stylesheet debugging</strong> experiment is enabled.</aside>
|
||||
|
||||
<h4>Auto-reload generated CSS</h4>
|
||||
|
||||
<p>Only used if <b>Enable CSS source maps</b> is turned on. Determines whether generated CSS files should
|
||||
be reloaded when the source file is saved.</p>
|
||||
<p>Only used if <b>Enable CSS source maps</b> is turned on. Determines whether generated CSS files should be reloaded when the source file is saved.</p>
|
||||
|
||||
<p>For details see <a href="/chrome-developer-tools/docs/css-preprocessors">Working with CSS Preprocessors</a>.</p>
|
||||
|
||||
<aside class="note"><p><strong>Note:</strong> In Chrome 29 and earlier this appears as
|
||||
<b>Auto-reload CSS on Sass save</b>, and is
|
||||
not visible unless the <strong>Sass stylesheet debugging</strong> experiment is enabled.</p>
|
||||
<p>An additional setting,
|
||||
<strong>Timeout</strong> specifies the delay in milliseconds between the time you update a source file and the time
|
||||
the browser reloads the generated CSS file. The timeout is no longer required in Chrome 30.</p></aside>
|
||||
<aside class="note">
|
||||
<p><strong>Note:</strong> In Chrome 29 and earlier this appears as <b>Auto-reload CSS on Sass save</b>, and is not visible unless the <strong>Sass stylesheet debugging</strong> experiment is enabled.</p>
|
||||
|
||||
<h4>Indentation</h4>
|
||||
<p>An additional setting, <strong>Timeout</strong> specifies the delay in milliseconds between the time you update a source file and the time the browser reloads the generated CSS file. The timeout is no longer required in Chrome 30.</p>
|
||||
</aside>
|
||||
|
||||
<h4>Detect Indentation</h4>
|
||||
<p>Specifies how code is indented when editing in DevTools:</p>
|
||||
|
||||
<ul>
|
||||
|
|
@ -279,26 +282,18 @@
|
|||
<li>Tab character</li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
<h4>Show whitespace characters</h4>
|
||||
<p>This will show dots for spaces and tab characters in the Sources panel.</p>
|
||||
|
||||
|
||||
<h3 id="profiler">Profiler</h3>
|
||||
|
||||
<h4>Show objects' hidden properties</h4>
|
||||
<h4>Show advanced heap snapshot properties</h4>
|
||||
<p></p>
|
||||
|
||||
<h4>High resolution CPU profiling</h4>
|
||||
<p>Enables you to zoom into the graph to view it by a tenth of a millisecond on Flame charts.</p>
|
||||
|
||||
<h4 id="uninstrumented-native-memory">Show uninstrumented native memory</h4>
|
||||
<p>This setting will be visible on the main Settings pane when the <a href="#native-memory-profiling">Native memory profiling experiment</a> is enabled. When you capture native memory distribution you may choose to <strong>Show the uninstrumented native memory</strong> that is used which is not within the JavaScript heap.</p>
|
||||
|
||||
<div class="screenshot">
|
||||
<img src="settings-files/uninstrumented-native-memory.png">
|
||||
</div>
|
||||
|
||||
<p>The gray bars in the chart show the uninstrumented native memory being used.</p>
|
||||
|
||||
<h3 id="timeline">Timeline</h3>
|
||||
|
||||
|
|
@ -322,11 +317,9 @@
|
|||
|
||||
<h3 id="console">Console</h3>
|
||||
|
||||
|
||||
<h4>Log XMLHttpRequests</h4>
|
||||
<p>Display XHR request objects in the console which expand to show details of the request.</p>
|
||||
|
||||
|
||||
<h4>Preserve log upon navigation</h4>
|
||||
<p>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.</p>
|
||||
|
||||
|
|
@ -372,15 +365,13 @@
|
|||
|
||||
<p class="note"><strong>Note:</strong> You must enable this feature in the Settings pane > <a href="#portfowarding">Experiments tab</a> to be able to use it. Once enabled, you will be able to access the Port Forwarding tab in the Settings pane.</p>
|
||||
|
||||
<p>See <a href="/chrome-developer-tools/docs/remote-debugging#reverse-port-forwarding">Reverse Port Forwarding</a>
|
||||
for more information.</p>
|
||||
<p>See <a href="/chrome-developer-tools/docs/remote-debugging#reverse-port-forwarding">Reverse Port Forwarding</a> for more information.</p>
|
||||
|
||||
|
||||
<h2 id="experiments">Experiments</h2>
|
||||
|
||||
|
||||
<p class="special"><strong>These are experimental features which are actively developed.</strong> 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. </p>
|
||||
|
||||
|
||||
<p>To enable the Experiments tab of the Settings pane you need to navigate to <code>about:flags</code> and scroll down to the <strong>Experimental Developer Tools experiments</strong> flag. Enable it then restart the browser.</p>
|
||||
|
||||
<div class="screenshot">
|
||||
|
|
@ -442,8 +433,9 @@
|
|||
|
||||
<p>For details see <a href="/chrome-developer-tools/docs/css-preprocessors">Working with CSS Preprocessors</a>.</p>
|
||||
|
||||
<aside class="note"><strong>Note:</strong> In Chrome 30 and later, this setting is no longer experimental.
|
||||
See <a href="#css-source-maps"><b>Enable CSS source maps</b></a> in the <b>General</b> settings.</aside>
|
||||
<aside class="note">
|
||||
<strong>Note:</strong> In Chrome 30 and later, this setting is no longer experimental. See <a href="#css-source-maps"><b>Enable CSS source maps</b></a> in the <b>General</b> settings.
|
||||
</aside>
|
||||
|
||||
<h4>CSS Regions Support</h4>
|
||||
<p><a href="http://dev.w3.org/csswg/css3-regions/">CSS Regions</a> allows a block of semantically marked-up text to automatically flow into elements. Turn this setting on to <a href="http://www.html5rocks.com/en/tutorials/regions/adobe/">start making use</a> of this feature.</p>
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче