SafariのWebインスペクタって何?【iPhone】

Safari


設定アプリの【Safari】→【詳細】に「Webインスペクタ」という機能があることをご存知でしょうか。

iPhoneを使っていて気付くことはまずない機能ですが、何に使うものなのでしょうか。

開発者向けのツール

iPhoneのSafariで読み込んだページをMacから調査できる機能です。

たとえばウェブページの制作を行う際、実際にiPhoneでどのように表示されるか・動作するかを調べる際に使います。

使い方は以下の通りです。

まず設定アプリの【Safari】→【詳細】を開き、【Webインスペクタ】をオンにします。それからSafariでウェブページを表示しましょう。

Safari


次にiPhoneとMacをケーブルでつなぎます。

lightning


MacでSafariを起動。画面上の【Safari】メニューの【環境設定】を開き、【詳細】タブの【メニューバーに”開発”メニューを表示】にチェックを入れます。

Safari


画面上の【開発】メニューを開き、【iPhone】を選択。サブメニューから先ほど開いたウェブページを選びましょう。

Safari


【開発】メニューの【iPhone】は、iPhoneに設定した名前によって表示が異なります。

Webインスペクタで出来ること

ウェブページのソースや、構成しているファイルをチェックできます。たとえばソースで要素の上にカーソルを置くと・・・

Safari


対応する要素がiPhoneのSafariで強調されます。

Safari


ソースは編集でき、その結果はiPhoneのSafariでリアルタイムに表示。この編集は一時的なもので、エラーの解消やデザインの検討などに使います。

このほかにもたくさんの機能があるので、興味がある方はぜひ1度お試しください。

注意点:Macから丸見え

MacとiPhoneをケーブルに繋ぎ、接続先のMacを信頼していると、このWebインスペクタを使えば、MacからiPhoneのSafariで表示しているページが見えてしまいます。

必要なければ、設定アプリの【Safari】→【詳細】で【Webインスペクタ】をオフにしましょう。

Safari


「信頼」については、以下のページでご紹介しています。
iPhone充電時に現れる「信頼しますか」って何?

最新情報はAppBankアプリで!

もっとiPhoneを楽しむための情報がたくさんつまっていますので、ぜひお試しください!

AppBank ・販売元: APPBANK INC.
・掲載時のDL価格: 無料
・カテゴリ: 仕事効率化
・容量: 10.5 MB
・バージョン: 1.0.3
参考になったらシェアお願いします!
Twitterへ Facebookへ はてブへ Pocketへ
▼新着記事やオススメ記事を投稿中!