iPadやiPhoneで開発者ツールを使ってHTMLソースを見る方法



iPadやiPhoneはRetinaディスプレイです。
WebページをRetina対応したけれど、うまくいかなかったりして、解析しようとしても、iPadやiPhoneではソースを表示したりできません。

しかし、MacのSafariと連携すれば、実はそれができるのです。

以下、解説はiPadですが、iPhoneでも基本同じです。

iPadの設定

Safariの設定でWebインスペクタをオンに

 

iPadの設定メニューから、Safariを選択し、いちばん下の詳細を選択します。

iPadの詳細メニュー

さらに、「Webインスペクタ」をオンにします。
設定の下に描いていますが、ケーブルをMacに接続して、Mac上の開発メニューからインスペクタを表示できます。

iPadのWebインスペクタメニュー

iPadの準備は整ったので、次はケーブルをMacに接続して、MacのSafariで操作します。

ケーブルで接続

MacとiPadをケーブルで接続します。

Safariの設定

開発メニューを表示する

Safariの環境設定から、開発メニューを表示します。
これをやっとかないと、「開発」メニューが表示されません。

Safariの開発メニュー設定

使ってみる

いよいよ、使ってみます。

解析したいページを表示

ケーブルでMacとiPadを接続し、iPadのSafariで解析したいWebページを表示しておきます。

インスペクタを表示

次にMac側のSafariで、開発メニューからWebインスペクタを表示します。

メニューにiPadmini(実際にはiPadに付けている名前)が追加されていて、表示中のWebページが選択できるようになっています。

Safariのメニュー

どうですか?表示できましたか?

超便利なアレ

Webページ上で選択した箇所のソースが見られるという超便利なアレ(名前は知りません)ももちろん使用可能です。

インスペクタ

アレのアイコンをクリックして(青色にして)次にiPad上で、選択(タップ)します。

選択中

この通り、選択箇所のソースがMac上で選択されます。

選択結果

最後に

特にRetinaのiPadやiPhoneで役立つ方法かと思います。

実は案外有名な方法なのかもしれませんが、ちょっと発見したのでご紹介しました。

それにしても、長いタイトルだな・・・。

netamono.では、記事についてのコメントを募集しています。 この記事について、何か気になるところがあれば、お気軽に下の掲示板、または、公式Twitterへどうぞ。
カテゴリー: iPhone/iPod touch, 開発 パーマリンク