679 строки
28 KiB
HTML
679 строки
28 KiB
HTML
{{+bindTo:partials.standard_devtools_article}}
|
|
<h1>Keyboard Shortcuts</h1>
|
|
|
|
<p>
|
|
The DevTools has several built-in shortcut keys that developers can use to save time in their day to day workflow. Outlined below is each shortcut and the corresponding key for each on Windows/Linux and Mac. While some shortcuts are globally available across all of the DevTools, others are specific to a single panel, and are broken up based on where it can be used.
|
|
</p>
|
|
|
|
<div class="collapsible">
|
|
<h2 id="opening-devtools"> Opening DevTools </h2>
|
|
|
|
<p> To access the DevTools, on any web page or app in Google Chrome you can use one of these options: </p>
|
|
|
|
<ul>
|
|
<li> Open the <b>Chrome menu </b> <img src="../images/chrome-menu.png" alt="Chrome menu"> at the top-right of your browser window, then select <b>Tools</b> > <b>Developer Tools</b>.</li>
|
|
<li> Right-click on any page element and select <b>Inspect Element</b>.</li>
|
|
</ul>
|
|
|
|
<table>
|
|
<tbody>
|
|
<tr>
|
|
<th></th>
|
|
<th> Windows / Linux </th>
|
|
<th> Mac </th>
|
|
</tr>
|
|
<tr>
|
|
<td> Open Developer Tools </td>
|
|
<td> <span class="kbd">F12</span>, <span class="kbd">Ctrl</span> + <span class="kbd">Shift</span> + <span class="kbd">I</span> </td>
|
|
<td> <span class="kbd">Cmd</span> + <span class="kbd">Opt</span> + <span class="kbd">I</span> </td>
|
|
</tr>
|
|
<tr>
|
|
<td> Open / switch from inspect element mode and browser window </td>
|
|
<td> <span class="kbd">Ctrl</span> + <span class="kbd">Shift</span> + <span class="kbd">C</span> </td>
|
|
<td> <span class="kbd">Cmd</span> + <span class="kbd">Shift</span> + <span class="kbd">C</span> </td>
|
|
</tr>
|
|
<tr>
|
|
<td> Open Developer Tools and bring focus to the console </td>
|
|
<td> <span class="kbd">Ctrl</span> + <span class="kbd">Shift</span> + <span class="kbd">J</span> </td>
|
|
<td> <span class="kbd">Cmd</span> + <span class="kbd">Opt</span> + <span class="kbd">J</span> </td>
|
|
</tr>
|
|
<tr>
|
|
<td> Inspect the Inspector (<em>undock first one and press</em>) </td>
|
|
<td> <span class="kbd">Ctrl</span> + <span class="kbd">Shift</span> + <span class="kbd">I</span> </td>
|
|
<td> <span class="kbd">Cmd</span> + <span class="kbd">Opt</span> + <span class="kbd">I</span> </td>
|
|
<tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
</div>
|
|
<div class="collapsible">
|
|
<h2 id="all-panels"> All Panels </h2>
|
|
|
|
<table>
|
|
<tbody>
|
|
<tr>
|
|
</tr>
|
|
<tr>
|
|
<th></th>
|
|
<th> Windows / Linux </th>
|
|
<th> Mac </th>
|
|
</tr>
|
|
<tr>
|
|
<td> Show General Settings dialog </td>
|
|
<td> <span class="kbd">?</span>, <span class="kbd">F1</span> </td>
|
|
<td> <span class="kbd">?</span> </td>
|
|
</tr>
|
|
<tr>
|
|
<td> Next panel </td>
|
|
<td> <span class="kbd">Ctrl</span> + <span class="kbd">]</span> </td>
|
|
<td> <span class="kbd">Cmd</span> + <span class="kbd">]</span> </td>
|
|
</tr>
|
|
<tr>
|
|
<td> Previous panel </td>
|
|
<td> <span class="kbd">Ctrl</span> + <span class="kbd">[</span> </td>
|
|
<td> <span class="kbd">Cmd</span> + <span class="kbd">[</span> </td>
|
|
</tr>
|
|
<tr>
|
|
<td> Backward in panel History </td>
|
|
<td> <span class="kbd">Ctrl</span> + <span class="kbd">Alt</span> + <span class="kbd">[</span> </td>
|
|
<td> <span class="kbd">Cmd</span> + <span class="kbd">Opt</span> + <span class="kbd">[</span> </td>
|
|
</tr>
|
|
<tr>
|
|
<td> Forward in panel history </td>
|
|
<td> <span class="kbd">Ctrl</span> + <span class="kbd">Alt</span> + <span class="kbd">]</span> </td>
|
|
<td> <span class="kbd">Cmd</span> + <span class="kbd">Opt</span> + <span class="kbd">]</span> </td>
|
|
</tr>
|
|
<tr>
|
|
<td> Change docking location </td>
|
|
<td> <span class="kbd">Ctrl</span> + <span class="kbd">Shift</span> + <span class="kbd">D</span> </td>
|
|
<td> <span class="kbd">Cmd</span> + <span class="kbd">Shift</span> + <span class="kbd">D</span> </td>
|
|
</tr>
|
|
<tr>
|
|
<td> Open Device Mode </td>
|
|
<td> <span class="kbd">Ctrl</span> + <span class="kbd">Shift</span> + <span class="kbd">M</span> </td>
|
|
<td><span class="kbd">Cmd</span> + <span class="kbd">Shift</span> + <span class="kbd">M</span> </td>
|
|
</tr>
|
|
<tr>
|
|
<td> Toggle Console / close settings dialog when open </td>
|
|
<td> <span class="kbd">Esc</span> </td>
|
|
<td> <span class="kbd">Esc</span> </td>
|
|
</tr>
|
|
<tr>
|
|
<td> Refresh the page </td>
|
|
<td> <span class="kbd">F5</span>, <span class="kbd">Ctrl</span> + <span class="kbd">R</span> </td>
|
|
<td> <span class="kbd">Cmd</span> + <span class="kbd">R</span> </td>
|
|
</tr>
|
|
<tr>
|
|
<td> Refresh the page ignoring cached content </td>
|
|
<td> <span class="kbd">Ctrl</span> + <span class="kbd">F5</span>, <span class="kbd">Ctrl</span> + <span class="kbd">Shift</span> + <span class="kbd">R</span> </td>
|
|
<td> <span class="kbd">Cmd</span> + <span class="kbd">Shift</span> + <span class="kbd">R</span> </td>
|
|
</tr>
|
|
<tr>
|
|
<td> Text search within current file or panel </td>
|
|
<td> <span class="kbd">Ctrl</span> + <span class="kbd">F</span> </td>
|
|
<td> <span class="kbd">Cmd</span> + <span class="kbd">F</span> </td>
|
|
</tr>
|
|
<tr>
|
|
<td> Text search across all sources </td>
|
|
<td> <span class="kbd">Ctrl</span> + <span class="kbd">Shift</span> + <span class="kbd">F</span> </td>
|
|
<td> <span class="kbd">Cmd</span> + <span class="kbd">Opt</span> + <span class="kbd">F</span> </td>
|
|
</tr>
|
|
<tr>
|
|
<td> Search by filename (<em>except on Timeline</em>) </td>
|
|
<td> <span class="kbd">Ctrl</span> + <span class="kbd">O</span>, <span class="kbd">Ctrl</span> + <span class="kbd">O</span> </td>
|
|
<td> <span class="kbd">Cmd</span> + <span class="kbd">O</span>, <span class="kbd">Cmd</span> + <span class="kbd">O</span> </td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td> Zoom in (while focused in DevTools) </td>
|
|
<td> <span class="kbd">Ctrl</span> + <span class="kbd">+</span> </td>
|
|
<td> <span class="kbd">Shift</span> + <span class="kbd">+</span> </td>
|
|
</tr>
|
|
<tr>
|
|
<td> Zoom out </td>
|
|
<td> <span class="kbd">Ctrl</span> + <span class="kbd">-</span> </td>
|
|
<td> <span class="kbd">Shift</span> + <span class="kbd">-</span> </td>
|
|
</tr>
|
|
<tr>
|
|
<td> Restore default text size </td>
|
|
<td> <span class="kbd">Ctrl</span> + <span class="kbd">0</span> </td>
|
|
<td> <span class="kbd">Shift</span> + <span class="kbd">0</span> </td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
</div>
|
|
<div class="collapsible">
|
|
<h2 id="elements-panel"> Elements Panel </h2>
|
|
|
|
<table>
|
|
<tbody>
|
|
<tr>
|
|
<th></th>
|
|
<th> Windows / Linux </th>
|
|
<th> Mac </th>
|
|
</tr>
|
|
<tr>
|
|
<td> Undo change </td>
|
|
<td> <span class="kbd">Ctrl</span> + <span class="kbd">Z</span> </td>
|
|
<td> <span class="kbd">Cmd</span> + <span class="kbd">Z</span> </td>
|
|
</tr>
|
|
<tr>
|
|
<td> Redo change </td>
|
|
<td> <span class="kbd">Ctrl</span> + <span class="kbd">Y</span> </td>
|
|
<td> <span class="kbd">Cmd</span> + <span class="kbd">Y</span>, <span class="kbd">Cmd</span> + <span class="kbd">Shift</span> + <span class="kbd">Z</span> </td>
|
|
</tr>
|
|
<tr>
|
|
<td> Navigate </td>
|
|
<td> <span class="kbd">Up</span>, <span class="kbd">Down</span> </td>
|
|
<td> <span class="kbd">Up</span>, <span class="kbd">Down</span> </td>
|
|
</tr>
|
|
<tr>
|
|
<td> Expand / collapse node </td>
|
|
<td> <span class="kbd">Right</span>, <span class="kbd">Left</span> </td>
|
|
<td> <span class="kbd">Right</span>, <span class="kbd">Left</span> </td>
|
|
</tr>
|
|
<tr>
|
|
<td> Expand node </td>
|
|
<td> <span class="kbd">Single-click on arrow</span> </td>
|
|
<td> <span class="kbd">Single-click on arrow</span> </td>
|
|
</tr>
|
|
<tr>
|
|
<td> Expand / collapse node and all its children </td>
|
|
<td> <span class="kbd">Ctrl</span> + <span class="kbd">Alt</span> + <span class="kbd">Click on arrow icon</span> </td>
|
|
<td> <span class="kbd">Opt</span> + <span class="kbd">Click on arrow icon</span> </td>
|
|
</tr>
|
|
<tr>
|
|
<td> Edit attribute </td>
|
|
<td> <span class="kbd">Enter</span>, <span class="kbd">Double-click on attribute</span> </td>
|
|
<td> <span class="kbd">Enter</span>, <span class="kbd">Double-click on attribute</span> </td>
|
|
</tr>
|
|
<tr>
|
|
<td> Hide element </td>
|
|
<td> <span class="kbd">H</span> </td>
|
|
<td> <span class="kbd">H</span> </td>
|
|
</tr>
|
|
<tr>
|
|
<td> Toggle edit as HTML </td>
|
|
<td> <span class="kbd">F2</span> </td>
|
|
<td> </td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<p> Right-clicking an element you can: </p>
|
|
|
|
<ul>
|
|
<li> Force element pseudo states: (<code>:active</code>, <code>:hover</code>, <code>:focus</code>, <code>:visited</code>) </li>
|
|
<li> Set breakpoints on the elements: (Subtree modifications, Attribute modification, Node removal) </li>
|
|
<li>Clear console</li>
|
|
</ul>
|
|
|
|
</div>
|
|
<div class="collapsible">
|
|
<h2 id="styles-sidebar"> Styles Sidebar </h2>
|
|
|
|
<table>
|
|
<tbody>
|
|
<tr>
|
|
<th></th>
|
|
<th> Windows / Linux </th>
|
|
<th> Mac </th>
|
|
</tr>
|
|
<tr>
|
|
<td> Edit rule </td>
|
|
<td> <span class="kbd">Single-click</span> </td>
|
|
<td> <span class="kbd">Single-click</span> </td>
|
|
</tr>
|
|
<tr>
|
|
<td> Insert new property </td>
|
|
<td> <span class="kbd">Single-click on whitespace</span> </td>
|
|
<td> <span class="kbd">Single-click on whitespace</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> Cycle through the color definition value </td>
|
|
<td> <span class="kbd">Shift</span> + <span class="kbd">Click on color picker box</span> </td>
|
|
<td> <span class="kbd">Shift</span> + <span class="kbd">Click on color picker box</span> </td>
|
|
</tr>
|
|
<tr>
|
|
<td> Edit next / previous property </td>
|
|
<td> <span class="kbd">Tab</span>, <span class="kbd">Shift</span> + <span class="kbd">Tab</span> </td>
|
|
<td> <span class="kbd">Tab</span>, <span class="kbd">Shift</span> + <span class="kbd">Tab</span> </td>
|
|
</tr>
|
|
<tr>
|
|
<td> Increment / decrement value </td>
|
|
<td> <span class="kbd">Up</span>, <span class="kbd">Down</span> </td>
|
|
<td> <span class="kbd">Up</span>, <span class="kbd">Down</span> </td>
|
|
</tr>
|
|
<tr>
|
|
<td> Increment / decrement value by 10 </td>
|
|
<td> <span class="kbd">Shift</span> + <span class="kbd">Up</span>, <span class="kbd">Shift</span> + <span class="kbd">Down</span> </td>
|
|
<td> <span class="kbd">Shift</span> + <span class="kbd">Up</span>, <span class="kbd">Shift</span> + <span class="kbd">Down</span> </td>
|
|
</tr>
|
|
<tr>
|
|
<td> Increment / decrement value by 10 </td>
|
|
<td> <span class="kbd">PgUp</span>, <span class="kbd">PgDown</span> </td>
|
|
<td> <span class="kbd">PgUp</span>, <span class="kbd">PgDown</span> </td>
|
|
</tr>
|
|
<tr>
|
|
<td> Increment / decrement value by 100 </td>
|
|
<td> <span class="kbd">Shift</span> + <span class="kbd">PgUp</span>, <span class="kbd">Shift</span> + <span class="kbd">PgDown</span> </td>
|
|
<td> <span class="kbd">Shift</span> + <span class="kbd">PgUp</span>, <span class="kbd">Shift</span> + <span class="kbd">PgDown</span> </td>
|
|
</tr>
|
|
<tr>
|
|
<td> Increment / decrement value by 0.1 </td>
|
|
<td> <span class="kbd">Alt</span> + <span class="kbd">Up</span>, <span class="kbd">Alt</span> + <span class="kbd">Down</span> </td>
|
|
<td> <span class="kbd">Opt</span> + <span class="kbd">Up</span>, <span class="kbd">Opt</span> + <span class="kbd">Down</span> </td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<p>
|
|
<img src="../images/attributes-icon.png" alt="Element Pseudostates" />
|
|
Emulate an element's pseudo state (<code>:active</code>, <code>:hover</code>, <code>:focus</code>, <code>:visited</code>)
|
|
</p>
|
|
<p>
|
|
<img src="../images/plus.png" alt="Adding style selectors" />
|
|
Add new style selectors
|
|
</p>
|
|
|
|
</div>
|
|
<div class="collapsible">
|
|
<h2 id="sources-panel"> Sources Panel </h2>
|
|
|
|
<table>
|
|
<tbody>
|
|
<tr>
|
|
<th></th>
|
|
<th> Windows / Linux </th>
|
|
<th> Mac </th>
|
|
</tr>
|
|
<tr>
|
|
<td> Pause / resume script execution </td>
|
|
<td> <span class="kbd">F8</span>, <span class="kbd">Ctrl</span> + <span class="kbd">\</span> </td>
|
|
<td> <span class="kbd">F8</span>, <span class="kbd">Cmd</span> + <span class="kbd">\</span> </td>
|
|
</tr>
|
|
<tr>
|
|
<td> Step over next function call </td>
|
|
<td> <span class="kbd">F10</span>, <span class="kbd">Ctrl</span> + <span class="kbd">'</span> </td>
|
|
<td> <span class="kbd">F10</span>, <span class="kbd">Cmd</span> + <span class="kbd">'</span> </td>
|
|
</tr>
|
|
<tr>
|
|
<td> Step into next function call </td>
|
|
<td> <span class="kbd">F11</span>, <span class="kbd">Ctrl</span> + <span class="kbd">;</span> </td>
|
|
<td> <span class="kbd">F11</span>, <span class="kbd">Cmd</span> + <span class="kbd">;</span> </td>
|
|
</tr>
|
|
<tr>
|
|
<td> Step out of current function </td>
|
|
<td> <span class="kbd">Shift</span> + <span class="kbd">F11</span>, <span class="kbd">Ctrl</span> + <span class="kbd">Shift</span> + <span class="kbd">;</span> </td>
|
|
<td> <span class="kbd">Shift</span> + <span class="kbd">F11</span>, <span class="kbd">Cmd</span> + <span class="kbd">Shift</span> + <span class="kbd">;</span> </td>
|
|
</tr>
|
|
<tr>
|
|
<td> Select next call frame </td>
|
|
<td> <span class="kbd">Ctrl</span> + <span class="kbd">.</span> </td>
|
|
<td> <span class="kbd">Opt</span> + <span class="kbd">.</span> </td>
|
|
</tr>
|
|
<tr>
|
|
<td> Select previous call frame </td>
|
|
<td> <span class="kbd">Ctrl</span> + <span class="kbd">,</span> </td>
|
|
<td> <span class="kbd">Opt</span> + <span class="kbd">,</span> </td>
|
|
</tr>
|
|
<tr>
|
|
<td> Toggle breakpoint condition </td>
|
|
<td> <span class="kbd">Click on line number</span>, <span class="kbd">Ctrl</span> + <span class="kbd">B</span> </td>
|
|
<td> <span class="kbd">Click on line number</span>, <span class="kbd">Cmd</span> + <span class="kbd">B</span> </td>
|
|
</tr>
|
|
<tr>
|
|
<td> Edit breakpoint condition </td>
|
|
<td> <span class="kbd">Right-click on line number</span> </td>
|
|
<td> <span class="kbd">Right-click on line number</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> Comment a line or selected text </td>
|
|
<td> <span class="kbd">Ctrl</span> + <span class="kbd">/</span> </td>
|
|
<td> <span class="kbd">Cmd</span> + <span class="kbd">/</span> </td>
|
|
</tr>
|
|
<tr>
|
|
<td> Save changes to local modifications </td>
|
|
<td> <span class="kbd">Ctrl</span> + <span class="kbd">S</span> </td>
|
|
<td> <span class="kbd">Cmd</span> + <span class="kbd">S</span> </td>
|
|
</tr>
|
|
<tr>
|
|
<td> Save all changes </td>
|
|
<td> <span class="kbd">Ctrl</span> + <span class="kbd">Alt</span> + <span class="kbd">S</span> </td>
|
|
<td> <span class="kbd">Cmd</span> + <span class="kbd">Opt</span> + <span class="kbd">S</span> </td>
|
|
</tr>
|
|
<tr>
|
|
<td> Go to line </td>
|
|
<td> <span class="kbd">Ctrl</span> + <span class="kbd">G</span> </td>
|
|
<td> <span class="kbd">Ctrl</span> + <span class="kbd">G</span> </td>
|
|
</tr>
|
|
<tr>
|
|
<td> Search by filename </td>
|
|
<td> <span class="kbd">Ctrl</span> + <span class="kbd">O</span> </td>
|
|
<td> <span class="kbd">Cmd</span> + <span class="kbd">O</span> </td>
|
|
</tr>
|
|
<tr>
|
|
<td> Jump to line number </td>
|
|
<td> <span class="kbd">Ctrl</span> + <span class="kbd">P</span> + <span class="kbd">:<number></span> </td>
|
|
<td> <span class="kbd">Cmd</span> + <span class="kbd">P</span> + <span class="kbd">:<number></span> </td>
|
|
</tr>
|
|
<tr>
|
|
<td> Jump to column </td>
|
|
<td> <span class="kbd">Ctrl</span> + <span class="kbd">O</span> + <span class="kbd">:<number></span> + <span class="kbd">:<number></span> </td>
|
|
<td> <span class="kbd">Cmd</span> + <span class="kbd">O</span> + <span class="kbd">:<number></span> + <span class="kbd">:<number></span> </td>
|
|
</tr>
|
|
<tr>
|
|
<td> Go to member </td>
|
|
<td> <span class="kbd">Ctrl</span> + <span class="kbd">Shift</span> + <span class="kbd">O</span> </td>
|
|
<td> <span class="kbd">Cmd</span> + <span class="kbd">Shift</span> + <span class="kbd">O</span> </td>
|
|
</tr>
|
|
<tr>
|
|
<td> Close active tab </td>
|
|
<td> <span class="kbd">Alt</span> + <span class="kbd">W</span> </td>
|
|
<td> <span class="kbd">Opt</span> + <span class="kbd">W</span> </td>
|
|
</tr>
|
|
<tr>
|
|
<td> Run snippet </td>
|
|
<td> <span class="kbd">Ctrl</span> + <span class="kbd">Enter</span> </td>
|
|
<td> <span class="kbd">Cmd</span> + <span class="kbd">Enter</span> </td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<p>
|
|
<img src="../images/pause-gray.png" alt="Pause on Exception Button" />
|
|
Don't pause on exceptions
|
|
</p>
|
|
<p>
|
|
<img src="../images/pause-blue.png" alt="Pause on All Exceptions" />
|
|
Pause on All exceptions (including those caught within try/catch blocks)
|
|
</p>
|
|
<p>
|
|
<img src="../images/pause-purple.png" alt="Pause on Uncaught Exceptions" />
|
|
Pause on uncaught exceptions (usually the one you want)
|
|
</p>
|
|
|
|
</div>
|
|
<div class="collapsible">
|
|
<h2 id="code-editor"> Code Editor Shortcuts </h2>
|
|
|
|
|
|
<table>
|
|
<tbody>
|
|
<tr>
|
|
<th></th>
|
|
<th> Windows / Linux </th>
|
|
<th> Mac </th>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td> Go to matching bracket </td>
|
|
<td> <span class="kbd">Ctrl</span> + <span class="kbd">M</span> </td>
|
|
</tr>
|
|
<tr>
|
|
<td> Jump to line number </td>
|
|
<td> <span class="kbd">Ctrl</span> + <span class="kbd">P</span> + <span class="kbd">:<number></span> </td>
|
|
<td> <span class="kbd">Cmd</span> + <span class="kbd">P</span> + <span class="kbd">:<number></span> </td>
|
|
</tr>
|
|
<tr>
|
|
<td> Jump to column </td>
|
|
<td> <span class="kbd">Ctrl</span> + <span class="kbd">O</span> + <span class="kbd">:<number></span> + <span class="kbd">:<number></span> </td>
|
|
<td> <span class="kbd">Cmd</span> + <span class="kbd">O</span> + <span class="kbd">:<number></span> + <span class="kbd">:<number></span> </td>
|
|
</tr>
|
|
<tr>
|
|
<td> Toggle comment </td>
|
|
<td> <span class="kbd">Ctrl</span> + <span class="kbd">/</span> </td>
|
|
<td> <span class="kbd">Cmd</span> + <span class="kbd">/</span> </td>
|
|
</tr>
|
|
<tr>
|
|
<td> Select next occurrence </td>
|
|
<td> <span class="kbd">Ctrl</span> + <span class="kbd">D</span> </td>
|
|
<td> <span class="kbd">Cmd</span> + <span class="kbd">D</span> </td>
|
|
</tr>
|
|
<tr>
|
|
<td> Undo last selection </td>
|
|
<td> <span class="kbd">Ctrl</span> + <span class="kbd">U</span> </td>
|
|
<td> <span class="kbd">Cmd</span> + <span class="kbd">U</span> </td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
</div>
|
|
<div class="collapsible">
|
|
<h2 id="timeline-panel"> Timeline Panel </h2>
|
|
|
|
<table>
|
|
<tbody>
|
|
<tr>
|
|
<th></th>
|
|
<th> Windows / Linux </th>
|
|
<th> Mac </th>
|
|
</tr>
|
|
<tr>
|
|
<td> Start / stop recording </td>
|
|
<td> <span class="kbd">Ctrl</span> + <span class="kbd">E</span> </td>
|
|
<td> <span class="kbd">Cmd</span> + <span class="kbd">E</span> </td>
|
|
</tr>
|
|
<tr>
|
|
<td> Save timeline data </td>
|
|
<td> <span class="kbd">Ctrl</span> + <span class="kbd">S</span> </td>
|
|
<td> <span class="kbd">Cmd</span> + <span class="kbd">S</span> </td>
|
|
</tr>
|
|
<tr>
|
|
<td> Load timeline data </td>
|
|
<td> <span class="kbd">Ctrl</span> + <span class="kbd">O</span> </td>
|
|
<td> <span class="kbd">Cmd</span> + <span class="kbd">O</span> </td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
</div>
|
|
<div class="collapsible">
|
|
<h2 id="timeline-panel"> Profiles Panel </h2>
|
|
|
|
<table>
|
|
<tbody>
|
|
<tr>
|
|
<th></th>
|
|
<th> Windows / Linux </th>
|
|
<th> Mac </th>
|
|
</tr>
|
|
<tr>
|
|
<td> Start / stop recording </td>
|
|
<td> <span class="kbd">Ctrl</span> + <span class="kbd">E</span> </td>
|
|
<td> <span class="kbd">Cmd</span> + <span class="kbd">E</span> </td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
</div>
|
|
<div class="collapsible">
|
|
<h2 id="console"> Console </h2>
|
|
|
|
<table>
|
|
<tbody>
|
|
<tr>
|
|
<th></th>
|
|
<th> Windows / Linux </th>
|
|
<th> Mac </th>
|
|
</tr>
|
|
<tr>
|
|
<td> Accept suggestion </td>
|
|
<td> <span class="kbd">Right</span> </td>
|
|
<td> <span class="kbd">Right</span> </td>
|
|
</tr>
|
|
<tr>
|
|
<td> Previous command / line </td>
|
|
<td> <span class="kbd">Up</span> </td>
|
|
<td> <span class="kbd">Up</span> </td>
|
|
</tr>
|
|
<tr>
|
|
<td> Next command / line </td>
|
|
<td> <span class="kbd">Down</span> </td>
|
|
<td> <span class="kbd">Down</span> </td>
|
|
</tr>
|
|
<tr>
|
|
<td> Focus the Console </td>
|
|
<td> <span class="kbd">Ctrl</span> + <span class="kbd">`</span> </td>
|
|
<td> <span class="kbd">Ctrl</span> + <span class="kbd">`</span> </td>
|
|
</tr>
|
|
<tr>
|
|
<td> Clear Console </td>
|
|
<td> <span class="kbd">Ctrl</span> + <span class="kbd">L</span> </td>
|
|
<td> <span class="kbd">Cmd</span> + <span class="kbd">K</span>, <span class="kbd">Opt</span> + <span class="kbd">L</span> </td>
|
|
</tr>
|
|
<tr>
|
|
<td> Multi-line entry </td>
|
|
<td> <span class="kbd">Shift</span> + <span class="kbd">Enter</span> </td>
|
|
<td> <span class="kbd">Ctrl</span> + <span class="kbd">Return</span> </td>
|
|
</tr>
|
|
<tr>
|
|
<td> Execute </td>
|
|
<td> <span class="kbd">Enter</span> </td>
|
|
<td> <span class="kbd">Return</span> </td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<p> Right-clicking on console: </p>
|
|
|
|
<ul>
|
|
<li> XMLHttpRequest logging: Turn on to view the XHR log </li>
|
|
<li> Preserve log upon navigation </li>
|
|
<li> Filter: Hide and unhide messages from script files </li>
|
|
<li> Clear console: Clear all console messages </li>
|
|
</ul>
|
|
|
|
</div>
|
|
<div class="collapsible">
|
|
<h2 id="screencasting"> Screencasting </h2>
|
|
|
|
<table>
|
|
<tbody>
|
|
<tr>
|
|
<th></th>
|
|
<th> Windows / Linux </th>
|
|
<th> Mac </th>
|
|
</tr>
|
|
<tr>
|
|
<td> Pinch zoom in and out </td>
|
|
<td> <span class="kbd">Alt</span> + <span class="kbd">Scroll</span>,<span class="kbd">Ctrl</span> + <span class="kbd">Click and drag with two fingers</span> </td>
|
|
<td> <span class="kbd">Opt</span> + <span class="kbd">Scroll</span>, <span class="kbd">Cmd</span> + <span class="kbd">Click and drag with two fingers</span> </td>
|
|
</tr>
|
|
<tr>
|
|
<td> Inspect element tool </td>
|
|
<td> <span class="kbd">Ctrl</span> + <span class="kbd">Shift</span> + <span class="kbd">C</span> </td>
|
|
<td> <span class="kbd">Cmd</span> + <span class="kbd">Shift</span> + <span class="kbd">C</span> </td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
</div>
|
|
<div class="collapsible">
|
|
<h2 id="emulation"> Emulation </h2>
|
|
|
|
<table>
|
|
<tbody>
|
|
<tr>
|
|
<th></th>
|
|
<th> Windows / Linux </th>
|
|
<th> Mac </th>
|
|
</tr>
|
|
<tr>
|
|
<td> Pinch zoom in and out </td>
|
|
<td> <span class="kbd">Shift</span> + <span class="kbd">Scroll</span> </td>
|
|
<td> <span class="kbd">Shift</span> + <span class="kbd">Scroll</span> </td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
</div>
|
|
<div class="collapsible">
|
|
<h2 id="other-shortcuts"> Other Chrome Shortcuts </h2>
|
|
|
|
<p>Here are some additional Chrome shortcuts which are useful for general use within the browser not specific to the DevTools. <a href="http://goo.gl/PsTNm">View all Chrome shortcuts</a> for Windows, Mac, and Linux. </p>
|
|
|
|
<table>
|
|
<tbody>
|
|
<tr>
|
|
<th></th>
|
|
<th> Windows / Linux </th>
|
|
<th> Mac </th>
|
|
</tr>
|
|
<tr>
|
|
<td> Find next </td>
|
|
<td> <span class="kbd">Ctrl</span> + <span class="kbd">G</span> </td>
|
|
<td> <span class="kbd">Cmd</span> + <span class="kbd">G</span> </td>
|
|
</tr>
|
|
<tr>
|
|
<td> Find previous </td>
|
|
<td> <span class="kbd">Ctrl</span> + <span class="kbd">Shift</span> + <span class="kbd">G</span> </td>
|
|
<td> <span class="kbd">Cmd</span> + <span class="kbd">Shift</span> + <span class="kbd">G</span> </td>
|
|
</tr>
|
|
<tr>
|
|
<td> Open a new window in Incognito mode </td>
|
|
<td> <span class="kbd">Ctrl</span> + <span class="kbd">Shift</span> + <span class="kbd">N</span> </td>
|
|
<td> <span class="kbd">Cmd</span> + <span class="kbd">Shift</span> + <span class="kbd">N</span> </td>
|
|
</tr>
|
|
<tr>
|
|
<td> Toggle Bookmarks bar on and off </td>
|
|
<td> <span class="kbd">Ctrl</span> + <span class="kbd">Shift</span> + <span class="kbd">B</span> </td>
|
|
<td> <span class="kbd">Cmd</span> + <span class="kbd">Shift</span> + <span class="kbd">B</span> </td>
|
|
</tr>
|
|
<tr>
|
|
<td> View the History page </td>
|
|
<td> <span class="kbd">Ctrl</span> + <span class="kbd">H</span> </td>
|
|
<td> <span class="kbd">Cmd</span> + <span class="kbd">Y</span> </td>
|
|
</tr>
|
|
<tr>
|
|
<td> View the Downloads page </td>
|
|
<td> <span class="kbd">Ctrl</span> + <span class="kbd">J</span> </td>
|
|
<td> <span class="kbd">Cmd</span> + <span class="kbd">Shift</span> + <span class="kbd">J</span> </td>
|
|
</tr>
|
|
<tr>
|
|
<td> View the Task Manager </td>
|
|
<td> <span class="kbd">Shift</span> + <span class="kbd">ESC</span> </td>
|
|
<td> <span class="kbd">Shift</span> + <span class="kbd">ESC</span> </td>
|
|
</tr>
|
|
<tr>
|
|
<td> Next page in a tabs browsing history </td>
|
|
<td> <span class="kbd">Alt</span> + <span class="kbd">Right</span> </td>
|
|
<td> <span class="kbd">Opt</span> + <span class="kbd">Right</span> </td>
|
|
</tr>
|
|
<tr>
|
|
<td> Previous page in a tabs browsing history </td>
|
|
<td> <span class="kbd">Backspace</span>, <span class="kbd">Alt</span> + <span class="kbd">Left</span> </td>
|
|
<td> <span class="kbd">Backspace</span>, <span class="kbd">Opt</span> + <span class="kbd">Left</span> </td>
|
|
</tr>
|
|
<tr>
|
|
<td> Highlight content in the web address area </td>
|
|
<td> <span class="kbd">F6</span>, <span class="kbd">Ctrl</span> + <span class="kbd">L</span>, <span class="kbd">Alt</span> + <span class="kbd">D</span> </td>
|
|
<td> <span class="kbd">Cmd</span> + <span class="kbd">L</span>, <span class="kbd">Opt</span> + <span class="kbd">D</span> </td>
|
|
</tr>
|
|
<tr>
|
|
<td> Places a ? in the address bar for performing a keyword <br />
|
|
search using your default search engine </td>
|
|
<td> <span class="kbd">Ctrl</span> + <span class="kbd">K</span>, <span class="kbd">Ctrl</span> + <span class="kbd">E</span> </td>
|
|
<td> <span class="kbd">Cmd</span> + <span class="kbd">K</span>, <span class="kbd">Cmd</span> + <span class="kbd">E</span> </td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
</div>
|
|
{{/partials.standard_devtools_article}}
|