開発者ツールを巡る旅（その3）「Safari 開発者ツール」

各Webブラウザで実装されている開発者向けの機能を紹介しています。これまでGoogle Chrome、Firefoxについて紹介してきましたが、今回はMac OSX用のSafariについて紹介します。

DOMを確認するのに使えるインスペクタ

DOMやスタイルの状態を確認するのに便利なのがインスペクタです。

適用されているCSSのスタイル設定についても確認できます。

スタイルを追加する場合には入力補完がきいています。

現在表示しているURLだけでなく、iframeなどで埋め込まれたURLについても解析できます。

JavaScript/CSSの内容を確認できるリソース

インスペクタでJavaScriptファイルなどをクリックするとリソースタブに飛びます。ソースの確認ができるほか、ブレークポイントの設定もできます。

単純にソースを表示する以外にもアクセス時のHTTPヘッダーなど詳細な情報も確認できます。

読み込みにかかった時間がわかるネットワーク

ネットワークタブでは読み込んだリソースに関するサイズ、レイテンシ、転送時間など細かな情報が確認できます。

各リソースをクリックするとインスペクタまたはリソースタブが表示されます。

処理にかかった時間がわかるタイムライン

ネットワーク、レンダリング、JavaScriptなど各処理にかかった時間を計測してグラフ化するのがタイムラインです。

サイトの表示に時間がかかる、またはさらに最適化したいといった時に役立つでしょう。

ローカルストレージ、キャッシュ状態を確認するのにストレージ

ストレージタブではCookie、セッションストレージ、ローカルストレージなどの情報が確認できます。表形式で確認できるのでわかりやすいと思います。

フロントエンド開発の基本と、コンソール

コンソール機能は他のブラウザと変わらず便利に使えるはずです。

セキュリティ上の制限が他のブラウザに比べると厳しいようで、エラーメッセージが多いのが気になります（特にソーシャルボタンでのエラーが多いようです）。

スニペットエディタがあり、そこでちょっとしたコードを書いておくことができます。

iOSでのWebサイトデバッグでは必須

Safariの最大の利点はiOSデバイスを接続してSafari for iOSのデバッグに利用できることでしょう。一部のハイブリッドアプリであれば同様にデバッグができます。

---

Safariの開発者向けの向け機能は他のブラウザに比べるとあまり多機能ではないようです。とはいえMac OSXのデフォルトではブラウザとあって、そのまま使っているだけなのでユーザも相当数います。そして、意外とSafariでは動かないJavaScriptを見かけることが多いです。

Safariで動かない原因を調べるにはやはりSafariを使った方が良いでしょう。スマートフォン対応も踏まえ、Safariを使った開発、デバッグ方法の習得は必要そうです。