Screenshots:

• Entire page: Click the screenshot button ({{ image1 }} {ref}needs to be enabled <tools-toolbox-extra-tools> first).
• Viewport: Click the screenshot button ({{ image1 }}) in {ref}Responsive Design Mode <responsive-design-mode-camera-button>.
• Node: Right-click a node within the Inspector and click {ref}"Screenshot Node" <taking-screenshots-of-an-element>.
• Via {doc}Web Console command <../web_console/helpers/index>: screenshot <filename.png> --fullpage.

Settings:

• Choose between a {ref}light and a dark theme <settings-themes> for the developer tools.
• {ref}Change the keyboard bindings <settings-editor-preferences> to Vim, Emacs or Sublime Text if you're used to different shortcuts.
• Check or uncheck the different tools to enable or disable them. (There are more than the default tools!)

In the {ref}markup view <page-inspector-ui-tour-html-pane>:

• Press {kbd}H with a node selected to hide/show it.
• Press {kbd}Backspace or {kbd}Del with a node selected to delete it.
• {kbd}Alt + click on a node to expand or collapse it and all its descendants.
• Click on the last {ref}breadcrumb button <page-inspector-how-to-examine-and-edit-html-breadcrumbs> to scroll the selection into view in the inspector.
• Click the "ev" icon besides a node to {doc}see all event listeners attached to it <../page_inspector/examine_event_listeners/index>.
• Press {kbd}S with a node selected to see it in the page (same as right-click a node and click {ref}Scroll Into View <page-inspector-how-to-examine-and-edit-scroll-into-view>).
• Right-click a node and click {ref}Use in Console <page-inspector-how-to-examine-and-edit-html-use-in-console> to {doc}command line <../web_console/the_command_line_interpreter/index> as tempN variable.

When {ref}selecting elements <page-inspector-select-element-button>:

• {kbd}Shift + click to select an element but keep selecting (picker mode doesn't disengage).
• Use {kbd}←/{kbd}→ to navigate to parents/children elements (if they're hard to select).

In the {ref}rules view <page-inspector-ui-tour-rules-view>:

• Click the inspector icon {{ image2 }} next to any selector to highlight all elements that match it.
• Click the inspector icon {{ image2 }} next to the element{} rule to lock the highlighter on the current element.
• Right-click any property and select "Show MDN Docs" to view the MDN docs for this property.
• Click on the filter icon {{ image3 }} next to an overridden property to {ref}find which other property overrides it <page-inspector-how-to-examine-and-edit-css-overridden-declarations>.
• 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.

In all panels:

• {kbd}Esc opens the {doc}split console <../web_console/split_console/index>; useful when debugging, or inspecting nodes

In the {doc}command line <../web_console/the_command_line_interpreter/index>:

• {ref}$0 <web_console_helpers_$0> references the currently selected node.
• {ref}$() <web_console_helpers_$> is a shortcut to document.querySelector()
• {ref}$$() <web_console_helpers_$$> returns an array with the results from document.querySelectorAll().
• {ref}$$$() <web_console_helpers_$$$> returns an array of all the elements matching the selector, even when they are in the shadow DOM.
• {ref}copy <web-console-helpers-copy> copies anything as a string.
• Right-click a node in the Inspector and click {ref}Use in Console <page-inspector-how-to-examine-and-edit-html-use-in-console> to create a {ref}temp*N* <web-console-helpers-tempn> variable for it.
• console.table() displays tabular data as table.
• {ref}help <web-console-helpers-help> opens the MDN page describing the available commands.
• :screenshot <filename.png> --fullpage saves a screenshot to your downloads directory using the optional file name. If no filename is included, the file name will be in this format:

Screen Shot date at time.png

The --fullpage parameter is optional. If you include it, the screenshot will be of the whole page, not just the section visible in the browser windows. The file name will have -fullpage appended to it as well. See {doc}Web Console Helpers <../web_console/helpers/index> for all parameters.

In the console output:

• Click on the inspector icon {{ image2 }} next to an element in the output to {ref}select it within the Inspector <web-console-rich-output-highlighting-and-inspecting-dom-nodes>.
• Check {ref}"Enable persistent logs" <settings-common-preferences> in the settings to keep logged messages from before even after navigation.
• Check {ref}"Enable timestamps" <settings-web-console> in the settings to show timestamps besides the logged messages.

• Skip JavaScript libraries in debugging sessions via the black box icon {{ image4 }}.
• Press {kbd}Ctrl + {kbd}Alt + {kbd}F to search in all scripts.
• Press {kbd}Ctrl + {kbd}D to search for a function definition.
• Press {kbd}Ctrl + {kbd}L to go to a specific line.

• The black box icon {{ image4 }} in the style sheet pane toggles the visibility of a style sheet.
• Click an {ref}@media rule <style-editor-the-at-rules-sidebar> to apply it in {doc}Responsive Design Mode <../responsive_design_mode/index>.
• Click the import button {{ image5 }} to import a style sheet or the create button {{ image6 }} to create a new one.
• Click the options button in the {ref}style sheet pane <style-editor-the-style-sheet-pane> and click {ref}"Show original sources" <style-editor-source-map-support> to toggle the display of CSS preprocessor files.

• Click the request summary to {doc}compare performance of cache vs. no-cache page loading <../network_monitor/performance_analysis/index>.
• When a request is selected click {ref}"Edit and Resend" <network-monitor-request-list-edit-and-resend> to modify its headers and send it again.
• Check {ref}"enable persistent logs" <settings-common-preferences> in the settings to keep requests from before even after navigation.
• Hover the {ref}"js" icon within the "Cause" column <request-list-requst-list-cause-column> to see the JavaScript stack trace, which caused the request.
• Check {ref}"Disable HTTP Cache (when toolbox is open)" <settings-advanced-settings> in the settings to disable the network cache while debugging network issues.

• Right-click the column headers to open a menu allowing to toggle the display of the columns.
• Right-click an entry and click "Delete name" to delete it or "Delete All" to delete all entries.
• Select an entry to see the parsed value of it in the sidebar.