Entire page: Click the screenshot button ( needs to be enabled first).
Viewport: Click the screenshot button () in Responsive Design Mode.
Node: Right-click a node within the Inspector and click “Screenshot Node”.
Via Web Console command:
screenshot <filename.png> --fullpage.
In the markup view:
Press H with a node selected to hide/show it.
Press Backspace or Del 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 to scroll the selection into view in the inspector.
Click the “ev” icon besides a node to see all event listeners attached to it.
Press S with a node selected to see it in the page (same as right-click a node and click Scroll Into View).
When selecting elements:
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:
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.
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 the split console; useful when debugging, or inspecting nodes
In the command line:
$0 references the currently selected node.
copy copies anything as a string.
console.table() displays tabular data as table.
help opens the MDN page describing the available commands.
:screenshot <filename.png> --fullpagesaves 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
--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 for all parameters.
In the console output:
Click the request summary to compare performance of cache vs. no-cache page loading.
When a request is selected click “Edit and Resend” to modify its headers and send it again.
Check “enable persistent logs” in the settings to keep requests from before even after navigation.
Check “Disable HTTP Cache (when toolbox is open)” 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.