iPhoneの表示が崩れた時の便利な検証方法

iPhoneのソースコードを表示したい

ご存知のとおりPCでもGoogle ChromやInternet Explorerによってスマホサイズになった時のソースコードを表示することは可能ですよね。

ですが今回私が直面したのが、PCでスマホサイズの検証をしたら上手く表示されているのに、実機(iPhone)で表示確認してみると表示が崩れてしまっているという事象でした。

これは実際にiPhoneで読み込んでいるソースコードを表示するしかないと思い、その方法を調べたところ、めちゃくちゃ良い方法を見つけました。

必要なもの

  • iPhone(表示が崩れている検証機)
  • Mac Book(今回はProを使用)
  • MacとiPhoneを接続するためのコード

以上の3つが必要です。Macがない場合は残念ですがこの方法は適用することができないので、iPhone本体にダウンロードできるアプリなどを探してみてください。

検証方法

iPhoneの設定

まずはiPhone側の設定をします。今回する機能はズバリ、Webインスペクタという機能です。まずはこの機能を有効にします。

iPhoneの「設定」⇨「Safari」にいくと一番下に「詳細」とあるので、その中の「Webインスペクタ」をオンにします。

それができたらSafariで表示が崩れているサイトを表示しておきましょう。

iPhoneとMacを接続

iPhoneの設定ができたら早速Macと接続しておきます。

Mac側の設定

MacでもSafariを開きます。上のメニューバーに「開発」というメニューが表示されていない場合は、「Safari」⇨「環境設定」⇨「詳細」の下部に表示されている「メニューバーに”開発”メニューを表示」にチェックを入れましょう。

メニューバーに「開発」が表示されたら「開発」をクリックします。すると接続したiPhone名が表示されると思うのでポインターを合わせると、iPhoneで表示しているサイトのURLが表示されます。

実際に検証してみる

実際に表示されたiPhone側とMac側の画面です。

PCのデベロッパーツールとほぼ同じ表示になります。iPhoneでpaddingやmarginの色が表示されているの、ちょっと感動しました。

PC側でHTMLソースにカーソルを合わせていくと、選択している要素がiPhone側で色付けされます。これ、本当にすごいのですがPCのデベロッパーツールと同様に、ブラウザ上で検証することもできます。つまりPCでコードを書き換えてみるとタイムリーにiPhone側に反映されるんです。

めちゃくちゃ便利ですよね。

検証が終わったらインスペクタを切る

検証が終わったら忘れずに、iPhoneの設定から「Webインスペクタ」をオフにしておきます。これがオンになっているとMacと接続されている時、常にMac側に映ってしまいます。まあ、そんなに影響はないと思いますが。使わない時は切っておきましょう。

Androidにもこういったタイムリーに検証できる機能や方法があるのか気になるところです。