漫画の地球儀

Safariの開発者ツールの表示方法!【iPhone、連携、使用方法、Webインスペクタ、開発者メニュー】

スポンサーリンク

みなさんはSafariのブラウザの開発者ツールについてご存知と思いますか?

GoogleChromeデベロッパーツールを知っている人は多いかと思います。Chromeデベロッパーツールでは表示しているサイトのhtmlの要素の検証ややcssなどサイトがどういう構成で成り立っているか調べる事が可能な検証ツールです。

同様な機能はブラウザのSafariにも存在していて、Safariでは開発者ツールという名前となっています。更にSafariの開発者ツールではMacに接続されているiPhoneについても同様にhtmlの要素の検証などが行なえます。

今回の記事ではSafariの開発者ツールについて、表示のさせ方や使用方法をご解説します。ぜひSafariの開発者ツールを使いこなしましょう。

Safariの開発者ツールの表示方法

f:id:rick1208:20200531024645p:plain
デフォルトではSafariの開発者ツールは非表示となっています。まず最初はSafariの開発者ツールを出しましょう。
Safariのメニュー
Safariのメニューを開き「環境設定」を選びます。
f:id:rick1208:20200531015652p:plain
次に環境設定の中の詳細タブを開きます。

その中に「メニューバーに"開発"メニューを表示」という項目があるので、ここにチェックを入れます。
f:id:rick1208:20200531015704p:plain
するとSafariのメニューバーに「開発」メニューが追加されます。

メニューバーに開発メニューが追加されていれば、以上で設定は終了です。
f:id:rick1208:20200531021136p:plain

Safariの開発者ツールのWebインスペクタの使用方法


それではSafariuのメニューバーに追加した開発メニューを開いてみましょう。

Safariの開発メニューを開くとかなり多くの機能が表示されます。

ここではその中のWebインスペクタの機能について説明していきます。
f:id:rick1208:20200531021152p:plain

Webインスペクタを表示

適当なサイトをSafariで開き、開発メニューの「Webインスペクタを表示」を選びましょう。
SafariのWebインスペクタ
するとSafariでhtmlの要素の検証やサイトの中身を調べることが可能なWebインスペクタが表示されます。

ブラウザでのサイトのデバッグ時などに使用しましょう。
f:id:rick1208:20200531021230p:plain

iPhoneSafariでのWebインスペクタ

iPhoneSafariで表示しているWebサイトをMacSafariのWebインスペクタで出しることが可能です。これによりiPhoneでみているスマホサイトのhtmlの要素の検証などが行なえます。

設定するにはまずiPhone側の設定が必要です。

iPhoneの「設定」からSafariを選びましょう。
f:id:rick1208:20200531024220p:plain
Safariの設定の中で一番下に「詳細」というメニューがありますので、こちらを押します。
f:id:rick1208:20200531024240p:plain
Safariの設定の詳細メニューの中に「Webインスペクタ」という項目がありますので、こちらを有効にします。
f:id:rick1208:20200531024517p:plain
以上でiPhone側の設定は終了です。それではMaciPhoneを接続しましょう。
iPhoneMacに接続されている状態で開発メニューを開くと、「○○のiPhone」のようなiPhoneの名前が表示されます。

こちらを開くと、現在iPhoneSafariで開いているサイトが表示されています。選びましょう。
f:id:rick1208:20200531024529p:plain
すると現在iPhoneSafariで見ているWebサイトのWebインスペクタが表示されます。

これでiPhoneで見ているサイトの検証が可能になります。
f:id:rick1208:20200531024537p:plain

まとめ

f:id:rick1208:20200531024607p:plain

Safariの開発者メニューについて表示のさせ方やWebインスペクタの使用方法、iPhoneとの連携のやり方についてご解説しました。

GoogleChromeデベロッパーツールを普段使用していて、Safariでも検証が必要なときに「デベロッパーツールと同様な機能はSafariには無いの?」と思っている方にぜひ今回の記事で解説した方法を試していただきたいです。

またSafariの開発者メニューにはWebRTCなど新しい機能の設定など多くの機能があります。ぜひSafariの開発者メニューを出して、使いこなしていきましょう。