MacのSafariの開発者ツールとは? 解説と使い方

Safariには、開発者向けの「開発」メニューが存在します。普段は非表示になっていますが、簡単に表示することができます。このメニューには、開発者向けの各種機能が用意されており、便利に使うことができます。

このツールの使い方を解説します。

「開発」メニュー

表示のさせ方

Safari>環境設定⋯>詳細

image1606251330

一番下に「開発」メニューの表示をON/OFFするチェックボックスがあります。これをONにすると、

image1606251331

開発メニューが表示されます。

開発メニューでできること

世の中には、特定のブラウザに特化したWebサイトがまだ残ったりしています。例えば少し古いサイトなどはInternet Explorerでしか見れない場合などがあります。

Safariでそういったサイトを見ると「IE使ってください」というようなメッセージが出て見ることができなかったりします。それを回避するのがユーザーエージェントの変更です。開発メニューにも用意されていて、「私はIEで見てます」とWebサイトに宣言してIEでしか見ることができないサイトを見ることができるようになる。といった機能があります。

また、「レスポンシブ・デザインモードにする」という機能では、iPhone/iPadなどのウィンドウの大きさでそのサイトを見たときの見え方をシミュレートしてくれます。

英語のサイトですが、「About Safari Web Inspector」でSafariの強力なWebデバッグモードの解説が載っています。

まとめ

Safariの「開発」メニューは、Webページ作成の基本的なデバッグメニューを網羅しています。Google Chromeや、Firefoxにもデバッグメニューはあり、評価も高いのですが、Safariも負けてはいません。

Webページを作成する人にとっては、簡単にiPhoneでの見え方が分かるなど、便利な機能が満載です。常時表示させておく必要はないかもしれませんが、必要になったときにすぐ出せるように「開発」メニューの出し方は覚えておきましょう。


イベント

2017/10/06(金)
UX School(全10回)