How to Create and Test Local Overrides in Safari Web Inspector

Debugging client-side web applications often requires modifying network behaviour without deploying changes to a staging or production server. Whether you need to mock a failing third-party REST API response, simulate an HTTP 500 error, test how a front-end UI handles unexpected JSON payloads, or edit JavaScript and CSS files directly on a live site, Apple Safari Web Inspector includes a powerful built-in feature called Local Overrides. Located inside the Network tab, Local Overrides allow front-end engineers to intercept outbound HTTP requests, substitute custom response bodies, edit response headers, and redirect requests to local mock fixtures seamlessly.

Understanding Local Overrides in Safari Web Inspector

In Safari, Local Overrides function as a client-side proxy built into WebKit’s network stack:

• Response Mocking: Intercepts network calls matching specific URLs and serves a custom payload (such as modified JSON, HTML, or images) directly from memory or disk without hitting the remote server.
• Header Modification: Allows developers to append, remove, or modify HTTP response headers (e.g. testing altered Content-Type, adding custom X-Custom-Header values, or bypassing restrictive CORS configurations locally).
• Status Code Emulation: Emulate server error codes (e.g. 401 Unauthorized, 404 Not Found, or 503 Service Unavailable) to verify error boundaries and toast notifications.
• Persistent Across Reloads: Once created, an override persists across page refreshes until manually disabled or removed, allowing you to iterate on frontend code without rebuilding backend services.

Enabling the Develop Menu in Safari

To use developer tools and Local Overrides in Safari on macOS:

1. Launch Safari on your Mac.
2. Go to Safari > Settings (Cmd + ,) and select the Advanced tab.
3. Check the box labelled Show features for web developers.
4. Close the Settings window. The Develop menu will now appear in your menu bar.

Creating a Local Override from the Network Tab

The fastest way to mock an existing network request is to generate an override directly from an active resource in the Network panel:

1. Navigate to your web application in Safari.
2. Right-click anywhere on the page and select Inspect Element, then click the Network tab (or press Cmd + Option + I).
3. Trigger the network request (such as clicking a button or reloading the page).
4. In the Network table, locate the target request (e.g. an API endpoint returning /api/user/profile or a bundle script).
5. Right-click the network entry and select Create Local Override.
6. Safari automatically creates a matching rule and displays the override editor interface.

Configuring Mock Response Bodies and Status Codes

Once the Local Override is created, Safari displays the configurable properties in the inspection pane:

• URL Matching: The URL pattern that triggers the override. By default, it matches the exact URL, but you can edit the string to use wildcards or URL prefixes.
• Status Code: Modify the HTTP response status code. To simulate an authentication timeout, change 200 OK to 401 Unauthorized.
• Headers: Click the + button to add custom headers (such as Access-Control-Allow-Origin: *) or double-click existing headers to change their values.
• Response Body Editor: Directly edit the text inside the embedded code editor. For example, modify JSON properties (e.g. changing "isAdmin": false to "isAdmin": true) to test administrator privilege interfaces on the front end.

Click away or press Cmd + S to save your changes to the override.

Testing the Override on the Live Page

With the override active, return to your webpage and re-trigger the action (or refresh the page with Cmd + R):

1. Observe that the web application immediately renders using your mocked response payload.
2. Look in the Network tab: the intercepted request displays a dedicated globe icon or “Override” badge in the status column, confirming that Safari served the mock data locally rather than fetching it over the network.
3. Check the Console tab to verify how your application handles the mocked payload or error response.

Managing, Toggling, and Removing Local Overrides

Safari organizes all local overrides within a centralized management panel:

1. In Web Inspector, click the Network tab.
2. In the left sidebar of the Network tab, look under the Local Overrides heading.
3. Every active and inactive override is listed with its target URL and method.
4. To temporarily bypass an override without deleting it, uncheck the checkbox next to its name.
5. To permanently delete an override, right-click it and choose Delete Local Override (or press the Delete key).

Practical Use Cases for Front-End Engineers

Local Overrides streamline numerous common testing scenarios:

• Prototyping New API Features: Test new UI components against mock backend contracts weeks before backend developers finish the actual database schema or API endpoints.
• Debugging Production Incidents: Safely debug production JavaScript bundles by overriding minified files with unminified, sourcemap-instrumented versions locally.
• Simulating Network Latency and Outages: Combine Local Overrides with Safari Network Throttling to test how web apps behave when specific microservices fail under slow connections.