Chrome DevTools Reference

F12 # open DevTools
Ctrl+Shift+I # open DevTools (Win/Linux)
Cmd+Option+I # open DevTools (Mac)
Ctrl+Shift+J # open Console
Ctrl+Shift+C # inspect element
Ctrl+Shift+M # toggle device toolbar

Ctrl+F # search in Elements
H # hide element
Delete # delete element
F2 # edit as HTML
Ctrl+Z # undo changes
Right-click > Break on # DOM breakpoints
# Edit styles live in Styles pane

console.log() # print message
console.table() # display as table
console.error() # error message
console.warn() # warning message
console.time("label") # start timer
console.timeEnd("label") # end timer
clear() # clear console

Ctrl+E # start/stop recording
Ctrl+R # reload with network log
Ctrl+Shift+R # hard reload
Throttling dropdown # simulate slow network
Disable cache # fresh load every time
Filter: XHR # show only AJAX requests
Waterfall view # timing visualization

Ctrl+E # record performance
Ctrl+Shift+E # reload and record
Screenshots # enable page captures
FPS chart # frames per second
Main thread # JavaScript execution
Network requests # loading timeline
Bottom-up tab # activity breakdown