ThisCalculator

Everyday

Safari Developer Tools: Debug Websites Easily

Updated · Standard formula, shown below

Safari’s built-in developer tools let you inspect, debug, and optimize websites right in the browser. You can examine and edit HTML/CSS in real time, monitor network requests, debug JavaScript with breakpoints, and audit performance. This guide walks you through the essential workflows, from enabling the tools to fixing common issues.

What You’ll Need

  • A Mac running Safari (any recent version, typically 15 or later).
  • The website you want to debug (either local or online).
  • Basic familiarity with HTML, CSS, and JavaScript is helpful but not required.

Step-by-Step

  1. Enable the Develop menu. Open Safari and go to Safari > Settings (or Preferences in older versions). Click the Advanced tab and check the box next to “Show features for web developers.” This adds a Develop menu to the menu bar.
  2. Open Developer Tools. With the Develop menu visible, you can open the tools in several ways:
    • Press Option + Command + I to open the Web Inspector.
    • Right-click any element on a page and choose Inspect Element.
    • Go to Develop > Show Web Inspector.
  3. Understand the main panels. The Web Inspector opens at the bottom or side of the window. The toolbar at the top shows several tabs: Elements, Console, Sources, Network, Timeline, Storage, and Accessibility. Click each tab to switch between them.
  4. Inspect and edit HTML/CSS. In the Elements tab, you’ll see the page’s HTML structure. Click any element to select it. The right pane shows its CSS rules. You can:
    • Edit HTML: Double-click any tag or text to change it live.
    • Edit CSS: Click a property value, change it, and press Enter to see the update instantly.
    • Add new CSS rules: Click the + icon in the Styles pane.
    • Toggle styles on/off: Uncheck a checkbox next to a rule to disable it.
  5. Work with the Console. The Console tab shows JavaScript errors, warnings, and log messages. You can also type JavaScript directly at the prompt (the > symbol) and press Enter to run it. This is useful for testing functions or variables in the page’s context.
  6. Debug JavaScript with breakpoints. Go to the Sources tab, which lists all loaded scripts. Click a line number to set a breakpoint (a blue arrow appears). Reload the page or trigger the action that runs that code. Execution pauses, and you can:
    • Step through code using the controls at the top (Step Over, Step Into, Step Out).
    • Watch variables in the right panel.
    • See the call stack to understand how you got there.
  7. Monitor network activity. Open the Network tab and reload the page. You’ll see every request (HTML, CSS, JS, images, API calls). Click any request to see details: headers, preview, response, and timing. This helps identify slow or failing resources.
  8. Test responsive design. In the Elements tab, click the Responsive Design Mode icon (a rectangle with arrows) in the toolbar. This lets you simulate different screen sizes and test mobile layouts.
  9. Audit performance. The Timeline tab records page activity (network, layout, scripting, rendering). Click the record button, reload the page, and stop recording to see a flame chart of where time is spent. Use this to spot bottlenecks.
  10. Use the Develop menu extras. The Develop menu offers handy tools:
    • User Agent – simulate different browsers.
    • Disable Caches – force fresh resources.
    • Disable JavaScript – test how the page behaves without JS.
    • Show Page Source – view the raw HTML.

Common Mistakes

  • Forgetting to enable the Develop menu. Without it, you can’t open the inspector via right-click or the menu (though the keyboard shortcut still works).
  • Editing HTML but not saving. Changes are temporary and vanish on reload. Use them for testing, then apply the changes to your source files.
  • Confusing the Console with the JavaScript debugger. The Console is for logging and quick commands; breakpoints and step-through happen in the Sources tab.
  • Ignoring the Network tab for CSS/JS issues. If a stylesheet fails to load, you’ll see a red error there, not in the Console.
  • Using the wrong User Agent. Simulating a different browser can hide real issues if you forget to reset it.

Tips

  • Use the Search field in the Elements tab to find elements by CSS selector or text.
  • In the Console, type document.querySelector('selector') to quickly grab an element and inspect it.
  • Use console.log() liberally in your JavaScript to track values.
  • Right-click any element and choose Copy > Copy Selector to get a unique CSS selector for that element.
  • In the Network tab, use the filter bar to show only XHR or Fetch requests to debug API calls.
  • Keep the Web Inspector open in a separate window by clicking the Separate Inspector icon (a rectangle with an arrow) to avoid clutter.

Troubleshooting

  • Web Inspector won’t open. Make sure you’ve enabled the Develop menu in Settings > Advanced. If the shortcut still fails, try Develop > Show Web Inspector.
  • Breakpoints aren’t hitting. Check that the script is actually loaded (see Network tab). Also ensure the breakpoint is on an executable line, not a blank line or a comment. If the code is minified, use the Pretty Print button (curly braces) to format it.
  • Console shows errors but you don’t know where they come from. Click the file name in the error message to jump to that line in the Sources tab.
  • Network requests are missing. Clear the log and reload the page. Make sure the filter isn’t set to a specific type (like only XHR).
  • Changes to CSS don’t appear. Check that the selector matches the element and that there isn’t a more specific rule overriding it. Use the Computed pane to see which styles apply.
  • The inspector is slow. Close unnecessary panels, and try using the Timeline only when needed. Also disable extensions that might interfere.

Frequently Asked Questions

Q: Can I use Safari Developer Tools on Windows?
A: No, Safari for Windows is no longer supported. You can use a Mac, or use equivalent tools in Chrome or Firefox on Windows.

Q: How do I inspect an element on a mobile device?
A: Connect your iPhone or iPad via USB, enable Web Inspector on the device (Settings > Safari > Advanced), then in Safari on your Mac go to Develop > Your Device and choose the page.

Q: Why do my edits disappear when I refresh?
A: All changes in the Web Inspector are temporary. To make permanent changes, edit your source files and reload.

Q: Can I debug service workers with these tools?
A: Yes, the Storage tab shows service workers and allows you to unregister them. The Network tab shows requests handled by the service worker.

Q: How do I see cookies?
A: Go to the Storage tab and select Cookies from the sidebar. You’ll see all cookies for the current domain.

Q: Is there a way to test different screen sizes?
A: Yes, use Responsive Design Mode (the icon in the toolbar) to simulate various device dimensions.

Related

Method: the standard formula for this calculation, rounded as each result states. See how the calculators work or report an error.