Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save rolife/ecb19a739e31d006b085 to your computer and use it in GitHub Desktop.
Save rolife/ecb19a739e31d006b085 to your computer and use it in GitHub Desktop.

Chrome Developer Tools – Useful Shortcuts (Mac OS X)

General

⌥⌘I Toggle Developer Tools
⌥⌘C Toggle JavaScript Console
⌥⌘U Show Source

All Panels

⌘[/⌘] Go to the panel to the left/right
⌥⌘[/⌥⌘] Go back/f or ward in panel history
Toggle console
⌘F Search
⌥⌘F Search across all sources
⇧⌘C Select node to inspect
⌘O Go to source
⌘G/⇧⌘G Find next/previous
⌘L Go to line
F1 or ? Show general settings

Console

⌘K or ⌃L Clear console
Autocomplete common prefix
Accept suggestion
↓/↑ Next/previous line
⌥N/⌥P Next/previous command
Execute command

Elements Panel

↑/↓ Navigate elements
→/← Expand/collapse
Edit attribute
H Hide element
F2 Toggle edit as HTML

Styles Pane

⇥/⇧⇥ Next/previous property
Increment value
Decrement value
⇞ or ⇧↑ Increment by 10
⇟ or ⇧↓ Decrement by 10
⇧⇞ Increment by 100
⇧⇟ Decrement by 100
⌥⇞ Increment by 0.1
⌥⇟ Decrement by 0.1

Sources Panel

F8 Pause/Continue
F10 or ⌘’ Step over
F11 or ⌘; Step into
⇧F11 or ⇧⌘; Step out
⌃./⌃, Next/previous call frame
⌃⇧E Evaluate selection in console
⇧⌘O Go to member
⌘B Toggle breakpoint
⌘/ Toggle comment

Timeline Panel

⌘E Start/stop recording
⌘S Save timeline data
⌘O Load timeline data

Profiles Panel

⌘E Start/stop recording
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment