Safari DevTools 無料で入手
無料 · オープンソース · バージョン 1.5

Safari DevToolsDevTools を、ページの中に。

Chrome 風の DevTools パネルが、どんな Web ページの中でもそのまま動きます。Safari でも Chrome でも、iPhone でも。ケーブルも Xcode も設定も不要です。

Chrome に追加 Safari に追加

Safari、Chrome、Edge に対応 · Mac、iPhone、iPad、アプリ内 WebView · 1 ファイル、依存なし

本物のパネルです。自由に触ってみてください。

acme.shop/checkout · デモ
ライブデモを読み込み中…
ライブデモは広い画面向けです。
全画面で開く

わざとバグを入れたサンプルショップです。Claude の回答と Jira チケットはここではシミュレーションで、それ以外はすべて本物のツールです。パネルの表示は英語です。

機能

Chrome でいつも使う機能を、すべて。さらにその先も。

1 つのファイルに 16 のパネル。見た目も操作も Chrome DevTools と同じなので、新しく覚えることはありません。

コンソール

ログ、エラー、未処理の reject を表示。ソースマップでスタックトレースを TypeScript の元コードに対応付けます。補完、$0、copy()、ライブ式、本物の console.table にも対応。

1.4 の新機能

Claude でエラーを解説

ワンクリックで、エラーと元のソースコード、直近のリクエストを Claude に送り、原因と修正方法を受け取れます。送信前にプロンプトを確認できます。

要素と CSS

Shadow DOM の中まで見える DOM ツリー、var(--tokens) を補完するライブ CSS 編集、Grid / Flex オーバーレイ、計測ツール、編集内容を CSS としてコピーできる Changes タブ。

ネットワーク

fetch、XHR、WebSocket、SSE をウォーターフォールで表示。任意のリクエストをモック・ブロック・遅延でき、3G やオフラインへのスロットリング、HAR の書き出しも可能。

1.4 の新機能

アクセシビリティ

スクリーンリーダーが受け取るアクセシビリティツリー、ページ上に番号で示すタブ順、フォーカストラッカー、そしてデザイントークンから基準を満たす最も近い色を提案するコントラスト修正。

1.4 の新機能

ワンクリックで Jira にバグ登録

再現手順を自動で記録し、コンソールエラー、HAR ファイル、デバイス情報、スクリーンショットを添付。ログイン用のコードやトークンは自動で伏せられます。

レスポンシブとエミュレーション

iPhone と iPad のサイズを並べて表示し、スクロールも同期。ダークモード、視差効果を減らす、RTL、大きな文字、疑似ローカライズをエミュレート。

スナップショットとカバレッジ

コンポーネントを基準として保存し、編集後のスタイル・サイズ・テキストの変化をすべて確認。どこからも使われていない CSS ルールやデザイントークンも見つけます。

コンポーネントと状態

Angular の Signals、Lit、React のツリーと編集可能な状態。さらに、Safari にはなかったタイムトラベル付きの Redux / NgRx / Zustand アクションログも。

iPhone

Wi-Fi 経由で、Mac から iPhone をデバッグ。

Mac で小さなリレーを動かすだけで、iPhone のコンソールとネットワークがデスクトップのブラウザに流れてきます。Mac で入力した JavaScript は iPhone 上で実行されます。

  • ケーブルも Xcode もペアリングも不要
  • Web インスペクタで開けないアプリ内 WebView でも動作
  • iPhone 上でもワンタップでパネルを開けます
# 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、本物の Safari を動かす WebDriver、小さな HTTP API、そして MCP サーバー経由で、Claude や Cursor などのエージェントがページを読み取り、操作できます。

  • 失敗時に HAR とデバッグレポートを添付する Playwright フィクスチャ
  • MCP ツール：コンソール、ネットワーク、監査、アクセシビリティツリー、スナップショット、バグ報告
  • テストからモック・ブロック・スロットリング
比較

これまでになかったもの。

Safari DevToolsSafari Web インスペクタEruda / vConsole
Mac もケーブルもなしで iPhone で動く✓✕✓
Safari と Chrome で同じパネル✓Safari のみ✓
ソースマップ対応のスタックトレース✓✓✕
Claude でエラーを解説✓✕✕
ワンクリックで Jira バグ報告✓✕✕
アクセシビリティツリー、タブ順、コントラスト修正✓一部✕
リクエストのモック・ブロック・遅延✓✓✕
Redux / NgRx のタイムトラベル✓✕✕
デザイントークンの編集とカバレッジ✓✕✕
Playwright フィクスチャと MCP サーバー✓✕✕
JavaScript のステップ実行デバッガ✕✓✕

ページの中で動くため、HttpOnly Cookie の参照や JavaScript の一時停止はできません。その場合はブラウザ標準のツールを使ってください。

インストール

1 分で導入。

  1. 拡張機能をダウンロードして解凍します。
  2. chrome://extensions（または edge://extensions）を開き、デベロッパー モードをオンにします。
  3. パッケージ化されていない拡張機能を読み込むをクリックし、safari-devtools-chrome フォルダを選びます。
  4. どのサイトでも ⌥ ⇧ D を押すか、アイコンをクリックします。
Chrome 版をダウンロードソースを見る
デモ

1 分でわかる。

こんな人に

ひとつのツールで、いろいろな仕事を。

フロントエンド開発者Safari だけのバグ、iPhone のレイアウト、Web Components と Shadow DOM。
QA手順・エラー・HAR・デバイス情報付きのバグ報告を Jira に登録。
デザイナートークンのライブ編集、グリッドのオーバーレイ、計測ツール、デザインの重ね合わせ。
アクセシビリティスクリーンリーダー用ツリー、タブ順、フォーカストラップ、コントラスト修正。
テスト自動化WebKit での Playwright、本物の Safari を動かす WebDriver、ネットワークのモック。
AI エージェントMCP サーバーで、Claude や Cursor などが実際のページを調べられます。

よくある質問

Mac なしで iPhone のコンソールログを見るには？

ブックマークレットか script タグでページに Safari DevTools を読み込めば、iPhone 上でそのままコンソールが開きます。リモートモードを使えば、同じ Wi-Fi のどのパソコンからでも iPhone のコンソールとネットワークを確認できます。

Eruda や vConsole の代わりになりますか？

はい。同じくページの中で動きますが、エラーを元のソースに対応付け、リクエストのモックやスロットリング、アクセシビリティのチェック、Redux / NgRx の状態のタイムトラベルもでき、見た目は Chrome DevTools と同じです。

本当に無料ですか？

はい。MIT ライセンスのオープンソースです。仕事で使うのも、改変して配布するのも自由です。

データはどこかに送信されますか？

いいえ。すべてページ内にとどまります。「Claude で解説」と Jira 報告は、あなたが自分のマシンで起動したリレーと自分のキーを通してのみ動作し、送信前にプロンプトを確認できます。ログイン用コードやトークンは事前に伏せられます。

iPhone や iPad でも使えますか？

はい。Safari でもアプリ内 WebView でも使えます。script タグかブックマークレットで読み込むか、リモートモードで Mac に表示できます。

Safari の Web インスペクタではだめなのですか？

Web インスペクタには Mac とケーブルまたはペアリングが必要で、多くのアプリ内 WebView は開けません。Safari DevTools はページの中で動き、見た目は Chrome DevTools と同じ。さらに Redux のタイムトラベル、アクセシビリティツール、AI による解説など、Safari にない機能があります。

できないことは？

ページの中で動くため、ブレークポイントでの JavaScript の一時停止、HttpOnly Cookie やブラウザが付けるヘッダーの参照、クロスオリジンのスタイルシートの読み取りはできません。これらはブラウザ標準のツールを使ってください。

会社で拡張機能が禁止されています。それでも使えますか？

たいていは使えます。ブックマークレットと script タグは拡張機能ではないため、拡張機能のポリシーは適用されません。