テクノロジー・動画・写真・デザインとか

Safariの開発者用デベロッパーツールの表示と簡単な使い方

Internet Explorer、Microsoft Edge、Chrome、Firefox、Safariと様々なブラウザがあるが、それぞれには開発者向けのデベロッパーツールがあるが、あんまり触らないMacのSafariを開いて開発者向けのデベロッパーツールを開こうと思ったら見当たらない。

そんなわけで、表示方法とWebインスペクタの使い方を軽くメモ。

目次

開発者用デベロッパーツールの表示

デフォルトでは開発者向けのデベロッパーツールは、表示されていない。なので、Safariの環境設定から表示させる必要がある。Safariのメニューから環境設定を選択。
Safariの環境設定を開く

環境設定が開いたら、詳細タブを選択し、ウィンドウの下部にあるメニューバーに”開発”メニューを表示にチェックを入れる。
Safariの開発用デベロッパーツールの表示

Webインスペクタの表示

上記の準備ができればメニューバーに開発のメニューが表示されるので、その中のWebインスペクタを表示を選択か、ショートカットキー「Option + Command + I」で開く。
SafariのWebインスペクタを開く

あるいは、調べたい要素の上にカーソルを置いて、右クリックメニュー要素の詳細を表示とすることで、その要素を素早くWebインスペクタを開きつつ、その箇所の要素を素早くできる。個人的にはこれが一番早そう。
SafariもWebインスペクタを簡単に開く

Webインスペクタの画面だが、要素のスタイルシートの詳細を知りたい場合には、サイドバーに詳細を表示するといいだろう。
SafariのWEBインスペクタ詳細を表示

要素を調べる

最初は少し戸惑ったのが要素を調べるための方法。Chromeだったら、矢印アイコンで調べたいところをクリックすれば簡単に知ることができたが、Safariでは二通りの方法がある。

先程紹介したが、調べたい要素の上にカーソルを置いて、右クリックメニュー要素の詳細を表示を選択すれば、その要素を素早くWebインスペクタで表示してくれる。
SafariもWebインスペクタを簡単に開く

もう一つは、開発メニューから要素選択を開始を選択するか、ショートカットキー「Shift + Command + C」。
Safariの要素選択を開始

後はカーソルを動かして調べたい要素をクリック。
カーソルを動かしてSafariの要素を調べる

iPhone表示中のWebページを表示

もう一つ面白い機能の紹介。iPhoneで表示中のWebページをMacのSafariのWebインスペクタで開くというものだ。iPhoneでしか閲覧できないページのソースを確認したい場合には便利かも。

まずはiPhoneの設定を開いてSafariを選択。
iPhoneの設定でSafariを選択

画面をスクロールして、詳細を選択。
iPhoneのSafariの詳細設定

そしたらWebインスペクタのスイッチをオンにする。
iPhoneのSafariのWebインスペクタ

後は、iPhoneのSafariでWebページを開いた状態でライトニングケーブルをMacにつなげると、MacのSafariの開発メニューからアクセスできるようになる。
MadのSafariでiPhoneのSafariのソースを開く

カテゴリ:Mac