Posted almost 5 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.

makandra has been working exclusively with Ruby on Rails since 2007. Our laser focus on a single technology has made us a leader in this space.

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