Chrome DevTools tips and tricks

devtools-cheatsheet.md

Chrome DevTools tips and tricks

Speed up your workflow with these Mac shortcuts

Cmd-Alt+I               # Open DevTools

Cmd-Alt+J               # Open DevTools into console

Cmd-Alt+U               # Open new tab with HTML source of current URL

Cmd-Shift+C             # Open DevTools and Toggle inspector

Once DevTools is open

Cmd-Shift+C             # Toggle inspector

Esc                     # Toggle console drawer
Ctrl+Tilde              # Open console

---

Shortcuts for Chrome Browser

Some of these work in other applications

Cmd-Shift+T             # Reopen the last tab you closed (Chrome remembers last 10 tabs)

Cmd-Shift+I             # Open new Gmail draft with current URL in message body

Cmd-Alt+Left            # Jump to left tab
Cmd-Alt+Right           # Jump to right tab

Cmd+Left                # Move back in page browse history
Cmd+Right               # Move forward in page browse history

Cmd+Tilde               # Toggle between browser windows (if more than 1 is open)

Cmd-Shift+F             # Toggle fullscreen

fn+Up                   # Jump up in browser window area
fn+Down                 # Jump down in browser window area
Spacebar                # Jump down in browser window area

Address bar mastery

Cmd+L                   # Highlights URL
Cmd-Alt+F               # Adds '?' to bar to create forced search (no accidental URL autofill)
Cmd+L > Cmd+Enter       # Open search or new URL in background tab
Cmd+L > Cmd+Delete      # Clear address bar

Opening links

Cmd+Click               # Open link in background tab
Cmd-Shift+Click         # Open link and go to new tab

Access Chrome features

Cmd+D                   # Bookmarks current page
Cmd-Alt+B               # Open bookmarks manager
Cmd+B                   # Open bookmarks search box

Cmd+Comma               # Open settings
Cmd-Shift+R             # Hard refresh page without cache