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 book lover

Growing Rails Applications in Practice

Check out our e-book. Learn to structure large Ruby on Rails codebases with the tools you already know and love.

  • Introduce design conventions for controllers and user-facing models
  • Create a system for growth
  • Build applications to last
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)