Revision 1130779 of Tips

<h2 id="General">General</h2>

<h2 id="Page_Inspector">Page Inspector</h2>

<p>In the <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#HTML_pane">markup view</a>:</p>

<ul>
 <li>Press <kbd>H</kbd> with a node selected to hide/show it.</li>
 <li>Press <kbd>Backspace</kbd> or <kbd>Del</kbd> with a node selected to delete it.</li>
 <li><kbd>Alt</kbd> + click on a node to expand it and all its descendants.</li>
 <li>Click on the last <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#HTML_breadcrumbs">breakcrumb button</a> to scroll the selection into view in the inspector.</li>
 <li>Right-click a node and click <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#Scroll Into View">"Scroll Into View"</a> to see it in the page.</li>
 <li>Right-click a node and click <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#Use%20in%20Console">"Use in Console"</a> to <a href="/en-US/docs/Tools/Web_Console/The_command_line_interpreter">command line</a> as <code>temp<em>N</em></code> variable.</li>
</ul>

<p>When <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#Select_element_button">selecting elements</a>:</p>

<ul>
 <li><kbd>Shift</kbd> + click to select an element but keep selecting (picker mode doesn't disengage).</li>
 <li>Use <kbd>↑</kbd>/<kbd>↓</kbd> to navigate to parents/children elements (if they're hard to select).</li>
</ul>

<p>In the <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#CSS_pane">rules view</a>:</p>

<ul>
 <li>Click the inspector icon (<img alt="" src="https://mdn.mozillademos.org/files/14185/picker.png" style="height:18px; width:18px" />) next to any selector to highlight all elements that match it.</li>
 <li>Click the inspector icon (<img alt="" src="https://mdn.mozillademos.org/files/14185/picker.png" style="height:18px; width:18px" />) next to the <code>element{}</code> rule to lock the highlighter on the current element.</li>
 <li>Right-click any property and select "Show MDN Docs" to <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Get_help_for_CSS_properties">view the MDN docs for this property</a>.</li>
 <li>Click on the filter icon (<img alt="" src="https://mdn.mozillademos.org/files/14187/filter.png" style="height:19px; width:18px" />) next to an overridden property to <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Overridden_declarations">find which other property overrides it</a>.</li>
 <li>Right-click on a name, value, or rule to copy anything from the name, the value, the declaration or the whole rule to your clipboard.</li>
</ul>

<h2 id="Web_Console">Web Console</h2>

<p>In all panels:</p>

<ul>
 <li><kbd>Esc</kbd> opens the <a href="/en-US/docs/Tools/Web_Console/Split_console">split console</a>; useful when debugging, or inspecting nodes</li>
</ul>

<p>In the <a href="/en-US/docs/Tools/Web_Console/The_command_line_interpreter">command line</a>:</p>

<ul>
 <li><code><a href="/en-US/docs/Tools/Web_Console/Helpers#$0">$0</a></code> references the currently selected node.</li>
 <li><code><a href="/en-US/docs/Tools/Web_Console/Helpers#$">$()</a></code> is a shortcut to {{domxref("document.querySelector()")}}.</li>
 <li><code><a href="/en-US/docs/Tools/Web_Console/Helpers#$$">$$()</a></code> returns an array with the results from {{domxref("document.querySelectorAll()")}}.</li>
 <li><code><a href="/en-US/docs/Tools/Web_Console/Helpers#copy">copy</a></code> copies anything as a string.</li>
 <li>Right-click a node in the Inspector and click <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#Use%20in%20Console">"Use in Console"</a> to create a <code><a href="/en-US/docs/Tools/Web_Console/Helpers#tempN">temp<em>N</em></a></code> variable for it.</li>
 <li><a href="/en-US/docs/Tools/Web_Console/Helpers#cd">cd</a> switches the JavaScript evaluation context to a different iframe in the page.</li>
 <li><a href="/en-US/docs/Web/API/Console/table">console.table()</a> displays tabular data as table.</li>
 <li><a href="/en-US/docs/Tools/Web_Console/Helpers#help">help</a> opens the MDN page describing the available commands.</li>
</ul>

<p>In the console output:</p>

<ul>
 <li>Click on the inspector icon (<img alt="" src="https://mdn.mozillademos.org/files/14185/picker.png" style="height:18px; width:18px" />) next to an element in the output to <a href="/en-US/docs/Tools/Web_Console/Rich_output#Highlighting_and_inspecting_DOM_nodes">select it within the Inspector</a>.</li>
 <li>Check <a href="/en-US/docs/Tools/Settings#Common_preferences">"Enable persistent logs"</a> in the settings to keep logged messages from before even after navigation.</li>
</ul>

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

<ul>
 <li>Skip JavaScript libraries in debugging sessions via the black box icon (<img alt="Icon for black boxing a JavaScript source" src="https://mdn.mozillademos.org/files/14189/Black%20boxing.png" style="height:18px; width:18px" />).</li>
 <li>Press <kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>F</kbd> to search in all scripts.</li>
 <li>Press <kbd>Ctrl</kbd>+<kbd>D</kbd> to search for a function definition.</li>
 <li>Press <kbd>Ctrl</kbd>+<kbd>L</kbd> to go to a specific line.</li>
</ul>

<h2 id="Network_Monitor">Network Monitor</h2>

<ul>
 <li>Click the request summary to <a href="/en-US/docs/Tools/Network_Monitor#Performance_analysis">compare performance of cache vs. no-cache page loading</a>.</li>
 <li>When a request is selected click <a href="/en-US/docs/Tools/Network_Monitor#Edit_and_Resend">"Edit and Resend"</a> to modify its headers and send it again.</li>
 <li>Check <a href="/en-US/docs/Tools/Settings#Common_preferences">"Enable persistent logs"</a> in the settings to keep requests from before even after navigation.</li>
</ul>