Tips

General

Screenshots:

• 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.

Settings:

• Choose between a light and a dark theme for the developer tools.

• Change the keyboard bindings 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!)

Page Inspector

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).

• Right-click a node and click Use in Console to command line as tempN variable.

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:

• 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.

• 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.

Web Console

In all panels:

• Esc opens the split console; useful when debugging, or inspecting nodes

In the command line:

• $0 references the currently selected node.

• $() is a shortcut to document.querySelector()

• $$() returns an array with the results from document.querySelectorAll().

• $$$() returns an array of all the elements matching the selector, even when they are in the shadow DOM.

• copy copies anything as a string.

• Right-click a node in the Inspector and click Use in Console to create a temp*N* variable for it.

• console.table() displays tabular data as table.

• 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 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.

• Check “Enable persistent logs” in the settings to keep logged messages from before even after navigation.

• Check “Enable timestamps” in the settings to show timestamps besides the logged messages.

Debugger

• 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.

Style Editor

• The black box icon in the style sheet pane toggles the visibility of a style sheet.

• Click an @media rule to apply it in Responsive Design Mode.

• 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 and click “Show original sources” to toggle the display of CSS preprocessor files.

Network Monitor

• 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.

• Hover the “js” icon within the “Cause” column to see the JavaScript stack trace, which caused the request.

• Check “Disable HTTP Cache (when toolbox is open)” in the settings to disable the network cache while debugging network issues.

Storage Inspector

• 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.