Internet Explorer、Microsoft Edge、Chrome、Firefox、Safariと様々なブラウザがあるが、それぞれには開発者向けのデベロッパーツールがあるが、あんまり触らないMacのSafariを開いて開発者向けのデベロッパーツールを開こうと思ったら見当たらない。
そんなわけで、表示方法とWebインスペクタの使い方を軽くメモ。
開発者用デベロッパーツールの表示
デフォルトでは開発者向けのデベロッパーツールは、表示されていない。なので、Safariの環境設定から表示させる必要がある。Safariのメニューから環境設定を選択。
環境設定が開いたら、詳細タブを選択し、ウィンドウの下部にあるメニューバーに”開発”メニューを表示にチェックを入れる。
Webインスペクタの表示
上記の準備ができればメニューバーに開発のメニューが表示されるので、その中のWebインスペクタを表示を選択か、ショートカットキー「Option + Command + I」で開く。
あるいは、調べたい要素の上にカーソルを置いて、右クリックメニューの要素の詳細を表示とすることで、その要素を素早くWebインスペクタを開きつつ、その箇所の要素を素早くできる。個人的にはこれが一番早そう。
Webインスペクタの画面だが、要素のスタイルシートの詳細を知りたい場合には、サイドバーに詳細を表示するといいだろう。
要素を調べる
最初は少し戸惑ったのが要素を調べるための方法。Chromeだったら、矢印アイコンで調べたいところをクリックすれば簡単に知ることができたが、Safariでは二通りの方法がある。
先程紹介したが、調べたい要素の上にカーソルを置いて、右クリックメニューの要素の詳細を表示を選択すれば、その要素を素早くWebインスペクタで表示してくれる。
もう一つは、開発メニューから要素選択を開始を選択するか、ショートカットキー「Shift + Command + C」。
後はカーソルを動かして調べたい要素をクリック。
iPhone表示中のWebページを表示
もう一つ面白い機能の紹介。iPhoneで表示中のWebページをMacのSafariのWebインスペクタで開くというものだ。iPhoneでしか閲覧できないページのソースを確認したい場合には便利かも。
まずはiPhoneの設定を開いてSafariを選択。
画面をスクロールして、詳細を選択。
そしたらWebインスペクタのスイッチをオンにする。
後は、iPhoneのSafariでWebページを開いた状態でライトニングケーブルをMacにつなげると、MacのSafariの開発メニューからアクセスできるようになる。
