Read more

Valuable Chrome DevTools Shortcuts

Dominik Schöler
September 24, 2015Software engineer at makandra GmbH

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

General

ESC

Illustration web development

Do you need DevOps-experts?

Your development team has a full backlog? No time for infrastructure architecture? Our DevOps team is ready to support you!

  • We build reliable cloud solutions with Infrastructure as code
  • We are experts in security, Linux and databases
  • We support your dev team to perform
Read more Show archive.org snapshot

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.

Posted by Dominik Schöler to makandra dev (2015-09-24 11:33)