先日、誰もSafariのデベロッパーツールの存在を知らないんじゃないか？という疑問に唐突に駆られたのでその存在を紹介すべく今この記事を書いています。

デベロッパーツールを有効にする

Safariにもデベロッパーツールがあるのを知った僕ですが、最初はいまいち有効にする方法がわかりませんでした。Appleサポートによると
Safari>環境設定>詳細　からメニューバーに開発ツールを表示するようです。

デベロッパーツールの機能

デベロッパーツールはこのようになっています。この画像を見ればこのツールが何をできるのかはだいたい想像ができると思いますが、この記事では以下のような項目を解説していきます。

レスポンシブデザインモード
スニペットエディタ
Webインスペクタとタイムライン
要素選択

レスポンシブデザインモード

上の写真はappleのページをレスポンシブデザインモードで開いたものです。見て分かる通りにwebページをIpad、Iphoneなどの端末サイズで表示しているのを見られるようになっています。この端末たちのイメージをダブルクリックすると横向きの端末でWebページを表示しているのを見られます。さすがApple純正のブラウザだけある、といったところでしょうか。

右上のSafariというところをクリックすると(多少遅いですが)ユーザーエージェントをGoogle ChromeやFireFox、Microsoft Edgeにも変えることができます。

スニペットエディタ

このツールではわざわざコードエディタを開かなくてもコードを直に入力することでHTMLやCSSの表示の簡単な確認ができます。画像ではpタグを作ってCSSでテキストの大きさを変えています。私はプログラミング初心者なのでそこそこ多く使う機能です。私は主にWebサイトで紹介されているcssの見た目を試すために使っています。

Webインスペクタ

このツールを起動すると上のようなごちゃごちゃした画面がフルディスプレイで出てきます。ここからページのリソースやコンソール、デバッグ、タイムラインなどの機能が使えるようになっています。ここら辺は触っていればすぐに慣れるようになると思います。

これがWebインスペクタからも入れるタイムラインです。開発タブのタイムラインの「記録を開始」ボタンを押すことによってWebページに起こったイベントやCPUについてリアルタイムに確認することができます。私はCPUの挙動については全く知りませんが楽しいのでよく眺めます。

要素選択

これが一般的に最もよく使われるツールなのではないでしょうか。このツールに関してはChromeのそれとほぼ同じであると断言して構わないと思います。開発タブから「要素選択を開始」を押したら好きなエレメントを選んでクリックすれば、そのエレメントに該当するコードを見ることができます。

まとめ

Safariのデベロッパーツール、如何だったでしょうか。Chromeのツールのほうが使いやすい、という方に少しでもSafariの開発ツールの良さを知ってもらえれば良いと思っています。