Tips

General

Screenshots:

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().
  • copy copies anything as a string.
  • Right-click a node in the Inspector and click "Use in Console" to create a tempN variable for it.
  • cd switches the JavaScript evaluation context to a different iframe in the page.
  • 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:

Debugger

  • Skip JavaScript libraries in debugging sessions via the black box icon (Icon for black boxing a JavaScript source).
  • 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 (Icon for black boxing a JavaScript source) 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 (Button to import a style sheet from the file system) to import a style sheet or the create button (Button to create a new style sheet) 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

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.