| 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 |
|---|
Chromium Code Reviews
Issue 140743011:
New home page for developer.chrome.com (Closed)
Base URL: svn://svn.chromium.org/chrome/trunk/src