Keyboard Shortcuts Browser Developer Tools

Browser Developer Tools let you inspect, debug, and analyze any webpage. They are built into every major browser and require no installation. While developers use them constantly, everyday users also benefit from knowing a few key shortcuts — for inspecting page source, testing mobile layouts, and checking network requests.

Opening Developer Tools

  F12              → Open/close Developer Tools (all major browsers)
  Ctrl + Shift + I → Open DevTools (Windows/Linux)
  Cmd + Option + I → Open DevTools (Mac)
  Right-click → "Inspect" → opens DevTools focused on that element

Developer Tools Panels

  PANEL TABS (accessible by clicking or pressing Ctrl + [ / Ctrl + ]):
  ┌────────────────────────────────────────────────────────────┐
  │ Elements │ Console │ Sources │ Network │ Performance │ ... │
  └────────────────────────────────────────────────────────────┘

  Elements:    HTML and CSS structure of the page
  Console:     JavaScript output, errors, and command input
  Sources:     JavaScript and CSS files
  Network:     All HTTP requests the page makes
  Performance: Page load and rendering speed analysis
  Application: Cookies, local storage, service workers

Panel Keyboard Navigation

  Ctrl + [ (left bracket)   → Move to previous DevTools panel
  Ctrl + ] (right bracket)  → Move to next DevTools panel
  Ctrl + Shift + P          → Open DevTools Command Palette
                               (search for any DevTools feature)
  Esc                       → Toggle drawer (Console panel) at bottom
  F1  or  Ctrl + ,          → Open DevTools Settings

Elements Panel — Inspect HTML and CSS

  F12 → Elements tab is default

  INSIDE THE ELEMENTS PANEL:
  Arrow keys      → Expand/collapse HTML nodes
  F2              → Edit the selected element's HTML
  Delete          → Remove the selected element from DOM
  H               → Toggle visibility of element (adds display:none)
  Ctrl + Z        → Undo changes in DevTools

  USEFUL ACTIONS:
  Right-click element → "Copy" → "Copy outerHTML" → copies the HTML
  Right-click element → "Edit as HTML" → edit inline

Console Panel — Run JavaScript

  Ctrl + ` (backtick)  or  Esc   → Toggle Console drawer
  Click Console tab              → Open full Console panel

  IN THE CONSOLE:
  Type any JavaScript → Enter → runs immediately

  EXAMPLES:
  document.title                    → shows page title
  document.body.style.background = "red"  → turns page red
  window.location.href              → shows current URL
  console.log("hello")             → prints "hello"

  Arrow Up/Down    → cycle through previously typed commands
  Ctrl + L         → clear the console

Network Panel — See All Page Requests

  Ctrl + Shift + I → DevTools → Network tab
  Ctrl + R         → Reload page and capture all network requests

  NETWORK PANEL COLUMNS:
  Name:     file or endpoint requested
  Status:   HTTP response code (200=OK, 404=not found, 500=server error)
  Type:     document, script, stylesheet, image, fetch, etc.
  Size:     file size
  Time:     how long the request took

  FILTER BY TYPE (click buttons in toolbar):
  All │ Fetch/XHR │ JS │ CSS │ Img │ Media │ Font │ Doc │ WS

Device Mode — Test Mobile Layouts

  Ctrl + Shift + M   → Toggle Device Mode (responsive design view)
  Cmd + Shift + M    → Toggle Device Mode (Mac)

  DEVICE MODE:
  ┌─────────────────────────────────────────────────────┐
  │ [iPhone 14 ▾] [390 x 844] [100% ▾] [↻]              │
  │ ─────────────────────────────────────────────────── │
  │                                                     │
  │           [Mobile view of webpage]                  │
  │                                                     │
  └─────────────────────────────────────────────────────┘

  Choose device from dropdown to simulate any phone or tablet.
  Rotate: Ctrl + Shift + M → click rotate icon

Source Maps and Quick File Opening

  Ctrl + P (in DevTools)   → Open any source file by name
                             (like Ctrl+P in a code editor)
  Ctrl + Shift + F         → Search all files for a string

Dock Position

  Ctrl + Shift + D    → Toggle DevTools dock position
                        Cycles: right side → bottom → undocked window
  OR: three-dot menu in DevTools → Dock side → choose position

Quick Reference

  ACTION                        WINDOWS              MAC
  ──────────────────────────────────────────────────────────
  Open/close DevTools           F12                  F12
  Open DevTools                 Ctrl + Shift + I     Cmd + Option + I
  Next panel                    Ctrl + ]             Cmd + ]
  Previous panel                Ctrl + [             Cmd + [
  Command palette               Ctrl + Shift + P     Cmd + Shift + P
  Toggle Console drawer         Esc                  Esc
  Toggle Device Mode            Ctrl + Shift + M     Cmd + Shift + M
  Open file (in DevTools)       Ctrl + P             Cmd + P
  Search all files              Ctrl + Shift + F     Cmd + Shift + F
  Clear console                 Ctrl + L             Ctrl + L

F12 is the gateway to browser Developer Tools. Even if you are not a developer, opening DevTools and exploring the Network tab shows you exactly what a webpage loads and how fast each piece arrives. The Elements tab lets you temporarily edit any webpage for testing — useful for checking how a page would look with different text or colors before implementing a real change.