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

スマホ実機で開発者ツールを使えることを知りました。

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

今回は、スマホ実機で見た時にCSSが効いてなく、デザインが崩れている事象に当たりました。
そんな時、スマホ実機で開発者ツールが使えたらな、と思っていたのですが、なんと！使えるようなので、手順をまとめます。

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

用意するもの

• iPhone
• Mac
• 接続ケーブル

設定

iPhone側の設定

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

一番下の「詳細」を選択

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

Mac側の設定

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

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

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

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

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

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

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

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

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

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

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

▼ 業務効率化代行サービス「カワリニ」
日々の業務で困った点、お悩みなどを解決し、業務を効率化するサービスを展開しています。
改善したいけど、なにぶん分からないことも多い方もいると思います。
大きなコストを掛けずに、あなたの代わりに業務効率化を行います。
お気軽にご相談ください。

ベルトトルト

IT全般はお任せ。
プログラミングメインに活動中。

Java、PHP、C#、SQL、HTML、CSSやWordPressなどプログラミングから、情シスなど奮闘中。
最近の趣味はGAS。

競馬が好き。そしてスポーツ、読書、食べること、スイーツ好き。
好きなことでサービスやアプリを作りたい。