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インスペクタのコンソール

今回の事象も、コンソールからエラー内容を確認して、エラー内容をググったところから解決に至りました。
ここまでできるとスマホ実機で問題があった場合にも、すぐ確認できそうです。
便利なので、ぜひ使ってみてください。

 

▼ 業務効率化代行サービス「カワリニ」
「業務効率化って簡単に言うけど、なかなか実現できない。」
そんな状況にいるのなら、お気軽にご相談ください。あなたの代わりに、業務効率化を担当します。

業務効率化代行サービス「カワリニ」のバナー3

 

関連記事一覧

  • コメント ( 0 )

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

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