forked from TwitRco/devtools-docs
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
278 lines (200 loc) · 11.8 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
{{+bindTo:partials.standard_devtools_article canonical:strings.canonicalDevToolsOverview}}
<h1>Chrome DevTools Overview</h1>
<p>
The Chrome Developer Tools (DevTools for short), are a set of web authoring and debugging tools built into Google Chrome.
The DevTools provide web developers deep access into the internals of the browser and their web application.
Use the DevTools to efficiently track down layout issues, set JavaScript breakpoints, and get insights for code optimization.
</p>
<p class="caution">
<strong style="font-weight: normal; font-size: 110%; display:block;">The DevTools docs have moved!</strong>
For the latest tutorials, docs and updates <a href="https://developers.google.com/web/tools/chrome-devtools">head over to the new home of Chrome DevTools</a>.
</p>
<h2 id ="access">Accessing the DevTools</h2>
<p>To access the DevTools, open a web page or web app in Google Chrome. Either:</p>
<ul>
<li>Select the <strong>Chrome menu</strong> <img src="devtools/images/chrome-menu.png" alt="Chrome Menu"/> at the top-right of your browser window, then select <strong>Tools</strong> > <strong>Developer Tools</strong>.</li>
<li>Right-click on any page element and select <strong>Inspect Element</strong>.</li>
</ul>
<p>The DevTools window will open at the bottom of your Chrome browser.</p>
<p>There are several useful shortcuts for opening the DevTools:</p>
<ul>
<li>Use <kbd class="kbd">Ctrl</kbd>+<kbd class="kbd">Shift</kbd>+<kbd class="kbd">I</kbd> (or <kbd class="kbd">Cmd</kbd>+<kbd class="kbd">Opt</kbd>+<kbd class="kbd">I</kbd> on Mac) to open the DevTools.</li>
<li>Use <kbd class="kbd">Ctrl</kbd>+<kbd class="kbd">Shift</kbd>+<kbd class="kbd">J</kbd> (or <kbd class="kbd">Cmd</kbd>+<kbd class="kbd">Opt</kbd>+<kbd class="kbd">J</kbd> on Mac) to open the DevTools and bring focus to the Console.</li>
<li>Use <kbd class="kbd">Ctrl</kbd>+<kbd class="kbd">Shift</kbd>+<kbd class="kbd">C</kbd> (or <kbd class="kbd">Cmd</kbd>+<kbd class="kbd">Shift</kbd>+<kbd class="kbd">C</kbd> on Mac) to open the DevTools in Inspect Element mode, or toggle Inspect Element mode if the DevTools are already open.</li>
</ul>
<p>For your day-to-day workflow, <a href="devtools/docs/shortcuts">learning the shortcuts</a> will save you time.</p>
<h2 id="devtools-window">The DevTools window</h2>
<p>
The DevTools are organised into task-oriented groups in the toolbar at the top of the window.
Each toolbar item and corresponding panel let you work with a specific type of page or app information, including <abbr title="Document Object Model">DOM</abbr> elements, resources, and sources.
</p>
<figure>
<img class="screenshot" src="devtools/images/devtools-window.png"/>
<figcaption>
The colorpicker available in the DevTools..
</figcaption>
</figure>
<p>Overall, there are eight main groups of tools available view Developer Tools:<p>
<ul>
<li><a href="devtools/docs/dom-and-styles">Elements</a></li>
<li><a href="devtools/docs/resource-panel">Resources</a></li>
<li><a href="devtools/docs/network">Network</a></li>
<li>Sources</li>
<li><a href="devtools/docs/timeline">Timeline</a></li>
<li><a href="devtools/docs/profiles">Profiles</a></li>
<li>Audits</li>
<li><a href="devtools/docs/console">Console</a></li>
</ul>
<p>You can use the <kbd><kbd class="kbd">Ctrl</kbd>+<kbd class="kbd">[</kbd></kbd> and <kbd><kbd class="kbd">Ctrl</kbd>+<kbd class="kbd">]</kbd></kbd> shortcuts to move between panels.</p>
<h2 id="dom-and-styles">Inspecting the DOM and styles</h2>
<p>
The <strong><a href="devtools/docs/dom-and-styles">Elements</a></strong> panel lets you see everything in one DOM tree, and allows inspection and on-the-fly editing of DOM elements.
You will often visit the Elements tabs when you need to identify the <abbr title="HyperText Markup Language">HTML</abbr> snippet for some aspect of the page.
For example, you may be curious if an image has an HTML id attribute and what the value is.
</p>
<figure>
<img class="screenshot" src="devtools/images/elements-panel.png"/>
<figure>
Viewing a heading element in the DOM.
</figure>
</figure>
<p><a href="devtools/docs/dom-and-styles">Read more about inspecting the DOM and styles</a></p>
<h2 id="console">Working with the Console</h2>
<p>The <a href="devtools/docs/console">JavaScript Console</a> provides two primary functions for developers testing web pages and applications. It is a place to:</p>
<ul>
<li>Log diagnostic information in the development process.</li>
<li>A shell prompt which can be used to interact with the document and DevTools.
</ul>
<p>
You may log diagnostic information using methods provided by the <a href="devtools/docs/console-api">Console <abbr title="Application Programming Interface">API</abbr></a>.
Such as <a href="devtools/docs/console-api#consolelogobject-object">console.log()</a> or <a href="devtools/docs/console-api#consoleprofilelabel">console.profile()</a>.
</p>
<p>
You can evaluate expressions directly in the console and use the methods provided by the <a href="devtools/docs/commandline-api">Command Line API</a>.
These include <a href="devtools/docs/commandline-api#selector">$()</a> command for selecting elements or <a href="devtools/docs/commandline-api#profilename">profile()</a> to start the <abbr title="Central Processing Unit">CPU</abbr> profiler.
</p>
<figure>
<img class="screenshot" src="devtools/docs/console-files/expression-evaluation.png"/>
<figcaption>
Evaluating some commands in the <abbr title="JavaScript">JS</abbr> Console.
</figcaption>
</figure>
<p><a href="devtools/docs/console">Read more about working with the console</a></p>
<h2 id="debugging-javascript">Debugging JavaScript</h2>
<p>
As the <strong>complexity</strong> of JavaScript applications increase, developers need powerful debugging tools to help quickly discover the cause of an issue and fix it efficiently.
The Chrome DevTools include a number of useful tools to help make <strong>debugging</strong> JavaScript less painful.
</p>
<figure>
<img class="screenshot" src="devtools/images/js-debugging.png"/>
<figcaption>
A conditonal breakpoint which logs to the console.
</figcaption>
</figure>
<p><a href="devtools/docs/javascript-debugging">Read more about how to debug JavaScript with the DevTools »</a></p>
<h2 id="improving-network-performance">Improving network performance</h2>
<p>
The <strong>Network</strong> panel provides insights into resources that are requested and downloaded over the network in real time.
Identifying and addressing those requests taking longer than expected is an essential step in optimizing your page.
</p>
<figure>
<img class="screenshot" src="devtools/images/network-panel.png"/>
<figcaption>
The context menu for network requests.
</figcaption>
</figure>
<p><a href="devtools/docs/network">Read more about how to improve your network performance »</a></p>
<h2 id="audits">Audits</h2>
<p>
The Audit panel can analyze a page as it loads.
Then provides suggestions and optimizations for decreasing page load time and increase perceived (and real) responsiveness.
For further insight, we recommend using <a href="https://developers.google.com/speed/pagespeed/insights/">PageSpeed Insights</a>.
</p>
<figure>
<img src="devtools/images/audits-panel.png"/>
<figcaption>
The recommendations of an audit.
</figcaption>
</figure>
<h2 id="timeline">Improving rendering performance</h2>
<p>
The <strong>Timeline</strong> panel gives you a complete overview of where time is spent when loading and using your web app or page.
All events, from loading resources to parsing JavaScript, calculating styles, and repainting are plotted on a timeline.
</p>
<figure>
<img class="screenshot" src="devtools/images/timeline-panel.png"/>
<figcaption>
An example timeline with various events.
</figcaption>
</figure>
<p><a href="devtools/docs/timeline">Read more about how to improve rendering performance »</a></p>
<h2 id="javascript-performance">JavaScript & <abbr title="Cascading StyleSheets">CSS</abbr> performance</h2>
<p>
The <strong>Profiles</strong> panel lets you profile the execution time and memory usage of a web app or page.
These help you to understand where resources are being spent, and so help you to optimize your code.
The provided profilers are:
</p>
<ul>
<li>The <strong>CPU profiler</strong> shows where execution time is spent in your page's JavaScript functions.</li>
<li>The <strong>Heap profiler</strong> shows memory distribution by your page's JavaScript objects and related DOM nodes.</li>
<li>The <strong>JavaScript</strong> profile shows where execution time is spent in your scripts</li>
</ul>
<figure>
<img class="screenshot" src="devtools/images/profiles-panel.png"/>
<figcaption>
An example heap snapshot.
</figcaption>
</figure>
<p><a href="devtools/docs/profiles">Read more about using how to improve JavaScript and CSS performance »</a></p>
<h2 id="inspecting-storage">Inspecting storage</h2>
<p>
The <strong>Resources</strong> panel lets you inspect resources that are loaded in the inspected page.
It lets you interact with HTML5 Database, Local Storage, Cookies, AppCache, etc.
</p>
<figure>
<img class="screenshot" src="devtools/images/resources-panel.png"/>
<figcaption>
The JavaScript file of the <a href="https://developers.google.com/web/starter-kit/">Web Starter Kit</a> as displayed in the resources panel.
</figcaption>
</figure>
<p><a href="devtools/docs/resource-panel">Read more about inspecting storage resources »</a></p>
<h2 id="further-reading">Further reading</h2>
<p>There are several other areas of the DevTools documentation that you might find beneficial to review. These include:</p>
<ul>
<li><a href="devtools/docs/heap-profiling">Heap Profiling</a></li>
<li><a href="devtools/docs/cpu-profiling">CPU Profiling</a></li>
<li><a href="devtools/docs/device-mode">Device Mode & Mobile Emulation</a></li>
<li><a href="devtools/docs/remote-debugging">Remote Debugging</a></li>
<li><a href="devtools/docs/videos">DevTools Videos</a></li>
</ul>
<h2 id="further-resources">Further resources</h2>
<h3 id="get-more">Get more</h3>
<p>You can also follow us on <a href="http://twitter.com/ChromiumDev">@ChromiumDev</a> or ask a question using the <a href="https://groups.google.com/forum/?fromgroups#!forum/google-chrome-developer-tools">forums</a>.</p>
<figure>
<img class="screenshot" src="devtools/images/image13.png"/>
<figcaption>
Styled output in the console.
</figcaption>
</figure>
<p>Be sure to checkout the Google Chrome Developers page on <a href="https://plus.google.com/+GoogleChromeDevelopers/posts">Google+</a>.</p>
<figure>
<img class="screenshot" src="devtools/images/chrome-devs-gplus.png"/>
</figure>
<h3 id="get-involved">Get involved</h3>
<p>
To submit a bug or a feature request on DevTools, please use issue tracker at <a href="http://crbug.com/">http://crbug.com</a>.
Please also mention "DevTools" in the bug summary.
</p>
<figure>
<img class="screenshot" src="devtools/images/crbug.png"/>
<figcaption>
<a href="http://crbug.com/">crbug.com</a>'s bug report category selector.
</figcaption>
</figure>
<p>Anyone can also help make the DevTools better by directly <a href="devtools/docs/contributing">contributing</a> back to the source.</p>
<h3 id="debugging-extensions">Debugging Extensions</h3>
<p>
Looking to use the DevTools to debug Chrome extensions? Watch <a href="http://www.youtube.com/watch?v=IP0nMv_NI1s">Developing and Debugging extensions</a>.
A <a href="https://developer.chrome.com/extensions/tut_debugging">Debugging</a> tutorial is also available.
</p>
{{/partials.standard_devtools_article}}