Mac、iPad、iPhoneでSafari Webインスペクタを使用する方法

Web開発者であれば、SafariのWebインスペクタについては既にご存知でしょう。しかし、Safariを使った開発を始めたばかりの方、あるいはWeb開発のキャリアを始めたばかりの方のために、このガイドではiOSとMacでSafariのWebインスペクタを使い始めるための基本事項を説明します。

MacのSafariウェブインスペクタ

Safari Web インスペクタとは何ですか?

このツールをまだ使い慣れていない方のために、Safari WebインスペクタはWeb開発の助けになります。ページ要素の確認、変更、問題のトラブルシューティング、ページパフォーマンスの確認が可能です。Appleは以下のように説明しています。

Web InspectorはSafariの主要なWeb開発ツールです。Web Inspectorを使用すると、Safariタブ内のWebコンテンツのパフォーマンスを検査、調整、デバッグ、分析できます。

Safari Webインスペクタを有効にして開く

iPhone、iPad、Macでの開発にはSafariのWebインスペクタが便利です。iOSとmacOSでWebインスペクタを有効にして開く方法を以下にご紹介します。必要な時にすぐに使えるようになります。

Macの場合

iOS でも Mac でも、Web インスペクタを頻繁に使用する場合は、簡単にアクセスできるようにメニューバーに[開発]タブを追加することをお勧めします。

コンピュータでSafariを開き、メニューバーから「Safari」 > 「設定」または「環境設定」をクリックします。
[詳細設定]タブを選択します。
下部にある「Web開発者向けの機能を表示する」または「メニューバーに開発メニューを表示する」のボックスをオンにします。

Safariの詳細設定で「Web開発者向けの機能を表示」を有効にする

Web インスペクタを有効にするには、メニューバーから[開発] > [Web インスペクタを表示]をクリックします。

メニューバーに「開発」ボタンを追加したくない場合は、Macのショートカットを使ってWebインスペクタにアクセスできます。検査したいページに移動し、右クリックしてコンテキストメニューから「要素を検査」を選択します。

MacのSafariで要素を検査するショートカット

iOS デバイスで Safari 用の Web Inspector を使用する予定の場合は、 Mac のメニューバーに「開発」ボタンが必要になることに注意してください。

iPhoneおよびiPad向け

MacでiOS用Webインスペクタを使用するには、USBケーブルを使ってiPhoneまたはiPadをコンピュータに接続します。次に、以下の手順に従ってツールを有効にします。

iPhone または iPad で設定アプリを開き、 Safariをタップします。
一番下までスクロールして「詳細設定」をタップします。
Web Inspectorのトグルを有効にします。

iPhoneでSafariのWebインスペクタを有効にする

次に、iOSデバイスとMacでSafariが開いていることを確認してください。その後、以下の手順に従ってください。

1) Mac の Safari メニューバーから「開発」をクリックすると、 iPhoneまたはiPad がここに表示されます。

2)デバイスの上にマウスを移動すると、モバイルデバイスの Safari で Web サイトが開かれます。

3)必要なものを選択すると、Web インスペクタが新しいウィンドウで開き、使用できるようになります。

注： iPhoneまたはiPadをこの作業に初めて使用する場合は、マウスカーソルをiPhoneまたはiPadに合わせて「開発に使用」をクリックしてください。次に、 iPhoneまたはiPadで「信頼」をタップし、デバイスのパスコードを入力してください。これで、このiOSまたはiPadOSデバイスをWeb検査に使用する準備が整いました。それでも修正エラーが表示される場合は、USBケーブルを一度取り外し、再度差し込んでください。

Safari Webインスペクタの位置

iOS 用の Web インスペクタを使用している場合は、Web インスペクタは独自のフローティングウィンドウ内に残ります。

MacのSafariでWebインスペクタを使用している場合は、位置を変更できます。デフォルトでは、WebインスペクタはSafariウィンドウの下部に表示されます。Webインスペクタを切り離して別のウィンドウに表示したり、Safariの左側または右側にドッキングしたりするには、インスペクタウィンドウの左上にあるボタンのいずれかを選択してください。

MacでSafariのWebインスペクタを配置する

Webインスペクタについて知る

Safari Web インスペクタには、便利なツールバーとタブがあり、ニーズに合わせて調整できるオプションがいくつか用意されています。

Webインスペクタツールバー

「X」でインスペクターを閉じる
ボタンの配置
リロードボタン
ウェブアーカイブのダウンロードボタン
アクティビティビューアー (リソース数、リソースサイズ、読み込み時間、ログ、エラー、警告)
要素選択ボタン
検索ボックス

Webインスペクタのタブ

すべてのタブを使用することも、一部のタブだけを使用することもできます。タブを右クリックするか、Controlキーを押しながらクリック して、表示したいタブのチェックをオンまたはオフにすることができます。タブをドラッグして新しい位置に並べ替えることもできます。タブバーの右端には「設定」ボタンがあります。このボタンから、タブ、インデント、ソースマップ、ズームなどの設定を調整できます。

Safari で右クリックして Web インスペクタのタブを管理する