Safariの開発者ツール
みなさんはSafariのブラウザの開発者ツールについてご存知でしょうか？
GoogleChromeのデベロッパーツールを知っている人は多いかと思います。Chromeのデベロッパーツールでは表示しているサイトのhtmlの要素の検証ややcssなどサイトがどういう構成で成り立っているか調べる事ができる検証ツールです。
同じような機能はブラウザのSafariにも存在していて、Safariでは開発者ツールという名前となっています。更にSafariの開発者ツールではMacに接続されているiPhoneについても同様にhtmlの要素の検証などが行なえます。
今回の記事ではSafariの開発者ツールについて、表示のさせ方や使い方をご紹介します。ぜひSafariの開発者ツールを使いこなしましょう。
Safariの開発者ツールの表示方法
デフォルトではSafariの開発者ツールは非表示となっています。まずはSafariの開発者ツールを表示させましょう。
Safariのメニューを開き「環境設定」を選択します。
次に環境設定の中の詳細タブを開きます。
その中に「メニューバーに"開発"メニューを表示」という項目があるので、ここにチェックを入れます。
するとSafariのメニューバーに「開発」メニューが追加されます。
メニューバーに開発メニューが追加されていれば、以上で設定は完了です。
Safariの開発者ツールのWebインスペクタの使い方
それではSafariuのメニューバーに追加した開発メニューを開いてみましょう。
Safariの開発メニューを開くとかなり多くの機能が表示されます。
今回はその中のWebインスペクタの機能について解説していきます。
Webインスペクタを表示
適当なサイトをSafariで開き、開発メニューの「Webインスペクタを表示」を選択しましょう。
するとSafariでhtmlの要素の検証やサイトの中身を調べることができるWebインスペクタが表示されます。
ブラウザでのサイトのデバッグ時などに利用しましょう。
iPhoneのSafariでのWebインスペクタ
iPhoneのSafariで表示しているWebサイトをMacのSafariのWebインスペクタで表示させることができます。これによりiPhoneでみているスマホサイトのhtmlの要素の検証などが行なえます。
設定するにはまずiPhone側の設定が必要です。
iPhoneの「設定」からSafariを選択しましょう。
Safariの設定の中で一番下に「詳細」というメニューがありますので、こちらをタップします。
Safariの設定の詳細メニューの中に「Webインスペクタ」という項目がありますので、こちらを有効にします。
以上でiPhone側の設定は完了です。それではMacとiPhoneを接続しましょう。
iPhoneがMacに接続されている状態で開発メニューを開くと、「○○のiPhone」のようなiPhoneの名前が表示されます。
こちらを開くと、現在iPhoneのSafariで開いているサイトが表示されています。選択しましょう。
すると現在iPhoneのSafariで見ているWebサイトのWebインスペクタが表示されます。
これでiPhoneで見ているサイトの検証が可能になります。
まとめ
いかがでしたでしょうか。Safariの開発者メニューについて表示のさせ方やWebインスペクタの使い方、iPhoneとの連携の仕方についてご紹介しました。
GoogleChromeのデベロッパーツールを普段使っていて、Safariでも検証が必要なときに「デベロッパーツールと同じような機能はSafariには無いの？」と思っている方にぜひ今回の記事で解説した方法を試していただきたいです。
またSafariの開発者メニューにはWebRTCなど新しい機能の設定など多くの機能があります。ぜひSafariの開発者メニューを表示させて、使いこなしていきましょう。