Chrome

Obligatory disclaimer

Chrome is not my browser of choice. Check out Vivaldi which is also Chromium-based but made by the original CEO of Opera: Jon Stephenson von Tetzchner and still caries a lot of the original philosophy.

Just get it done and leave the browser alone

A short reference for efficiently navigating Chrome DevTools ("Inspect") using the keyboard.

Open DevTools quickly

• Open last used panel: F12 or Ctrl + Shift + I

• Open Console: Ctrl + Shift + J

• Open Elements (Inspect): Ctrl + Shift + C

Move around DevTools

• Next / previous panel: Ctrl + ] / Ctrl + [

• Toggle docking position: Ctrl + Shift + D

• Toggle drawer (bottom panel): Esc

• Open Command Menu (power tool): Ctrl + Shift + P

Inspect & responsive testing

• Toggle Inspect Element mode: Ctrl + Shift + C

• Toggle Device Mode (responsive view): Ctrl + Shift + M

Search & navigation

• Search within current panel: Ctrl + F

• Search across all resources: Ctrl + Shift + F

• Open file (Sources panel): Ctrl + P

• Go to line (in file): Ctrl + G

Reloading the page

• Normal reload: F5 or Ctrl + R

• Hard reload (ignore cache): Ctrl + F5 or Ctrl + Shift + R

How-to

Inspect and modify an element

1. Press Ctrl + Shift + C

2. Click any element on the page

3. Use arrow keys to move in the DOM tree

4. Press Enter to edit attributes or F2 to edit HTML

5. Toggle visibility with H

Quickly tweak CSS

1. Select an element in Elements

2. In the Styles pane:

   • Click a value and use:

     • ↑ / ↓ → ±1

     • Shift + ↑ / ↓ → ±10

     • Alt + ↑ / ↓ → ±0.1

3. Press Tab to jump between properties

Find anything fast (Command Menu)

1. Press Ctrl + Shift + P

2. Start typing:

   • “disable cache”

   • “screenshot”

   • “show network”

3. Press Enter

Debug JavaScript

• Pause / resume execution: F8

• Step over: F10

• Step into: F11

• Step out: Shift + F11

• Toggle breakpoint: Ctrl + B

Notes

• The Command Menu (Ctrl + Shift + P) is the fastest way to access rarely used features.

• Use Ctrl + P + filename instead of browsing folders in Sources.

• Combine Inspect mode + arrow keys for precise DOM navigation.

• Prefer keyboard value adjustments over typing when tuning layout.

See also

• Chrome DevTools → Elements panel (DOM + CSS editing)

• Sources panel (debugging and file navigation)

• Network panel (requests and performance basics)