【2026年最新版】MacのSafariデベロッパーツール完全活用ガイド【Web開発・デバッグ】

※本ページにはプロモーション(広告)が含まれています

はじめに：MacのSafariデベロッパーツールでWeb開発・デバッグを効率化しよう

SafariはmacOSに標準搭載されているブラウザですが、Web開発者向けの強力なデベロッパーツールも内蔵しています。HTMLの構造確認、CSSのリアルタイム編集、JavaScriptのデバッグ、ネットワーク通信の解析など、Web開発に欠かせない機能が揃っています。

ChromeやFirefoxのDevToolsと同様の機能を持ちながら、macOSおよびiOS/iPadOSとの親和性が高く、iPhoneやiPadのSafariをMacからリモートデバッグできる点がSafariならではの強みです。本記事では、デベロッパーツールの有効化から各パネルの使い方、実際の開発・デバッグワークフローまでを詳しく解説します。

デベロッパーツールを有効にする

Safari設定から「開発」メニューを表示する

デフォルトではSafariのメニューバーに「開発」メニューは表示されません。以下の手順で有効にします。

macOS Ventura以降の場合

1. Safariを開き、画面上部のメニューバーから「Safari」→「設定」をクリックします。
2. 「詳細」タブをクリックします。
3. 「Webデベロッパー向けの機能を表示」にチェックを入れます。
4. メニューバーに「開発」メニューが表示されます。

macOS Monterey以前の場合

1. 「Safari」→「環境設定」を開きます。
2. 「詳細」タブを選択します。
3. 「メニューバーに”開発”メニューを表示」にチェックを入れます。

Web Inspectorを開く3つの方法

方法	操作
キーボードショートカット	Option + Command + I
右クリックメニュー	ページ上で右クリック →「要素を調べる」
メニューバー	「開発」→「Web Inspectorを表示」

各パネルの機能と使い方

要素（Elements）パネル：HTMLとCSSを確認・編集する

要素パネルはページのHTML構造とCSSスタイルをリアルタイムで確認・編集できる最も基本的なパネルです。

基本的な使い方

1. Web Inspectorを開き、上部タブの「要素」をクリックします。
2. 左側にHTMLツリー、右側に選択中の要素に適用されているCSSが表示されます。
3. HTML要素をクリックすると、対応するページ上の要素がハイライト表示されます。

CSSをリアルタイムで変更する

1. 要素パネルで変更したい要素を選択します。
2. 右側のCSSパネルで変更したいプロパティをダブルクリックします。
3. 値を入力するとページ上にリアルタイムで反映されます。
4. 新しいプロパティを追加するには、CSSパネルの空白部分をクリックして入力します。

この変更はページをリロードすると元に戻ります。実際にファイルを変更したい場合はソースファイルを編集してください。

要素を選択するインスペクターボタン

Web Inspectorの左上にある矢印アイコン（インスペクターボタン）をクリックすると、マウスカーソルをページ上に移動させた際に要素がハイライトされ、クリックするとその要素が要素パネルで選択されます。特定の要素をすばやく調査したいときに便利です。

コンソール（Console）パネル：JavaScriptのエラーと実行

コンソールパネルはJavaScriptのエラーログを確認したり、コマンドをその場で実行したりするために使います。

エラーの確認方法

1. 上部タブの「コンソール」をクリックします。
2. 赤いアイコンはエラー、黄色は警告を示します。
3. エラーをクリックすると発生箇所のファイル名と行番号が表示されます。

JavaScriptをコンソールで直接実行する

コンソール下部の入力欄にJavaScriptコードを入力してEnterキーで実行できます。

• document.title → ページのタイトルを取得
• document.querySelectorAll('a').length → ページ内のリンク数を取得
• console.log('テスト') → メッセージを出力してデバッグ

ネットワーク（Network）パネル：通信状況を解析する

ネットワークパネルはページが読み込むすべてのリソース（HTML・CSS・JS・画像・APIコールなど）の通信状況を表示します。

基本的な使い方

1. 「ネットワーク」タブをクリックします。
2. ページをリロードすると、読み込まれたすべてのリクエストが一覧表示されます。
3. 各リクエストをクリックすると、リクエスト・レスポンスヘッダー、ボディ、タイミングの詳細が確認できます。

パフォーマンス改善に活用する

• ファイルサイズが大きいリソースを特定して最適化の候補を探す
• 読み込みに時間がかかっているリクエストをタイムライン表示で特定する
• APIのレスポンスボディを確認してデバッグする

ストレージ（Storage）パネル：Cookie・ローカルストレージを管理

ストレージパネルでは、サイトが保存しているCookie・ローカルストレージ・セッションストレージ・IndexedDBなどを確認・編集できます。

• Cookieの値を確認・削除してログイン状態をテストする
• ローカルストレージの値をリアルタイムで変更する
• キャッシュのクリアをストレージ単位で実行する

iPhoneのSafariをMacからリモートデバッグする

リモートデバッグの準備

iPhoneやiPadのSafariで表示されているWebページを、Mac上のSafariデベロッパーツールを使ってデバッグできます。これはモバイル向けWebサイトの開発・テストに非常に役立ちます。

iPhone側の設定

1. iPhoneの「設定」→「Safari」→「詳細」をタップします。
2. 「Webインスペクタ」をオンにします。

Mac側の設定

1. MacのSafariで「開発」メニューが表示されていることを確認します。

リモートデバッグの実行

1. iPhoneをUSBケーブルでMacに接続します。
2. iPhoneのSafariでデバッグしたいページを開きます。
3. MacのSafariのメニューバーから「開発」を開きます。
4. メニューに接続したiPhoneの名前が表示されます。マウスを乗せると、iPhone上で開いているタブの一覧が表示されます。
5. デバッグしたいタブを選択すると、Mac上でWeb Inspectorが開きます。

便利なショートカットキー一覧

操作	ショートカット
Web Inspectorを開く・閉じる	Option + Command + I
コンソールを開く	Option + Command + C
要素を調べる（インスペクターモード）	Option + Command + I（開いた後にボタンクリック）
ページのソースを表示	Option + Command + U
Safariのエラーコンソール	Option + Command + C
キャッシュを無視してリロード	Option + Command + R

よくある質問（FAQ）

Q1. SafariのデベロッパーツールはChromeのDevToolsと同じように使えますか？

基本的な機能（要素検査、コンソール、ネットワーク解析、ストレージ確認）は同様に使えます。UIや一部機能名は異なりますが、Web開発の主要な作業はすべてSafariデベロッパーツールで対応できます。ChromeにあってSafariにない機能としては、Lighthouseによるパフォーマンス計測が挙げられます。

Q2. 「開発」メニューを有効にしたのに表示されない場合は？

Safariを完全に終了して再起動してみてください。また、macOSのバージョンによって設定の場所が異なります（Ventura以降は「設定」、Monterey以前は「環境設定」）。

Q3. リモートデバッグでiPhoneが「開発」メニューに表示されない場合は？

以下を確認してください。①iPhoneのSafariでWebインスペクタがオンになっているか ②USBケーブルが正しく接続され、iPhoneが「信頼」を選択しているか ③MacとiPhoneが同じApple IDでサインインしているか（Wireless Debuggingの場合）。USBケーブルを抜き差しすると認識されることがあります。

Q4. Safariのデベロッパーツールでレスポンシブデザインをテストできますか？

はい。「開発」→「レスポンシブデザインモードに切り替える」（またはOption + Command + R）から画面サイズをシミュレートできます。iPhone・iPad・Mac各サイズのプリセットが用意されており、カスタムサイズの入力も可能です。

Q5. デベロッパーツールでSSL証明書の情報を確認できますか？

はい。ネットワークパネルでHTTPSリクエストを選択し、「セキュリティ」タブを確認すると証明書の発行機関、有効期限、暗号化方式などの詳細情報が確認できます。

まとめ

SafariのデベロッパーツールはmacOSに標準搭載されており、有効化するだけで強力なWeb開発・デバッグ環境がすぐに使えます。

• 「Safari設定」→「詳細」→「Webデベロッパー向けの機能を表示」で有効化
• 要素パネルでHTMLとCSSをリアルタイム編集して素早くデザイン確認
• コンソールパネルでJavaScriptエラーを特定・コードを直接実行
• ネットワークパネルでAPIレスポンスや読み込み時間を分析
• iPhoneをUSBで接続するだけでモバイルSafariのリモートデバッグが可能

特にiOS向けのWebサイト開発では、SafariのリモートデバッグはChrome DevToolsにはできないSafarならではの強力な機能です。ぜひ活用してみてください。