Safari DevTools 免费获取
免费 · 开源 · 版本 1.5

Safari DevTools把开发者工具，放进网页里。

一个 Chrome 风格的开发者工具面板，直接在任意网页中运行，支持 Safari、Chrome 和你的 iPhone。无需数据线、无需 Xcode、无需任何配置。

添加到 Chrome 添加到 Safari

支持 Safari、Chrome 和 Edge · Mac、iPhone、iPad 及应用内 WebView · 单个文件，零依赖

这就是真实的面板，随便点点看。

acme.shop/checkout · 演示
正在加载实时演示…
实时演示需要更宽的屏幕。
全屏打开

这是一个故意留有 bug 的示例商店。此处的 Claude 回答和 Jira 工单是模拟的，其余全部是真实工具。面板界面为英文。

功能

Chrome 里常用的，这里都有，而且更多。

单个文件里有 16 个面板。外观和用法都和 Chrome 开发者工具一样，无需重新学习。

控制台

日志、错误和未处理的 Promise 拒绝，堆栈经过 Source Map 映射，直接指向你的 TypeScript 源码。支持自动补全、$0、copy()、实时表达式和真正的 console.table。

1.4 新增

用 Claude 解释报错

一键把报错、原始源码和最近的请求发给 Claude，得到原因分析和修复代码。发送前可以先查看提示词。

元素与 CSS

可深入 Shadow DOM 的 DOM 树，实时编辑 CSS 并提示你的 var(--tokens)，Grid 与 Flex 叠加层、测距工具，以及可把修改复制为 CSS 的 Changes 面板。

网络

fetch、XHR、WebSocket 和 SSE，附带瀑布图。可模拟、拦截或延迟任意请求，限速到 3G 或离线，并导出 HAR 文件。

1.4 新增

无障碍

以读屏软件的视角查看无障碍树，在页面上标出 Tab 键顺序，追踪焦点变化，还能从你的设计变量中推荐最接近且达标的对比度颜色。

1.4 新增

一键提交 Jira 缺陷

自动记录复现步骤，并附上控制台错误、HAR 文件、设备信息和截图。登录验证码和令牌会被自动隐藏。

响应式与模拟

并排预览 iPhone 和 iPad 尺寸，滚动同步。可模拟深色模式、减少动态效果、从右到左排版、放大文字和伪本地化。

快照与覆盖率

把组件保存为基准，修改后可看到每一处样式、尺寸和文字变化。还能找出没有被使用的 CSS 规则和设计变量。

组件与状态

Angular Signals、Lit 和 React 组件树，状态可直接编辑；还有支持时间旅行的 Redux、NgRx、Zustand 操作日志，这是 Safari 从未有过的。

iPhone

通过 Wi-Fi，在 Mac 上调试你的 iPhone。

在 Mac 上运行一个小小的中继，手机上的控制台和网络请求就会实时出现在桌面浏览器里。在 Mac 上输入 JavaScript，就会在手机上执行。

  • 无需数据线、Xcode 或配对
  • 支持 Web 检查器打不开的应用内 WebView
  • 在手机上也能一键打开完整面板
# 在 Mac 上已克隆的仓库中运行（Node 18+，无需安装依赖）
node standalone/remote/relay.js

# 然后在 iPhone 上打开
http://<你的 Mac IP>:9230/demo

# 在 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);
});
测试与 AI 智能体

也为 Playwright 和 AI 智能体而生。

面板里的一切也都提供 JSON API。可以在 WebKit 中通过 Playwright 使用，用 WebDriver 驱动真实的 Safari，也可以通过轻量的 HTTP API 或 MCP 服务器，让 Claude、Cursor 等智能体读取并操作页面。

  • 失败时自动附加 HAR 和调试报告的 Playwright fixture
  • MCP 工具：控制台、网络、审查、无障碍树、快照、缺陷报告
  • 在测试中模拟、拦截和限速请求
对比

那些你以前没有的能力。

Safari DevToolsSafari Web 检查器Eruda / vConsole
无需 Mac 或数据线即可在 iPhone 上运行✓✕✓
Safari 和 Chrome 中使用同一个面板✓仅 Safari✓
经 Source Map 映射的堆栈✓✓✕
用 Claude 解释报错✓✕✕
一键 Jira 缺陷报告✓✕✕
无障碍树、Tab 顺序、对比度修复✓部分✕
模拟、拦截或延迟请求✓✓✕
Redux / NgRx 时间旅行✓✕✕
设计变量编辑器与覆盖率✓✕✕
Playwright fixture 与 MCP 服务器✓✕✕
逐步调试 JavaScript 的调试器✕✓✕

它运行在页面内部，所以看不到 HttpOnly Cookie，也无法暂停 JavaScript。这些场景请使用浏览器自带的工具。

安装

一分钟即可上手。

  1. 下载扩展并解压。
  2. 打开 chrome://extensions（或 edge://extensions），开启开发者模式。
  3. 点击加载已解压的扩展程序，选择 safari-devtools-chrome 文件夹。
  4. 打开任意网站，按 ⌥ ⇧ D，或点击扩展图标。
下载 Chrome 版查看源码
演示

一分钟看懂。

适合谁

一个工具，多种用途。

前端开发者只在 Safari 出现的 bug、iPhone 布局、Web Components 和 Shadow DOM。
QA带有步骤、错误、HAR 和设备信息的缺陷报告，直接提交到 Jira。
设计师实时修改设计变量、Grid 叠加层、测距工具和设计稿叠加对比。
无障碍读屏树、Tab 顺序、焦点陷阱和对比度修复。
自动化测试WebKit 中的 Playwright、驱动真实 Safari 的 WebDriver、网络模拟。
AI 智能体提供 MCP 服务器，让 Claude、Cursor 等检查实时页面。

常见问题

没有 Mac，怎么查看 iPhone 上的控制台日志？

用书签小工具或 script 标签在页面上加载 Safari DevTools，完整的控制台就会直接在手机上打开。也可以启动远程模式，在同一 Wi-Fi 下的任意电脑上查看手机的控制台和网络请求。

它能替代 Eruda 或 vConsole 吗？

可以。它和它们一样运行在页面内部，但还能把报错映射到原始源码、模拟和限速请求、检查无障碍、对 Redux 和 NgRx 状态进行时间旅行，而且外观和 Chrome 开发者工具一样。

真的免费吗？

是的。它基于 MIT 许可证开源，可以在工作中使用、修改和发布。

它会把我的数据发送到别处吗？

不会。所有内容都留在页面中。“用 Claude 解释”和 Jira 报告只会通过你在自己电脑上启动的中继、使用你自己的密钥运行，发送前你能看到提示词。登录验证码和令牌会先被隐藏。

支持 iPhone 和 iPad 吗？

支持，Safari 和应用内 WebView 都可以。通过 script 标签或书签小工具加载，或用远程模式把它显示在 Mac 上。

为什么不直接用 Safari 的 Web 检查器？

Web 检查器需要 Mac、数据线或配对，而且打不开大多数应用内 WebView。Safari DevTools 直接运行在页面里，外观和 Chrome 开发者工具一样，还提供了 Safari 没有的功能，比如 Redux 时间旅行、无障碍工具和 AI 解释。

它做不到什么？

它运行在页面内部，所以无法在断点处暂停 JavaScript，看不到 HttpOnly Cookie 或浏览器自动添加的请求头，也读不了跨域样式表。这些请使用浏览器自带的工具。

公司禁止安装扩展，还能用吗？

通常可以。书签小工具和 script 标签都不是扩展，扩展相关的策略对它们不适用。