How to Open Developer Tools in Safari
Safari does not show developer tools by default. To enable them, open Safari and navigate to Safari > Settings (or Preferences on older macOS). Click the Advanced tab and check "Show features for web developers". A new Develop menu will appear in the menu bar.
Once enabled, press Cmd+Option+I to open Web Inspector, or right-click any element on a page and select Inspect Element. The developer tools panel will appear at the bottom or side of the browser window.
Key Panels in Safari Web Inspector
- Elements: Inspect and edit the DOM tree and CSS styles in real time. Click any element to see its box model, computed styles, and applied rules.
- Network: Monitor all HTTP requests, view headers, response bodies, timing waterfalls, and identify slow-loading resources that affect page performance.
- Console: Execute JavaScript, view log output, and debug errors. The console also shows warnings about deprecated APIs and mixed content issues.
- Sources: Set breakpoints, step through JavaScript execution, and inspect call stacks for debugging complex application logic.
- Timelines: Record and analyze rendering performance, JavaScript execution time, layout recalculations, and energy impact on the device.
- Storage: Inspect cookies, local storage, session storage, IndexedDB, and cache data stored by the website.
Debugging iOS Safari from Your Mac
Safari is the only browser engine allowed on iOS, making its developer tools essential for mobile web debugging. Connect your iPhone or iPad to your Mac with a USB cable, then enable Web Inspector in the iOS device settings under Safari > Advanced.
In Safari on your Mac, open the Develop menu. Your connected device and its open tabs will appear in the list. Select any tab to open a full Web Inspector session, letting you inspect elements, debug JavaScript, and profile performance on the actual mobile device.
Safari Developer Tools vs Chrome DevTools
Both browsers offer robust developer tools, but they target different rendering engines. Safari uses WebKit while Chrome uses Blink. Safari excels at energy impact analysis, iOS remote debugging, and testing WebKit-specific behaviors. Chrome DevTools offers Lighthouse audits, more extensive network throttling presets, and a larger ecosystem of extensions.
For comprehensive cross-browser testing, developers should test in both. Tools like Bugster's cross-browser testing can automate this process, running your tests across Safari, Chrome, Firefox, and Edge simultaneously.
