普段の制作は、chromeでやってます。

なんか問題起きたら、すぐに「要素を検証」を起動!(alt + command + i)
てな感じで。


この要素を検証にあたるやつが、実はsafariにも隠されていたと知り驚く。

そして、safariのデバッグツールには、ユーザーエージェントの切り替えもついていた!
(挙動のおかしいchromeの拡張機能とか使わなくてもいいんだ!)

そしてそして、safariのデバッグツールを使うと、usbで接続したiphoneのsafariが表示してる画面のデバッグが直接できる。


1.safariのデバッグツールを使えるようにする

普段は隠されていて、日常生活をしていたら見つからない。
1つ星以上のハンターが念で見つけたんだとか。

safariの環境設定>詳細

48


を開くと、「メニューバーに”開発” メニューを表示」というのがあるので、これにチェックを入れる。
(念で入れる)


すると、画面上のメニューに「開発」って文字が出てくる。

この中に、ユーザーエージェントやら、僕のiphoneやら(名前がだだもれしている)が表示されて、いろいろできるってわけ。 

21


そしてchromeと同様に、画面から右クリックでも、要素を検証的なやつを開ける
(要素の詳細という名前らしい)

17




2.iphoneのデバッグのためにiphone側の設定をする

設定アプリ>safari

をひらくと、一番したのほうに「詳細」っていうのがあるのでそれをタップ

Webインスペクタというのがoffになってるのでonにする。

これで準備OK!
(iphoneはiphone5S / iOS7.01です)


3.デバッグ

iphoneとpcをUSBでつないだ状態で、
iphone safariで自分の作ってるサイトを表示。


その状態で、今度は、macのsafariの環境>自分のiphoneの名前>url名を選択すると
iphoneで表示されてるページの、要素の詳細がひらく。

該当するソースとかクリックすると、リアルタイムでiphone側の画面も青くなるから
どこがどの場所なのか、とかも丸見え。




便利になった。

safariの支持率がちょっとあがった。