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 todocument.querySelector()
.$$()
returns an array with the results fromdocument.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:
- 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.