How to Use Local Overrides in Safari Web Inspector

This article provides a step-by-step guide on using Local Overrides in the Safari Web Inspector. You will learn how to enable the feature, persistently modify CSS and JavaScript files across page reloads, mock API network responses, and manage your active overrides for efficient web debugging and development.

Prerequisite: Enable the Web Inspector

Before using Local Overrides, ensure the Safari Web Inspector is active.

  1. Open Safari and go to Settings (or Preferences).
  2. Click the Advanced tab.
  3. Check the box at the bottom for Show features for web developers (or Show Develop menu in menu bar on older macOS versions).
  4. Press Command + Option + I on any webpage to open the Web Inspector.

Persistently Modifying CSS and JavaScript

Normally, changes made in the Web Inspector disappear when you refresh the page. Local Overrides save these changes to your local environment so they persist across page loads.

  1. Open the Sources tab in the Web Inspector.
  2. In the left navigation sidebar, locate the CSS or JavaScript file you want to modify.
  3. Right-click (or Control-click) the file name and select Create Local Override.
  4. A new entry will appear in the Local Overrides section at the bottom of the left sidebar, and the file icon will turn purple.
  5. Click the newly created override file and edit the CSS or JavaScript code directly in the central editor pane.
  6. Refresh the webpage. Safari will bypass the network version of the file and load your modified local version instead.

Replacing Network Responses and Mocking Data

You can intercept and replace HTML, JSON, images, or other network payloads to test how your application handles different data states, new assets, or server errors.

  1. Open the Network tab in the Web Inspector and refresh the page to capture the network requests.
  2. Find the specific XHR, Fetch, or resource request you want to replace.
  3. Right-click the request and select Create Response Local Override.
  4. Switch to the Sources tab and click on the newly created override in the Local Overrides section.
  5. Modify the response body (such as JSON data) directly in the central editor pane.
  6. If you want to replace the response with a file from your computer (like a local image or a large mock JSON file), click the Choose File... button at the top right of the editor pane and select your local file.
  7. To test error handling, modify the HTTP status code or headers by clicking the Edit button at the top of the override editor. Here, you can change a 200 status to a 404 or 500 and add custom response headers.

Modifying Outgoing Network Requests

In addition to overriding server responses, Safari allows you to alter outgoing requests before they leave the browser.

  1. In the Network or Sources tab, right-click a resource and select Create Request Local Override.
  2. Locate the override in the Sources tab sidebar.
  3. Use the configuration interface to change the HTTP method (e.g., from GET to POST), modify outgoing request headers, or redirect the request URL to a completely different staging or local endpoint.

Managing and Deleting Overrides

Active overrides will persist until you turn them off, which can break websites if you forget they are running. You can manage all overrides in the Sources tab under the Local Overrides panel in the left sidebar.

  • Disable a single override: Uncheck the box next to the specific override to temporarily revert to the live network version without losing your custom edits.
  • Disable all overrides: Click the icon that looks like a box with a line through it (or the warning icon) in the Local Overrides section header to globally disable all overrides at once.
  • Delete an override: Right-click the specific override in the sidebar and select Delete Local Override to permanently remove it.