Safari DevTools Get it free
Free · Open source · Version 1.5

Safari DevToolsDevTools, inside the page.

A Chrome-style DevTools panel that runs right inside any web page, in Safari, Chrome and on your iPhone. No cable, no Xcode, no setup.

Add to Chrome Add to Safari

Works in Safari, Chrome and Edge · Mac, iPhone, iPad and in-app WebViews · One file, no dependencies

This is the real panel. Click around.

acme.shop/checkout · demo
Loading the live demo…
The live demo needs a wider screen.
Open it full screen

A sample shop with a deliberate bug. The Claude answer and Jira ticket are simulated here; everything else is the real tool.

Features

Everything you reach for in Chrome. And more.

Sixteen panels in a single file. It looks and works like Chrome DevTools, so there's nothing new to learn.

Console

Logs, errors and rejections with source-mapped stack traces that point to your TypeScript. Autocomplete, $0, copy(), live expressions and real console.table.

New in 1.4

Explain with Claude

One click sends the error, your original source and the recent requests to Claude, and you get back the cause and a fix. You see the prompt before it's sent.

Elements & CSS

DOM tree through shadow roots, live CSS with suggestions for your var(--tokens), grid and flex overlays, a measure tool, and a Changes tab that copies your edits as CSS.

Network

fetch, XHR, WebSocket and SSE with a waterfall. Mock, block or delay any request, throttle to 3G or offline, and export a HAR file.

New in 1.4

Accessibility

The accessibility tree as screen readers get it, a numbered tab order on the page, a focus tracker, and a contrast fixer that suggests the nearest passing colour from your tokens.

New in 1.4

One-click Jira bugs

Steps to reproduce are captured for you, with console errors, a HAR file, device info and a screenshot. Sign-in codes and tokens are blanked automatically.

Responsive & emulation

iPhone and iPad sizes side by side with synced scrolling. Emulate dark mode, reduced motion, RTL, larger text and pseudo-localisation.

Snapshots & coverage

Save a component as a baseline and see every style, size and text change after an edit. Find CSS rules and design tokens that nothing uses.

Components & state

Angular signals, Lit and React trees with editable state, plus a Redux, NgRx and Zustand action log with time travel, which Safari never had.

iPhone

Debug your iPhone from your Mac, over Wi-Fi.

Run a tiny relay on your Mac and the phone's console and network stream straight to your desktop browser. Type JavaScript on the Mac, it runs on the phone.

  • No cable, no Xcode, no pairing
  • Works in in-app WebViews that Web Inspector can't open
  • On the phone itself, the full panel opens with one tap
# on your Mac, in the cloned repo (Node 18+, nothing to install)
node standalone/remote/relay.js

# then open on the iPhone
http://<your-mac-ip>:9230/demo

# and watch on the Mac
http://localhost:9230
import { test, expect } from './safari-devtools.fixture';

test('checkout has no errors', async ({ page, devtools }) => {
  await devtools.mockBeforeLoad('/api/coupon', { status: 410 });
  await page.goto('/checkout');
  expect(await devtools.errors()).toEqual([]);
  expect(await devtools.tabOrder()).not.toHaveLength(0);
});
Tests & AI agents

Built for Playwright and AI agents, too.

Everything in the panel is also a JSON API. Use it from Playwright in WebKit, WebDriver for real Safari, a small HTTP API, or an MCP server, so Claude, Cursor and other agents can read and drive the page.

  • Playwright fixture with failure attachments (HAR + debug report)
  • MCP tools: console, network, audit, accessibility tree, snapshots, bug reports
  • Mock, block and throttle from your tests
How it compares

What you get that you didn't have.

Safari DevToolsSafari Web InspectorEruda / vConsole
Runs on iPhone with no Mac or cable✓✕✓
Same panel in Safari and Chrome✓Safari only✓
Source-mapped stack traces✓✓✕
Explain errors with Claude✓✕✕
One-click Jira bug reports✓✕✕
Accessibility tree, tab order, contrast fixer✓Partial✕
Mock, block or delay requests✓✓✕
Redux / NgRx time travel✓✕✕
Design-token editor and coverage✓✕✕
Playwright fixture and MCP server✓✕✕
Step-through JavaScript debugger✕✓✕

It runs inside the page, so it can't see HttpOnly cookies or pause JavaScript. For those, it hands off to the browser's own tools.

Install

Get it in a minute.

  1. Download the extension and unzip it.
  2. Open chrome://extensions (or edge://extensions) and turn on Developer mode.
  3. Click Load unpacked and choose the safari-devtools-chrome folder.
  4. Open any site and press ⌥ ⇧ D or click the icon.
Download for ChromeView source
Demo

See it in one minute.

Who it's for

One tool, a lot of jobs.

Front-end developersSafari-only bugs, iPhone layouts, web components and shadow DOM.
QABug reports with steps, errors, HAR and device info, filed in Jira.
DesignersLive token edits, grid overlays, a measure tool and design overlays.
AccessibilityScreen-reader tree, tab order, focus traps and contrast fixes.
Test automationPlaywright in WebKit, WebDriver for real Safari, network mocks.
AI agentsAn MCP server so Claude, Cursor and others can inspect live pages.

Questions

How do I see console logs on an iPhone without a Mac?

Load Safari DevTools on the page with the bookmarklet or a script tag, and the full console opens right on the phone. Or start remote mode and watch the phone's console and network from any computer on the same Wi-Fi.

Is it an alternative to Eruda or vConsole?

Yes. Like them it runs inside the page, but it also maps errors to your original source, mocks and throttles requests, checks accessibility, time-travels Redux and NgRx state, and looks like Chrome DevTools.

Is it really free?

Yes. It's open source under the MIT licence. Use it at work, change it, ship it.

Does it send my data anywhere?

No. Everything stays in the page. "Explain with Claude" and Jira reports only run through a relay you start on your own machine, with your own keys, and you see the prompt before anything is sent. Sign-in codes and tokens are blanked first.

Does it work on iPhone and iPad?

Yes, in Safari and in in-app WebViews. Load it with the script tag or the bookmarklet, or stream it to your Mac with remote mode.

Why not just use Safari's Web Inspector?

Web Inspector needs a Mac, a cable or pairing, and doesn't open most in-app WebViews. Safari DevTools runs in the page itself, looks like Chrome DevTools and adds things Safari doesn't have, like Redux time travel, an accessibility toolkit and AI explanations.

What can't it do?

It runs inside the page, so it can't pause JavaScript at breakpoints, see HttpOnly cookies or browser-added headers, or read cross-origin stylesheets. Use the browser's own tools for those.

My company blocks extensions. Can I still use it?

Usually, yes. The bookmarklet and the script tag aren't extensions, so extension policies don't apply to them.