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 Developer Toolbar command:
screenshot [filename] [options]
.
Settings:
- Choose between a light, a dark and a Firebug 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 it and all its descendants.
- Click on the last breakcrumb 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.
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.
Developer Toolbar
- Press Shift + F2 to open the Developer Toolbar (GCLI), providing commands to control the page, the developer tools and the browser and other features.
help
opens a popup showing all available commands.security csp
shows the site's Content Security Policy.pref show
,pref set
andpref reset
show, set and reset the value of a browser preference.folder openprofile
opens the current profile's directory in the file explorer.media emulate media type
simulates a specific media type.