Screenshots:
- Entire page: Click the screenshot button (
needs to be enabled <tools-toolbox-extra-tools>
first). - Viewport: Click the screenshot button () in
Responsive Design Mode <responsive-design-mode-camera-button>
. - Node: Right-click a node within the Inspector and click
"Screenshot Node" <taking-screenshots-of-an-element>
. - Via
Web Console command <../web_console/helpers/index>
:screenshot <filename.png> --fullpage
.
Settings:
- Choose between a
light and a dark theme <settings-themes>
for the developer tools. 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 markup view <page_inspector_ui_tour_html_pane>
:
- Press
H
with a node selected to hide/show it. - Press
Backspace
orDel
with a node selected to delete it. Alt
+ click on a node to expand or collapse it and all its descendants.- Click on the last
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
see all event listeners attached to it <../page_inspector/examine_event_listeners/index>
. - Press
S
with a node selected to see it in the page (same as right-click a node and clickScroll Into View <page_inspector_how_to_examine_and_edit_scroll_into_view>
). - Right-click a node and click
Use in Console<page_inspector_how_to_examine_and_edit_html_use_in_console>
tocommand line <../web_console/the_command_line_interpreter/index>
astempN
variable.
When selecting elements <page_inspector_select_element_button>
:
Shift
+ click to select an element but keep selecting (picker mode doesn't disengage).- Use
←
/→
to navigate to parents/children elements (if they're hard to select).
In the rules view <page_inspector_ui_tour_rules_view>
:
- Click the inspector icon next to any selector to highlight all elements that match it.
- Click the inspector icon 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 next to an overridden property to
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:
Esc
opens thesplit console <../web_console/split_console/index>
; useful when debugging, or inspecting nodes
In the command line <../web_console/the_command_line_interpreter/index>
:
$0 <web_console_helpers_$0>
references the currently selected node.$() <web_console_helpers_$>
is a shortcut to document.querySelector()$$() <web_console_helpers_$$>
returns an array with the results from document.querySelector().copy <web_console_helpers_copy>
copies anything as a string.- Right-click a node in the Inspector and click
Use in Console <page_inspector_how_to_examine_and_edit_html_use_in_console>
to create atemp*N* <web_console_helpers_tempn>
variable for it. - console.table() displays tabular data as table.
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 Web Console Helpers <../web_console/helpers/index>
for all parameters.
In the console output:
- Click on the inspector icon next to an element in the output to
select it within the Inspector <web_console_rich_output_highlighting_and_inspecting_dom_nodes>
. - Check
"Enable persistent logs" <settings-common-preferences>
in the settings to keep logged messages from before even after navigation. - Check
"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 .
- Press
Ctrl
+Alt
+F
to search in all scripts. - Press
Ctrl
+D
to search for a function definition. - Press
Ctrl
+L
to go to a specific line.
- The black box icon in the style sheet pane toggles the visibility of a style sheet.
- Click an
@media rule <style-editor-the-at-rules-sidebar>
to apply it inResponsive Design Mode <../responsive_design_mode/index>
. - Click the import button to import a style sheet or the create button to create a new one.
- Click the options button in the
style sheet pane <style-editor-the-style-sheet-pane>
and click"Show original sources" <style-editor-source-map-support>
to toggle the display of CSS preprocessor files.
- Click the request summary to
compare performance of cache vs. no-cache page loading <../network_monitor/performance_analysis/index>
. - When a request is selected click
"Edit and Resend" <network-monitor-request-list-edit-and-resend>
to modify its headers and send it again. - Check
"enable persistent logs" <settings-common-preferences>
in the settings to keep requests from before even after navigation. - Hover the
"js" icon within the "Cause" column <request-list-requst-list-cause-column>
to see the JavaScript stack trace, which caused the request. - Check
"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.