MacOSやiPhoneをお使いの方は、標準ブラウザとしてSafariを使うことが多いでしょう。
Safariを使って自分のサイトをカスタマイズする時は、「開発」メニューを使うことで、サイトの表示確認を行いながらカスタマイズを行ったり、挙動不審の時にどこに問題があるのかをプログラムを見ることによって解決したりといったことができるようになります。
目次
開発メニューの表示方法
Safariでは、デフォルト設定時には開発メニューは表示されていません。
以下の方法で設定を変更することにより、メニューバーの中に開発メニューが表示されるようになります。
メニューバーの「Safari」→「環境設定」で環境設定画面を開く。
「詳細」タブの「メニューバーに"開発"メニューを表示」にチェックを入れる。
設定を更新して、メニューバーに「開発」メニューが表示されたことを確認する。
開発メニューからWebインスペクタを表示する
Webインスペクタとは
SafariのWebインスペクタ機能とは、現在表示しているページの読み込み速度であったり、ページを構成しているファイル、プログラム群の一覧ができたり、一部のプログラムをリアルタイムにページに反映させるといったことができます。
これにより、動作確認やエラー箇所の追求、デザインの検討が比較的容易になるというWEB開発の補助機能です。
Webインスペクタでできること
ページのリソース確認
ページを構成しているファイル群や、「ソースコード」と呼ばれる現在表示しているページを構成するプログラムを確認することができます。
インスペクタの「リソース」というタブを開くと、ページ構成ファイル群の一覧とページのソースコードが表示されます。
リアルタイムでのプログラム変更とページへの即時反映
Webインスペクタの「要素」タブでは、ページのソースコードのリアルタイムでの編集が行うことができます。
ただし、本番環境のサイトプログラムが書き換わるのではなく、あくまで現在表示されているページのみにテスト反映されるだけなので、インスペクタ上でデザイン等を検討し、決定した変更は各自サーバー上の修正ファイルに記述する必要があります。
以下のように、表示されるソースコードの中から１行選択すると、ページ上で該当する箇所がマークされ、横幅や空白サイズといった情報が表示されるようになります。
ソースコードを編集したい時は、編集したい箇所をダブルクリックすることにより、編集することができるようになります。
デザインの変更も、リアルタイムに確認することができます。
例えば、以下のようなプログラムのデザインはこのように表示されています。
これに、背景色を変更するプログラムを追記することにより、リアルタイムでデザインの確認を行うことができます。
ページの読み込み速度の確認
インスペクタの「タイムライン」タブから、ページの構成要素を読み込む時間を見ることができます。
エラーメッセージの確認
インスペクタの「コンソール」タブの「エラー」を選択すると、エラーがある場合はエラーメッセージが表示されています。
メッセージをダブルクリックすると、エラーの詳細が表示されたり、プログラムで問題が起きている行を表示してくれます。
開発メニューからレスポンシブモードでの表示を確認する
開発メニューでは、色々なサイズのブラウザでの確認を行うことができます。
今日ではスマートフォンの普及に伴い、レスポンシブ対応デザインが必須ですので、デザイン崩れをしていないかどうかを確認する際に便利です。
