Skip to content

Commit

Permalink
Tidy up and fix links
Browse files Browse the repository at this point in the history
  • Loading branch information
@hamishwillee
hamishwillee committed May 4, 2021
1 parent e03f0ab commit b1a7d11
Show file tree
Hide file tree
Showing 8 changed files with 212 additions and 208 deletions.
2 changes: 1 addition & 1 deletion files/en-us/tools/debugger/keyboard_shortcuts/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,7 @@
<h2 id="global_shortcuts">Global shortcuts</h2>

<ul>
<li><a href="/en-US/docs/Tools/Keyboard_shortcuts#toolbox_font_shortcuts">Toolbox font shortcuts</a>: Keyboard shortcuts to change the fonts on any/all tools.</li>
<li><a href="/en-US/docs/Tools/Tools_Toolbox#font_shortcuts_global">Font shortcuts</a>: Keyboard shortcuts to change the fonts on any/all tools.</li>
</ul>


Expand Down
2 changes: 1 addition & 1 deletion files/en-us/tools/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -170,7 +170,7 @@ <h2 id="More_Tools">More Tools</h2>

<h2 id="Connecting_the_Developer_Tools">Connecting the Developer Tools</h2>

<p>If you open the developer tools using <a href="/en-US/docs/Tools/Keyboard_shortcuts#opening_and_closing_tools">keyboard shortcuts</a> or the equivalent menu items, they'll target the document hosted by the currently active tab. But you can attach the tools to a variety of other targets, too, both within the current browser and in different browsers or even different devices.</p>
<p>If you open the developer tools using <a href="/en-US/docs/Tools/Tools_Toolbox#opening_and_closing_tools">keyboard shortcuts</a> or the equivalent menu items, they'll target the document hosted by the currently active tab. But you can attach the tools to a variety of other targets, too, both within the current browser and in different browsers or even different devices.</p>

<div class="twocolumns">
<dl>
Expand Down
196 changes: 5 additions & 191 deletions files/en-us/tools/keyboard_shortcuts/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,206 +7,21 @@
---
<div>{{ToolsSidebar}}</div>

<p>This page lists all keyboard shortcuts used by the developer tools built into Firefox.</p>

<p>The first section lists the shortcut for opening each tool and the second section lists shortcuts that are applicable to the Toolbox itself. After that there's one section for each tool, which lists the shortcuts that you can use within that tool.</p>
<p>This page lists, or links to, all keyboard shortcuts used by the developer tools built into Firefox.</p>

<p>Because access keys are locale-dependent, they're not documented in this page.</p>

<h2 id="Opening_and_closing_tools">Opening and closing tools</h2>

<p>These shortcuts work in the main browser window to open the specified tool. The same shortcuts will work to close tools hosted in the Toolbox, if the tool is active. For tools like the Browser Console that open in a new window, you have to close the window to close the tool.</p>

<table class="fullwidth-table">
<tbody>
<tr>
<th scope="row" style="width: 40%;"><strong>Command</strong></th>
<th scope="col"><strong>Windows</strong></th>
<th scope="col"><strong>macOS</strong></th>
<th scope="col"><strong>Linux</strong></th>
</tr>
<tr>
<th scope="row">Open Toolbox (with the most recent tool activated)</th>
<td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd></td>
<td><kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>I</kbd></td>
<td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd></td>
</tr>
<tr>
<th scope="row">Bring Toolbox to foreground (if the Toolbox is in a separate window and not in foreground)</th>
<td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd> or <kbd>F12</kbd></td>
<td><kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>I</kbd> or <kbd>F12</kbd></td>
<td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd> or <kbd>F12</kbd></td>
</tr>
<tr>
<th scope="row">Close Toolbox (if the Toolbox is in a separate window and in foreground)</th>
<td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd> or <kbd>F12</kbd></td>
<td><kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>I</kbd> or <kbd>F12</kbd></td>
<td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd> or <kbd>F12</kbd></td>
</tr>
<tr>
<th scope="row">Open Web Console <a href="#opening-closing-web-console-note"><strong><sup>1</sup></strong></a></th>
<td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>K</kbd></td>
<td><kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>K</kbd></td>
<td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>K</kbd></td>
</tr>
<tr>
<th scope="row">Toggle "Pick an element from the page" (opens the Toolbox and/or focus the Inspector tab)</th>
<td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>C</kbd></td>
<td><kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>C</kbd></td>
<td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>C</kbd></td>
</tr>
<tr>
<th scope="row">Open Style Editor</th>
<td><kbd>Shift</kbd> + <kbd>F7</kbd></td>
<td><kbd>Shift</kbd> + <kbd>F7</kbd> <a href="#mac-function-key-note">*</a></td>
<td><kbd>Shift</kbd> + <kbd>F7</kbd></td>
</tr>
<tr>
<th scope="row">Open Profiler</th>
<td><kbd>Shift</kbd> + <kbd>F5</kbd></td>
<td><kbd>Shift</kbd> + <kbd>F5</kbd> <a href="#mac-function-key-note">*</a></td>
<td><kbd>Shift</kbd> + <kbd>F5</kbd></td>
</tr>
<tr>
<th scope="row">Open Network Monitor <a href="#opening-closing-network-monitor-note"><strong><sup>2</sup></strong></a></th>
<td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>E</kbd></td>
<td><kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>E</kbd></td>
<td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>E</kbd></td>
</tr>
<tr>
<th scope="row">Toggle Responsive Design Mode</th>
<td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>M</kbd></td>
<td><kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>M</kbd></td>
<td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>M</kbd></td>
</tr>
<tr>
<th scope="row">Open Browser Console</th>
<td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>J</kbd></td>
<td><kbd>Cmd</kbd> + <kbd>Shift</kbd> + <kbd>J</kbd></td>
<td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>J</kbd></td>
</tr>
<tr>
<th scope="row">Open Browser Toolbox</th>
<td><kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd></td>
<td><kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd></td>
<td><kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd></td>
</tr>
<tr>
<th scope="row">Open Scratchpad</th>
<td><kbd>Shift</kbd> + <kbd>F4</kbd></td>
<td><kbd>Shift</kbd> + <kbd>F4 </kbd> <a href="#mac-function-key-note">*</a></td>
<td><kbd>Shift</kbd> + <kbd>F4</kbd></td>
</tr>
<tr>
<th scope="row">Open WebIDE</th>
<td><kbd>Shift</kbd> + <kbd>F8</kbd></td>
<td><kbd>Shift</kbd> + <kbd>F8</kbd> <a href="#mac-function-key-note">*</a></td>
<td><kbd>Shift</kbd> + <kbd>F8</kbd></td>
</tr>
<tr>
<th scope="row">Storage Inspector</th>
<td><kbd>Shift</kbd> + <kbd>F9</kbd></td>
<td><kbd>Shift</kbd> + <kbd>F9</kbd> <a href="#mac-function-key-note">*</a></td>
<td><kbd>Shift</kbd> + <kbd>F9</kbd></td>
</tr>
<tr>
<th scope="row">Open Debugger <strong><sup><a href="#opening-closing-debugger">3</a></sup></strong></th>
<td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Z</kbd></td>
<td><kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>Z</kbd></td>
<td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Z</kbd></td>
</tr>
</tbody>
</table>

<p><a name="opening-closing-web-console-note">1.</a> Unlike the other toolbox-hosted tools, this shortcut does not also close the Web Console. Instead, it focuses on the Web Console's command line. To close the Web Console, use the global toolbox shortcut of <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd> (<kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>I</kbd> on a Mac).</p>

<p><a name="opening-closing-network-monitor-note">2.</a> Before Firefox 55, the keyboard shortcut was <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Q</kbd> (<kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>Q</kbd> on a Mac).</p>

<p><a name="opening-closing-debugger">3.</a> Starting in Firefox 71. Before Firefox 66, the letter in this shortcut was S.</p>
<p>See <a href="/en-US/docs/Tools/Tools_Toolbox#opening_and_closing_tools">Toolbox > Opening and closing tools</a> for keyboard shortcuts to open and close any of the toolbox tools.</p>

<h2 id="Toolbox">Toolbox</h2>

<div id="toolbox-shortcuts">
<p>These shortcuts work whenever the toolbox is open, no matter which tool is active.</p>

<table class="fullwidth-table">
<tbody>
<tr>
<th scope="row" style="width: 40%;">Command</th>
<th scope="col">Windows</th>
<th scope="col">macOS</th>
<th scope="col">Linux</th>
</tr>
<tr>
<th scope="row">Cycle through tools left to right</th>
<td><kbd>Ctrl</kbd> + <kbd>]</kbd></td>
<td><kbd>Cmd</kbd> + <kbd>]</kbd></td>
<td><kbd>Ctrl</kbd> + <kbd>]</kbd></td>
</tr>
<tr>
<th scope="row">Cycle through tools right to left</th>
<td><kbd>Ctrl</kbd> + <kbd>[</kbd></td>
<td><kbd>Cmd</kbd> + <kbd>[</kbd></td>
<td><kbd>Ctrl</kbd> + <kbd>[</kbd></td>
</tr>
<tr>
<th scope="row">Toggle between active tool and settings.</th>
<td><kbd>F1</kbd></td>
<td><kbd>F1</kbd></td>
<td><kbd>F1</kbd></td>
</tr>
<tr>
<th scope="row">
<p>Toggle toolbox between the last 2 <a href="/en-US/docs/Tools/Tools_Toolbox#docking_mode">docking modes</a></p>
</th>
<td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>D</kbd></td>
<td><kbd>Cmd</kbd> + <kbd>Shift</kbd> + <kbd>D</kbd></td>
<td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>D</kbd></td>
</tr>
<tr>
<th scope="row">Toggle split console (except if console is the currently selected tool)</th>
<td><kbd>Esc</kbd></td>
<td><kbd>Esc</kbd></td>
<td><kbd>Esc</kbd></td>
</tr>
</tbody>
</table>
</div>

<h2 id="Toolbox_font_shortcuts">Toolbox font shortcuts</h2>
<p>See <a href="/en-US/docs/Tools/Tools_Toolbox#toolbox">Toolbox</a> for keyboard shortcuts to toggle/cycle through open tools.</p>

<div id="all-toolbox-tools">
<p>These shortcuts work in all tools that are hosted in the toolbox.</p>
<h2 id="Global_font_shortcuts">Font shortcuts (Global)</h2>

<table class="fullwidth-table">
<tbody>
<tr>
<th scope="row" style="width: 40%;">Command</th>
<th scope="col">Windows</th>
<th scope="col">macOS</th>
<th scope="col">Linux</th>
</tr>
<tr>
<th scope="row">Increase font size</th>
<td><kbd>Ctrl</kbd> + <kbd> + </kbd></td>
<td><kbd>Cmd</kbd> + <kbd> + </kbd></td>
<td><kbd>Ctrl</kbd> + <kbd> + </kbd></td>
</tr>
<tr>
<th scope="row">Decrease font size</th>
<td><kbd>Ctrl</kbd> + <kbd>-</kbd></td>
<td><kbd>Cmd</kbd> + <kbd>-</kbd></td>
<td><kbd>Ctrl</kbd> + <kbd>-</kbd></td>
</tr>
<tr>
<th scope="row">Reset font size</th>
<td><kbd>Ctrl</kbd> + <kbd>0</kbd></td>
<td><kbd>Cmd</kbd> + <kbd>0</kbd></td>
<td><kbd>Ctrl</kbd> + <kbd>0</kbd></td>
</tr>
</tbody>
</table>
</div>
<p>See <a href="/en-US/docs/Tools/Tools_Toolbox#font_shortcuts_global">Toolbox > Font shortcuts</a> to modify font sizes.</p>

<h2 id="Source_editor">Source editor</h2>

Expand Down Expand Up @@ -313,7 +128,6 @@ <h2 id="Page_Inspector">Page Inspector</h2>
<p>See <a href="/en-US/docs/Tools/Page_Inspector/Keyboard_shortcuts">Page inspector keyboard shortcuts</a>.</p>



<h2 id="Debugger">Debugger</h2>

<p>See <a href="/en-US/docs/Tools/Debugger/Keyboard_shortcuts">Debugger keyboard shortcuts</a>.</p>
Expand Down
2 changes: 1 addition & 1 deletion files/en-us/tools/page_inspector/how_to/examine_and_edit_html/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -111,7 +111,7 @@ <h3 id="HTML_tree">HTML tree</h3>
</table>

<div class="note">
<p><strong>Note</strong>: There are some useful keyboard shortcuts that can be used in the HTML tree — see the <a href="/en-US/docs/Tools/Keyboard_shortcuts#html_pane">HTML pane keyboard shortcuts list</a>.</p>
<p><strong>Note</strong>: There are some useful keyboard shortcuts that can be used in the HTML tree — see the <a href="/en-US/docs/Tools/Page_Inspector/Keyboard_shortcuts#html_pane">HTML pane keyboard shortcuts list</a>.</p>
</div>

<h3 id="before_and_after">::before and ::after</h3>
Expand Down
2 changes: 1 addition & 1 deletion files/en-us/tools/page_inspector/how_to/open_the_inspector/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
<p>There are two main ways to open the Inspector:</p>

<ul>
<li>Choose <em>Tools</em> &gt; <em>Web Developer</em> &gt; <em>Inspector</em> from the Menu Bar or the equivalent <a href="/en-US/docs/Tools/Keyboard_shortcuts#opening_and_closing_tools">keyboard shortcut</a>.</li>
<li>Choose <em>Tools</em> &gt; <em>Web Developer</em> &gt; <em>Inspector</em> from the Menu Bar or the equivalent <a href="/en-US/docs/Tools/Tools_Toolbox#opening_and_closing_tools">keyboard shortcut</a>.</li>
<li>Right-click an element on a web page and select <em>Inspect Element</em>.</li>
</ul>

Expand Down
2 changes: 1 addition & 1 deletion files/en-us/tools/page_inspector/keyboard_shortcuts/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -356,6 +356,6 @@ <h3 id="CSS_pane">CSS pane</h3>
<h2 id="global_shortcuts">Global shortcuts</h2>

<ul>
<li><a href="/en-US/docs/Tools/Keyboard_shortcuts#toolbox_font_shortcuts">Toolbox font shortcuts</a>: Keyboard shortcuts to change the fonts on any/all tools.</li>
<li><a href="/en-US/docs/Tools/Tools_Toolbox#font_shortcuts_global">Font shortcuts</a>: Keyboard shortcuts to change the fonts on any/all tools.</li>
</ul>

Loading

0 comments on commit b1a7d11

Please sign in to comment.