OLD | NEW |
| (Empty) |
1 {{+content:partials.site}} | |
2 <div class="pillar-content"> | |
3 | |
4 <h1>Chrome Developer Tools</h1> | |
5 | |
6 <section class="article-list g-section"> | |
7 <article class="new"> | |
8 <h4 class="label">Styles & the DOM</h4> | |
9 <h2>Editing Styles and the DOM</h2> | |
10 <p> | |
11 Use DevTools to do real-time editing of your web page. You can edit the D
OM directly or the CSS Style and see your changes rendered immediately. | |
12 </p> | |
13 <p><a href="docs/dom-and-styles.html">Learn more</a></p> | |
14 <img src="{{static}}/images/devtools-pillar/dom-pillar.png" alt="these shoul
d have alt text"> | |
15 </article> | |
16 | |
17 <article class="new"> | |
18 <h4 class="label">Mobile DevTools</h4> | |
19 <h2>Remote Debugging on Android</h2> | |
20 <p> | |
21 | |
22 You can now access your Android device directly in DevTools on your dev ma
chine. Just plug it in over USB and you can view and debug! | |
23 </p> | |
24 <p><a href="docs/remote-debugging.html">Learn more</a></p> | |
25 <img src="{{static}}/images/devtools-pillar/remote-debugging-pillar.jpg" alt
="these should have alt text"> | |
26 </article> | |
27 | |
28 <article> | |
29 <h4 class="label">Learn Basics</h4> | |
30 <h2>DevTools Overview</h2> | |
31 <p> | |
32 A starting place if you haven't used DevTools before - this page will tell
you everything you need to get started with the Chrome DevTools, from how to ac
cess the tools to a brief explanation of what the various menus and panels are u
sed for. | |
33 </p> | |
34 <p><a href="index.html">Learn more</a></p> | |
35 </article> | |
36 | |
37 <article> | |
38 <h4 class="label">Command-line debugging</h4> | |
39 <h2>Using the console</h2> | |
40 <p> | |
41 The Javascript console in DevTools can be used to debug your Javascript co
de and log diagnostics, or you can also just use it as a shell to try out Javasc
ript commands and interact with pages. | |
42 </p> | |
43 <p><a href="docs/console.html">Learn more</a></p> | |
44 <img src="{{static}}/images/devtools-pillar/console-pillar.png" alt="these s
hould have alt text"> | |
45 </article> | |
46 | |
47 <article> | |
48 <h4 class="label">Mobile DevTools</h4> | |
49 <h2>Mobile Emulation</h2> | |
50 <p> | |
51 Need to debug for a device but don't have the device on hand? DevTools ca
n emulate many devices -- screen dimensions, touch events, geolocation, and user
spoofing. | |
52 </p> | |
53 <p><a href="docs/mobile-emulation.html">Learn more</a></p> | |
54 <img src="{{static}}/images/devtools-pillar/emulation-pillar.png" alt="these
should have alt text"> | |
55 </article> | |
56 | |
57 <article> | |
58 <h4 class="label">Learn Basics</h4> | |
59 <h2>Keyboard Shortcuts</h2> | |
60 <p> | |
61 Save more time in your development workflow -- here is a page full of keyb
oard shortcuts that will make things quicker when you are using DevTools. | |
62 </p> | |
63 <p><a href="docs/shortcuts.html">Learn more</a></p> | |
64 <img src="{{static}}/images/devtools-pillar/shortcuts-pillar.JPG" alt="these
should have alt text"> | |
65 </article> | |
66 | |
67 <article> | |
68 <h4 class="label">Performance and Profiling</h4> | |
69 <h2>Javascript Memory Profiling</h2> | |
70 <p> | |
71 Does your page use too much memory or have a memory leak? Find out how to
get and analyze a heap profile. | |
72 </p> | |
73 <p><a href="docs/javascript-memory-profiling.html">Learn more</a></p> | |
74 <img src="{{static}}/images/devtools-pillar/memory-pillar.png" alt="these sh
ould have alt text"> | |
75 </article> | |
76 | |
77 <article> | |
78 <h4 class="label">Performance and Profiling</h4> | |
79 <h2>Performance Profiling: Timelines</h2> | |
80 <p> | |
81 Is your site running slow? Analyze times for events, scripting, rendering
, and painting using the Timeline. | |
82 </p> | |
83 <p><a href="docs/timeline.html">Learn more</a></p> | |
84 <img src="{{static}}/images/devtools-pillar/timeline-pillar.png" alt="these
should have alt text"> | |
85 </article> | |
86 | |
87 <article> | |
88 <h4 class="label">Performance and Profiling</h4> | |
89 <h2>Javascript CPU Profiler</h2> | |
90 <p> | |
91 Find out how much CPU is being spent on your various Javascript functions
with the Javascript CPU Profiler. | |
92 </p> | |
93 <p><a href="docs/cpu-profiling.html">Learn more</a></p> | |
94 <img src="{{static}}/images/devtools-pillar/cpuprofiler-pillar.png" alt="the
se should have alt text"> | |
95 </article> | |
96 | |
97 <article> | |
98 <h4 class="label">Performance and Profiling</h4> | |
99 <h2>Flame Charts</h2> | |
100 <p> | |
101 Flame charts show you a visualization of the call stack of your Javascript
functions, and you can quickly find out how long each individual call takes. | |
102 </p> | |
103 <p><a href="docs/flame-charts.html">Learn more</a></p> | |
104 <img src="{{static}}/images/devtools-pillar/flamechart-pillar.png" alt="thes
e should have alt text"> | |
105 </article> | |
106 | |
107 <article> | |
108 <h4 class="label">Debugging Tools</h4> | |
109 <h2>Javascript Debugging</h2> | |
110 <p> | |
111 Need to debug your Javascript? DevTools has a suite of tools to let you s
tep through code, set breakpoints, handle exceptions, and so on. | |
112 </p> | |
113 <p><a href="docs/javascript-debugging.html">Learn more</a></p> | |
114 <img src="{{static}}/images/devtools-pillar/jsdebugger-pillar.png" alt="thes
e should have alt text"> | |
115 </article> | |
116 | |
117 <article> | |
118 <h4 class="label">Command-line debugging</h4> | |
119 <h2>Console API reference</h2> | |
120 <p> | |
121 Javascript functions you can call within the console or within your progra
ms to log various results to the console. | |
122 </p> | |
123 <p><a href="docs/console-api.html">Learn more</a></p> | |
124 </article> | |
125 | |
126 <article> | |
127 <h4 class="label">Command-line debugging</h4> | |
128 <h2>Command Line API reference</h2> | |
129 <p> | |
130 Functions that you can call in the console for performing common tasks wit
hin the DevTools. | |
131 </p> | |
132 <p><a href="docs/console-api.html">Learn more</a></p> | |
133 </article> | |
134 | |
135 <article> | |
136 <h4 class="label">Learn Basics</h4> | |
137 <h2>Tips and Tricks</h2> | |
138 <p> | |
139 Various tips and tricks on things within the DevTools. | |
140 </p> | |
141 <p><a href="docs/tips-and-tricks.html">Learn more</a></p> | |
142 </article> | |
143 | |
144 <article> | |
145 <h4 class="label">DevTools Reference</h4> | |
146 <h2>Settings</h2> | |
147 <p> | |
148 Let's learn some more about what you can control in the Settings panel. | |
149 </p> | |
150 <p><a href="docs/settings.html">Learn more</a></p> | |
151 </article> | |
152 | |
153 <article> | |
154 <h4 class="label">Learn Basics</h4> | |
155 <h2>Authoring and Development Workflow</h2> | |
156 <p> | |
157 Do you find that DevTools saves you some time and you wonder how to save m
ore? This page guides you through some ways to make your w\ | |
158 orkflow more efficient, both in editing files and styles but also with your Java
script and how you use the DevTools in general. | |
159 </p> | |
160 <p><a href="docs/authoring-development-workflow.html">Learn more\ | |
161 </a></p> | |
162 </article> | |
163 | |
164 <article> | |
165 <h4 class="label">Styles & The DOM</h4> | |
166 <h2>Working with CSS Preprocessors</h2> | |
167 <p> | |
168 Are you using a CSS preprocessor such as Sass, Less, or Stylus? You can l
ive-edit your preprocessor source files in DevTools as easi\ | |
169 ly as editing straight CSS, and enable CSS source maps. | |
170 </p> | |
171 <p><a href="docs/css-preprocessors.html">Learn more</a></p> | |
172 </article> | |
173 | |
174 <article> | |
175 <h4 class="label">Mobile DevTools</h4> | |
176 <h2>Remote Debugging Protocol</h2> | |
177 <p> | |
178 Although we encourage you to use the new Screencast for debugging your And
roid devices, we do have Javascript runtime bindings for al\ | |
179 lowing DevTools to interact with mobile Chrome devices. | |
180 </p> | |
181 <p><a href="docs/debugger-protocol.html">Learn more</a></p> | |
182 </article> | |
183 | |
184 <article> | |
185 <h4 class="label">Contribute</h4> | |
186 <h2>Integrating with DevTools</h2> | |
187 <p> | |
188 Write new extensions and protocol clients to make new features for Chrome
DevTools! | |
189 </p> | |
190 <p><a href="docs/integrating.html">Learn more</a></p> | |
191 </article> | |
192 | |
193 <article> | |
194 <h4 class="label">Learn Basics</h4> | |
195 <h2>Videos</h2> | |
196 <p> | |
197 Videos to get you started learning about Chrome DevTools. | |
198 </p> | |
199 <p><a href="docs/videos.html">Learn more</a></p> | |
200 </article> | |
201 | |
202 </section> | |
203 | |
204 <section class="g-section g-tpl-33-67" id="further-resources"> | |
205 <h2>Further Resources</h2> | |
206 <div class="g-unit g-first"> | |
207 <article class="g-content"> | |
208 <h2 class="school">Code School</h2> | |
209 <p>Explore and master the DevTools with our free "discover DevTools" cou
rses. | |
210 <p><a href="http://discover-devtools.codeschool.com/">Learn more</a></p> | |
211 </article> | |
212 </div> | |
213 <div class="g-unit"> | |
214 <div class="g-section g-tpl-50-50"> | |
215 <div class="g-unit g-first"> | |
216 <article class="g-content"> | |
217 <h2 class="chat">Get Involved</h2> | |
218 <p>Summit a bug or a feature request on DevTools, and help the commu
nity get better. | |
219 <p><a href="docs/contributing.html">Learn more</a></p> | |
220 </article> | |
221 </div> | |
222 <div class="g-unit g-last"> | |
223 <article class="g-content"> | |
224 <h2 class="puzzle">Debug Extensions</h2> | |
225 <p>Looking to use the DevTools to debug Chrome extensions? Watch ou
r videos for more info. | |
226 <p><a href="docs/videos.html">Learn more</a></p> | |
227 </article> | |
228 </div> | |
229 </div> | |
230 </div> | |
231 </section> | |
232 | |
233 </div> | |
234 {{/partials.site}} | |
OLD | NEW |