いまさら、Webインスペクタ(もうすぐiOS7やけど)

by kozaru, 2013/09/04

ちまたでは、iOS7が話題になっておりますが、いまさら「Webインスペクタ」機能をつかってみました!

iOSとMacをUSBで接続して、iOSのSafari内で表示されているページを開発モードで、Macでみる事ができる仕組。レスポンシブなサイトを作成しているときのデバッグなどに!

iPhoneの設定

①設定→Safari
2013-09-04 0.23 のイメージ

②Safari→詳細
2013-09-04 0.24 のイメージ

③詳細→Webインスペクタ ON
2013-09-04 0.24 のイメージ (1)

Macの設定

環境設定→詳細→メニューバーに”開発”メニューを表示 ON
スクリーンショット 2013-09-04 0.16.22

iPhoneとMacをUSB接続後

①iPhoneでSafariにページを表示後、Mac Safariの開発メニュー→(iPhone名)→サイト名を選択
スクリーンショット 2013-09-04 0.17.54

②Macに①で選択したサイトのデベロッパツール表示
スクリーンショット 2013-09-04 0.18.07

やろうと思ったきっかけと参考にしたサイト

ちょこっと前の記事で、「最近流行りのウェブ開発系ツールまとめ(主にデザイン)」でPhotoShopのリモート機能(Skala Preview)を知って、似たようなのがブラウザでもないかなぁと思っていた矢先、

iOS6の新機能「WEBインスペクタ」を使ってみた

という記事をみつけて、やってみました。
iOSシミュレータでもできる様子(ローカルファイルの際、便利!)
iOS6の機能なので、いまさらですが、自分メモ!

LINEで送る
Pocket