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

[PR] 本ページでは一部にアフィリエイトリンクを利用しており、購入実績などに基づいて手数料を受領しています。

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

AppBank限定クーポン配布中!

フードデリバリー『menu』で最大6,800円オフ!

menu
アプリ内マイページからクーポンコード「RNPA_LZVY67」を入力すると、初回利用は1,200円オフ。2回目以降は800円オフ×7回の計6,800円分が割引に!
1,500円以上の注文から利用できます。

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
目次