yoshiiiOSのSafariのWebインスペクタを使ってみる
SafariのWebインスペクタ for MAC
ウェブページの制作を行う際、iPhoneでどのように表示されるか・動作するかをチェックする際に便利な機能があるのをご存知でしょうか？ Safariには「Webインスペクタ」という開発者向けツールが標準で搭載されており、この「Webインスペクタ」で要素の検証や、デバックなどがPCから調査できる!という機能です。
ご利用の手順
まず、iPhone側の準備としては以下の通りになります。
- ホーム画面から、「設定」→「Safari」を開きます。
- 画面一番下の「詳細」を開き、「Webインスペクタ」をONにします。
次に、PC側の設定。
- MacからSafariを立ち上げます。
- Safariのメニューから「環境設定」を開きます。
- 「詳細」タブから「メニューバーに"開発"メニューを表示」にチェックをいれます。
- メニューバーに「開発」が追加されていることを確認します。
上記の設定が完了したら、MacとiPhoneデバイスをUSBで接続します。これで設定作業は完了です。
実際に使ってみる！
設定作業が完了したら、実際にどのように使えるのかを試してみてください。
まず、確認したいページをiPhoneのSafariでひらきます。
次に、PC側でSafariを開き、先ほど追加した「開発」から「（ユーザー名）iPhone」にマウスオーバーすると、今iPhoneで開いているサイトのURLが表示されているので、そちらをクリック！
なんと！！
Webインスペクタが開き、スマホでの要素の検証がこんなにも簡単にできちゃいます！
こんな機能をあったなんて知らなかった。。。という方！
ぜひ使ってみてください！！
注意点
- ケーブルをつなぎっぱなしにしているとMacからiPhoneで表示しているページが丸見えになってしまいますので、必要がない場合はケーブルを抜く、もしくは「Webインスペクタ」の設定をOFFにすることをお忘れなく！
参考
