Chrome DevTools

Tips & Tricks

@dsternlicht

Cmd + Opt + i 

DevTools

Shift + ?

DevTools - help

Elements

Edit HTML Elements

Edit CSS Properties

Force element state

Change color format

Shift + Click

Color Picker

Source

Cmd + Opt + F

Search in source code

Cmd + p (Go to line ":11")

File switching

Pretty Print {}

Cmd + Click

Multiple carets & selections

Cmd + D

Select next occurrence

Resources

Editing Cookies / LocalStorage

Console

Cmd + Opt + J

Selecting elements in console

Preserve Log

Network

Network Filmstrip

Network Throttling Profiles

DOMContentLoaded

Copy Image as Data URI

Timelime

Monitor Network Performance

Audits

Audits

Device Mode

Device Mode

Device Emulation Sensors

What's Missing?

Debug Animations

Questions?

Thank you!

@dsternlicht