4
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

今更理解するSafariデベロッパーツール

Last updated at Posted at 2019-11-09

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

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

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

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

スクリーンショット 2019-11-09 19.58.47.png
デベロッパーツールはこのようになっています。この画像を見ればこのツールが何をできるのかはだいたい想像ができると思いますが、この記事では以下のような項目を解説していきます。

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

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

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

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

スニペットエディタ

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

Webインスペクタ

スクリーンショット 2019-11-09 20.52.12.png

このツールを起動すると上のようなごちゃごちゃした画面がフルディスプレイで出てきます。ここからページのリソースやコンソール、デバッグ、タイムラインなどの機能が使えるようになっています。ここら辺は触っていればすぐに慣れるようになると思います。
スクリーンショット 2019-11-09 21.00.59.png
これがWebインスペクタからも入れるタイムラインです。開発タブのタイムラインの「記録を開始」ボタンを押すことによってWebページに起こったイベントやCPUについてリアルタイムに確認することができます。私はCPUの挙動については全く知りませんが楽しいのでよく眺めます。

要素選択

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

まとめ

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

4
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?