MacBookとiPhone

iPhoneのSafariで開発者ツールを使う|スマホ実機でCSSが効かないのを解消した

スマホ実機で開発者ツールを使えることを知りました。
PCでChromeのデベロッパーツールなどを使用して、スマホのデザインを確認したりしていますが、実際にスマホ実機で見てみると、ちょっと崩れている、ってのがよくあります。

今回は、スマホ実機で見た時にCSSが効いてなく、デザインが崩れている事象に当たりました。

そんな時、スマホ実機で開発者ツールが使えたらな、と思っていたのですが、なんと!使えるようなので、手順をまとめます。

本記事は、iPhoneのSafariでの記事となります。
Safariの場合は開発者ツールのことを「Webインスペクタ」と呼びます。

用意するもの

  • iPhone
  • Mac
  • 接続ケーブル

設定

iPhone側の設定

まず、iPhone側で、SafariのWebインスペクタを使用する設定をします。

iPhoneの設定から「Safari」を選択

Safariの設定

一番下の「詳細」を選択

Safariの設定詳細

「Webインスペクタ」をONにします。

Safariの設定のWebインスペクタ

Mac側の設定

MacでSafariを立ち上げます。

Safariのメニューから、「環境設定」を開きます。
「詳細」タブで「メニューバーに”開発”メニューを表示」にチェックをいれます。

Safari環境設定

すると、メニューに”開発”メニューが表示されます。

Safari開発メニュー

ここまで設定ができたら、ケーブルでMacとiPhoneを接続します。

実際に開発者ツールを使う

まず、確認したいページをiPhoneのSafariで開きます。
Yahooのページを開いてみます。

iPhoneのSafariでYahooを開く

次に、PC側のSafariで開発メニューを見ると、接続したiPhoneの名前が出てくるので、選択し、その中から先ほどiPhoneで開いたページをクリック。

iPhoneがロックされていると表示されないので注意です。

MacのSafariでページを選択

初めてクリックした場合は、接続の許可をする必要がありますので、「信頼」をタップします。

このコンピュータを信頼しますか?

クリックすると、開発者ツールが起動します。

WEBインスペクタ

上記のようにPCで使用するのと同様に、マウスカーソルを合わせることで、実際にiPhoneのSafariで開いているページ上で青いマスクが掛かり、どの要素か確認できます。
これはすごい!

WEBインスペクタで選択した内容でマスクされる

右上の「コンソール」をクリックすると、エラーが発生していないかを確認できます。

WEBインスペクタのコンソール

今回の事象も、コンソールからエラー内容を確認して、エラー内容をググったところから解決に至りました。

ここまでできるとスマホ実機で問題があった場合にも、すぐ確認できそうです。
便利なので、ぜひ使ってみてください。

 

  • コメント ( 0 )

  • トラックバックは利用できません。

  1. この記事へのコメントはありません。