Tips

General

Screenshots:

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

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.
Right-click a node and click "Scroll Into View" to see it in the page.
Right-click a node and click "Use in Console" to command line as tempN variable.

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

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.

In all panels:

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

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.

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.

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.

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.

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 and pref 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.