merged
This commit is contained in:
Jared Williams
Коммит
c2d69146ce
11
_book.yaml
11
_book.yaml
|
|
@ -18,11 +18,8 @@ toc:
|
|||
section:
|
||||
- title: "Demo: Finding Forced Synchronous Layouts"
|
||||
path: /chrome-developer-tools/docs/demos/too-much-layout
|
||||
- title: "Profiling JavaScript Performance"
|
||||
- title: "Profiling JavaScript"
|
||||
path: /chrome-developer-tools/docs/cpu-profiling
|
||||
section:
|
||||
- title: "Flame Chart"
|
||||
path: /chrome-developer-tools/docs/flame-chart
|
||||
- title: "JavaScript Memory Profiling"
|
||||
path: /chrome-developer-tools/docs/javascript-memory-profiling
|
||||
section:
|
||||
|
|
@ -53,7 +50,9 @@ toc:
|
|||
path: /chrome-developer-tools/docs/tips-and-tricks
|
||||
- title: "Settings"
|
||||
path: /chrome-developer-tools/docs/settings
|
||||
- title: "Remote Debugging on Android"
|
||||
- title: "Rendering Settings"
|
||||
path: /chrome-developer-tools/docs/rendering-settings
|
||||
- title: "Remote Debugging Chrome on Android"
|
||||
path: /chrome-developer-tools/docs/remote-debugging
|
||||
section:
|
||||
- title: "Debugging Protocol"
|
||||
|
|
@ -146,6 +145,8 @@ toc:
|
|||
path: /chrome-developer-tools/docs/sample-extensions
|
||||
- title: "Sample Debugging Protocol Clients"
|
||||
path: /chrome-developer-tools/docs/debugging-clients
|
||||
- title: "DevTools Extensions Gallery"
|
||||
path: /chrome-developer-tools/docs/extensions-gallery
|
||||
- title: "Additional Resources"
|
||||
section:
|
||||
- title: "Creating A Clean Testing Environment"
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
{% include "chrome-developer-tools/_local_variables.html" %}
|
||||
<html devsite>
|
||||
<head>
|
||||
<title>Profiling JavaScript performance</title>
|
||||
<title>Profiling JavaScript Performance</title>
|
||||
<meta name="project_path" value="/chrome-developer-tools/_project.yaml" />
|
||||
<meta name="book_path" value="/chrome-developer-tools/_book.yaml" />
|
||||
</head>
|
||||
|
|
@ -15,18 +15,12 @@
|
|||
|
||||
<strong>
|
||||
<ul>
|
||||
<li><a href="#cpu-profiles">CPU Profiles</a>
|
||||
<li><a href="#flame-chart">Flame Chart</a></li>
|
||||
<li><a href="#cpu-profiles">Intro to JavaScript Profiling</a>
|
||||
<li><a href="#flame-chart">Using the Flame Chart</a></li>
|
||||
</ul>
|
||||
</strong>
|
||||
|
||||
|
||||
<h2 id="cpu-profiles">CPU Profiles</h2>
|
||||
|
||||
<p class="note"><b>Note:</b> If you are a Web Developer and want to get the
|
||||
latest version of DevTools, you should use the Google Chrome release
|
||||
from the <a href="http://dev.chromium.org/getting-involved/dev-channel">Developer
|
||||
Channel</a>.</p>
|
||||
<h2 id="cpu-profiles">Introduction to JavaScript Profiling</h2>
|
||||
|
||||
<p>Using Google Chrome, open the <a href="http://v8.googlecode.com/svn/data/benchmarks/v7/run.html" target=
|
||||
"_blank">V8 Benchmark Suite</a> page. Click the <strong>Start
|
||||
|
|
@ -81,7 +75,7 @@
|
|||
<p>The sidebar on the left lists your recorded profiles, the tree view on the right shows the information gathered for the selected profile.</p>
|
||||
|
||||
|
||||
<h2 id="flame-chart">Flame Chart</h2>
|
||||
<h2 id="flame-chart">Using the Flame Chart</h2>
|
||||
|
||||
<p>The Flame Chart view provides a visual representation of JavaScript processing over time, similar to those found in the Timeline and Network panels. Using the <strong>Flame Chart</strong> feature on the Details view after performing a <em>JavaScript & CPU profile</em>, you are able to view the profile data a few different ways.</p>
|
||||
|
||||
|
|
@ -174,4 +168,3 @@
|
|||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
|
|
|||
|
|
@ -53,6 +53,9 @@ CSS files. Then DevTools reloads the newly-generated CSS file. </p>
|
|||
<aside class="note">Changes made in an <em>external</em> editor are not detected by DevTools until the Sources tab
|
||||
containing the associated source file regains focus. Also, manual editing of a CSS file generated by the Sass/LESS/other compiler will break the source map association until the page is reloaded.</aside>
|
||||
|
||||
<aside class="note">If you're using Workspaces, you'll need to make sure the generated CSS file is also mapped into the workspace. You can verify this by looking in Sources panel right-side tree, and seeing the CSS is from your local folder.</aside>
|
||||
|
||||
|
||||
<h2 id="toc-requirements">Requirements</h2>
|
||||
|
||||
<p>There are a few requirements to note when working with a CSS preprocessor:</p>
|
||||
|
|
@ -111,10 +114,11 @@ enable automatic reloading of generated CSS files. </p>
|
|||
|
||||
<ul>
|
||||
<li>Sass: As described above, this is supported in the prerelease version of Sass.</li>
|
||||
<li>Compass: Uses Sass internally but doesn't support source maps yet. Support is scheduled for a future release. See <a href="https://github.com/chriseppstein/compass/issues/1293">Issue 1293</a>.</li>
|
||||
<li>Compass: <a href="https://github.com/chriseppstein/compass/blob/master/compass-style.org/content/CHANGELOG.markdown#100alpha16-12052013">Implemented in compass 1.0.0.alpha.16.</a>
|
||||
<li>Less: Implemented in 1.5.0. See <a href="https://github.com/less/less.js/issues/1050#issuecomment-25566463">issue #1050</a> for details and usage patterns.</li>
|
||||
<li>Autoprefixer: Implemented in 1.0. <a href="https://github.com/ai/autoprefixer#source-map">Autoprefixer docs</a> explain how to use it, along with absorbing an input sourcemap (from another preprocessor).</li>
|
||||
<li>Libsass: <a href="https://github.com/hcatlin/libsass/commit/366bc110c39c26c9267a1cc06e578beb94cd93ef">Implemented</a>.
|
||||
<li>Stylus: Under consideration. See <a href="https://github.com/LearnBoost/stylus/issues/1072">issue #1072</a>.</li>
|
||||
<li>Autoprefixer: In development. See <a href="https://github.com/ai/autoprefixer/issues/37">issue #37</a> where a fork with support is mentioned.</li>
|
||||
</ul>
|
||||
|
||||
<h2 id="toc-how-css-source-maps-work">How CSS source maps work</h2>
|
||||
|
|
|
|||
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 11 KiB |
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -1,102 +0,0 @@
|
|||
{% include "chrome-developer-tools/_local_variables.html" %}
|
||||
<html devsite>
|
||||
<head>
|
||||
<title>Flame Chart</title>
|
||||
<meta name="project_path" value="/chrome-developer-tools/_project.yaml" />
|
||||
<meta name="book_path" value="/chrome-developer-tools/_book.yaml" />
|
||||
</head>
|
||||
<body>
|
||||
<link rel="stylesheet" type="text/css" href="/chrome-developer-tools/css/local_extensions.css"/>
|
||||
|
||||
<style>
|
||||
body.docs div h4 { font-size: 111%; font-weight: bold; margin-bottom: 0; }
|
||||
img { max-width: 800px; }
|
||||
div.screenshot img { border: 1px solid #ccc; margin-top: 0; }
|
||||
.special {
|
||||
background-color: #F9E5E5;
|
||||
border-left-color: #C33;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
<p>The Flame Chart view provides a visual representation of JavaScript processing over time, similar to those found in the Timeline and Network panels. Using the <strong>Flame Chart</strong> feature on the Details view after performing a <em>JavaScript & CPU profile</em>, you are able to view the profile data a few different ways.</p>
|
||||
|
||||
<h2>Visualizing execution paths</h2>
|
||||
|
||||
<p>By analyzing and understanding function call progression visually you can gain a better understanding of the execution paths within your app.</p>
|
||||
|
||||
|
||||
<img src="flame-chart-files/flamechart00.png">
|
||||
<a href="http://letsfreecongress.com">http://letsfreecongress.com</a>
|
||||
|
||||
|
||||
<h2>Identifying outliers with color coding</h2>
|
||||
|
||||
<p>When zoomed out you can identify repetitive patterns that could be optimized, or more importantly, you're able to spot outliers or unexpected executions much easier.</p>
|
||||
|
||||
<img src="flame-chart-files/flamechart01.png">
|
||||
<a href="http://hellorun.helloenjoy.com/">http://hellorun.helloenjoy.com/</a>
|
||||
|
||||
|
||||
<h2>Visualizing JavaScript profiler data against a time scale (like Timeline)</h2>
|
||||
|
||||
<p>Other JavaScript profiling reports data that is aggregated <em>over time</em>, whereas the Flame Chart reports data <em>by time</em>. This means when you see events happen, you are able to drill into the time scale of them and really get some perspective on execution of JavaScript. For example, when you see big streaks of yellow in the Timeline, this is the perfect way to see the issue.</p>
|
||||
|
||||
<img src="flame-chart-files/flamechart02.png">
|
||||
<a href="http://hellorun.helloenjoy.com/">http://hellorun.helloenjoy.com/</a>
|
||||
|
||||
|
||||
<p>You may even want to do a Timeline recording simultaneously while you do a recording with the JavaScript Profiler. Here’s a snippet you can use to do this:</p>
|
||||
|
||||
<pre class="prettyprint">
|
||||
<code>(function() {
|
||||
console.timeline();
|
||||
console.profile();
|
||||
setTimeout(function() {
|
||||
console.timelineEnd();
|
||||
console.profileEnd();
|
||||
}, 3000);
|
||||
})();</code></pre>
|
||||
|
||||
<p class="note"><strong>Note</strong>: The horizontal axis is time and vertical axis is the call stack. Expensive functions are wide. Call stacks are represented on the Y axis, so a tall flame is not necessarily significant. Pay close attention to wide bars, no matter their position in the call stack.</p>
|
||||
|
||||
|
||||
<h2>How to use the Flame Chart:</h2>
|
||||
|
||||
<ol>
|
||||
<li>Open the DevTools and go to the Profiles panel.</li>
|
||||
<li>Choose <strong>Record JavaScript CPU profile</strong> and click <strong>Start</strong>.</li>
|
||||
<li>When you are done collecting data, click <strong>Stop</strong>.</li>
|
||||
</ol>
|
||||
|
||||
<p>In the profile view, select the Flame Chart visualization from the select menu at the bottom of the DevTools.</p>
|
||||
|
||||
<img src="flame-chart-files/flamechart03.jpg">
|
||||
|
||||
<p class="note"><strong>Note</strong>: For increased accuracy of profiling times enable <strong>High resolution CPU profiling</strong> in the DevTools flame-chart under Profiling. When enabled, you can zoom into the graph to view it by a tenth of a millisecond even.</p>
|
||||
|
||||
<p>Across the top of the panel is an overview that shows the entire recording. You can zoom in on a specific region of the overview by selecting it with your mouse as shown below, and you can also pan left and right by clicking on the white area and dragging your mouse. The Details view timescale shrinks accordingly.</p>
|
||||
|
||||
<img src="flame-chart-files/flamechart04.png">
|
||||
|
||||
<p>In the Details view, a <strong>call stack</strong> is represented as a stack of function "blocks". A block that sits atop another was called by the lower function block. Hovering over a given block displays its function name and timing data:</p>
|
||||
|
||||
<img src="flame-chart-files/flamechart05.jpg">
|
||||
|
||||
<ul>
|
||||
<li><strong>Name</strong> — The name of the function.</li>
|
||||
<li><strong>Self time</strong> — How long it took to complete the current invocation of the function, including only the statements in the function itself, not including any functions that it called.</li>
|
||||
<li><strong>Total time</strong> — The time it took to complete the current invocation of this function and any functions that it called.</li>
|
||||
<li><strong>Aggregated self time</strong> — Aggregate time for all invocations of the function across the recording, not including functions called by this function.</li>
|
||||
<li><strong>Aggregated total time</strong> — Aggregate total time for all invocations of the function, including functions called by this function.</li>
|
||||
</ul>
|
||||
|
||||
<img src="flame-chart-files/flamechart06.png">
|
||||
|
||||
<p>Clicking a function block opens its containing JavaScript file in the Sources panel, at the line where the function is defined.</p>
|
||||
|
||||
|
||||
<p class="backtotop"><a href="#top">Back to top</a></p>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -214,11 +214,11 @@ After:
|
|||
|
||||
<img src="mobile-emulation/network-link-conditioner-system-preference.png" alt="Network Link Conditioner preference panel" style="max-height: 300px">
|
||||
|
||||
<p>On Windows, we recommend using <a href="http://roderick.dk/2012/05/11/simulate-slow-web-connections/">Charles Proxy</a>. Whereas Network Link Conditioner will affect all system traffic, you can set Charles as a proxy for specific application and only affect their traffic. Do note that a proxy may change network behavior and performance characteristics beyond just the bandwidth speed.</p>
|
||||
<p>On Windows, we recommend using <a href="http://jagt.github.io/clumsy/index.html">Clumsy</a>, which can add extra lag, drop packets, throttle and manipulate other network conditions.</p>
|
||||
|
||||
<img src="mobile-emulation/charles-throttling-options.png" alt="Charles Proxy Throttling Options" style="max-height: 300px">
|
||||
<img src="http://jagt.github.io/clumsy/clumsy-demo.gif" alt="Clumsy Options" style="max-height: 300px">
|
||||
|
||||
<p>On Linux, there are many options for traffic shaping; <a href="http://monkey.org/~marius/pages/?page=trickle">trickle</a> is a recommended option. </p>
|
||||
<p>On Linux, there are many options for traffic shaping; <a href="http://info.iet.unipi.it/~luigi/dummynet/">dummynet</a> is the recommended option. </p>
|
||||
|
||||
<h2 id="device-geolocation-overrides">Geolocation Overrides</h2>
|
||||
|
||||
|
|
|
|||
|
|
@ -253,6 +253,16 @@
|
|||
<td> <span class="kbd">Ctrl</span> + <span class="kbd">Click on property value</span> </td>
|
||||
<td> <span class="kbd">Cmd</span> + <span class="kbd">Click on property value</span> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> Go to line of style rule property declaration in source </td>
|
||||
<td> <span class="kbd">Ctrl</span> + <span class="kbd">Click on property</span> </td>
|
||||
<td> <span class="kbd">Cmd</span> + <span class="kbd">Click on property</span> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> Go to line of property value declaration in source </td>
|
||||
<td> <span class="kbd">Ctrl</span> + <span class="kbd">Click on property value</span> </td>
|
||||
<td> <span class="kbd">Cmd</span> + <span class="kbd">Click on property value</span> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> View auto-complete suggestions </td>
|
||||
<td> <span class="kbd">Ctrl</span> + <span class="kbd">Space</span> </td>
|
||||
|
|
@ -362,6 +372,11 @@
|
|||
<td> <span class="kbd">Alt</span> + <span class="kbd">Delete</span> </td>
|
||||
<td> <span class="kbd">Opt</span> + <span class="kbd">Delete</span> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> Delete individual words </td>
|
||||
<td> <span class="kbd">Alt</span> + <span class="kbd">Delete</span> </td>
|
||||
<td> <span class="kbd">Opt</span> + <span class="kbd">Delete</span> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> Save changes to local modifications </td>
|
||||
<td> <span class="kbd">Ctrl</span> + <span class="kbd">S</span> </td>
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче