iPhoneで今見ているサイトのHTMLの作りがどうなっているのか見てみたい、と思うことってありませんか？ え、ふつーの人はそんなにない…？
特に自分のブログのスマホ版のレイアウトをカスタマイズするときなんかに、そのレイアウトを見ながら変更していきたいなーと思うことがあります。
そんなとき、この方法が超簡単で便利です。（ただしiPhoneとMacを持っていることが前提です）
1. iPhoneをMacに接続する
まずはケーブルを使ってiPhoneをMacに接続します。
iPhoneのSafariではHTMLソースを見たいサイトをあらかじめ開いておきました。（このブログのトップページ）
2. MacのSafariから見たいURLを選ぶ
次に、MacのSafariの「開発」メニューを開くと、接続しているiPhoneの名前がすでに表示されているはずです。
※もし「開発」メニューが表示されていない場合は、下記の設定をすると出てきます。
Safariのメニューバーの「Safari」> 「環境設定」 > 「詳細」 > 「メニューバーに”開発”メニューを表示」にチェックを入れる。
そのiPhoneの名前にカーソルをあてるとあら不思議！iPhoneのSafariで表示しているサイトのURLが表示されています。複数のタブを開いている場合は、すべてのURLが表示されます。
この中から見たいURLを選ぶと…
3. HTMLがリアルタイムで見られます
HTMLが表示されました！！
しかも、Macである部分のソースを選択すると…
なんとiPhoneのSafariでは、選択した箇所がリアルタイムにハイライト（色が変わる）されます！！
さらにさらに、iPhone側で別のページに行くと、MacのHTML画面もすぐにそのページのHTMLに変わります。
ひと言 by てにもつ
こんなに簡単にできると思いませんでしたー…。
WordPressのブログをスマホ用のレイアウトにするプラグイン「WPtouch」のレイアウトのカスタマイズなんかに重宝しそうですね。
