How To Use The Safari Developer Tools: Complete macOS Web Inspector Cheatsheet
Key Takeaways & Executive Summary
- Enabling the Develop menu on macOS Sonoma, Sequoia, and macOS Tahoe.
- Full list of essential Safari DevTools keyboard shortcuts.
- How to use the Elements, Console, Sources, Network, and Storage panels.
- Using Safari Responsive Design Mode (Cmd + Ctrl + R) to simulate Apple hardware.
- Debugging WebSockets, Server-Sent Events (SSE), and WebRTC streams in Web Inspector.
Safari Developer Tools (officially known as Apple Web Inspector) provides a comprehensive debugging suite built directly into the WebKit browser engine on macOS. Whether you need to inspect live DOM nodes, evaluate complex JavaScript expressions, audit accessibility trees, or profile network request waterfalls, this guide covers every feature and keyboard shortcut you need to know.
1. Enabling Safari Developer Tools
To open Safari Developer Tools: 1. Open **Safari** on your Mac. 2. Press `Cmd + ,` to open **Settings**. 3. Select the **Advanced** tab. 4. Check **"Show features for web developers"** (or **"Show Develop menu in menu bar"**). Once enabled, right-click anywhere on a webpage and click **Inspect Element** to launch Web Inspector.
2. Top Keyboard Shortcuts for Safari Web Inspector
- **Open Web Inspector:** `Cmd + Option + I` - **Open JavaScript Console:** `Cmd + Option + C` - **View Source HTML:** `Cmd + Option + U` - **Toggle Responsive Design Mode:** `Cmd + Ctrl + R` - **Clear WebKit Caches:** `Cmd + Option + E` - **Step Over Next Function (Debugger):** `F10` - **Step Into Function (Debugger):** `F11`
3. Web Inspector Panels Breakdown
- **Elements:** Live DOM tree editing, pseudo-class toggles (:hover, :active, :focus), CSS variable inheritance, and Flexbox alignment overlays. - **Console:** REPL evaluating in the active window context, object exploration, and unhandled promise warnings. - **Debugger:** Breakpoints, conditional breakpoints, DOM mutation breakpoints, and Web Worker inspection. - **Network:** Resource size, transfer protocol (HTTP/2 vs HTTP/3), response headers, and waterfall timings. - **Storage:** LocalStorage, SessionStorage, IndexedDB records, and ITP cookie restrictions.
Debug Web Applications with Zero-Server ReMOAT
Experience native Chrome DevTools fidelity in your browser over encrypted WebRTC DataChannels. Connect live to staging or customer tabs with a 6-digit PIN.
Try ReMOAT DevTools Now →