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