Valuable Chrome DevTools Shortcuts

In the DevTools settings, there's a "Shortcuts" section. Found these keyboard shortcuts there:

General

ESC

Toggle drawer

CTRL + ~ or CTRL + `

Show console in drawer

Styles

SHIFT + up/down

Change number by 10

CTRL + up/down

Change number by 100

Elements

H

Toggle "visibility:hidden!important" (useful when debugging page repaint times)

CTRL + hover above element in the DOM list

Don't show the yellow dimensions tooltip (useful when the tooltip covers just the area you need to see).

Drag & Drop

You can actually drag and drop elements around, as well as copy, cut, paste and delete them, either with your mouse or with the common keyboard shortcuts.

Dominik Schöler