Posted over 4 years ago. Visible to the public. Repeats. Linked content.

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.

Once an application no longer requires constant development, it needs periodic maintenance for stable and secure operation. makandra offers monthly maintenance contracts that let you focus on your business while we make sure the lights stay on.

Owner of this card:

Avatar
Dominik Schöler
Last edit:
over 2 years ago
by Dominik Schöler
About this deck:
We are makandra and do test-driven, agile Ruby on Rails software development.
License for source code
Posted by Dominik Schöler to makandra dev
This website uses cookies to improve usability and analyze traffic.
Accept or learn more