Edge Inspectつかってみた
ついにパソコンラックを片付けてしまったので、現在この状況です
∧__∧ （ ´_ゝ`） (__ つ/￣￣￣/ ┌＼/＿＿＿/ ─＼ │＼＿＿＿＿＿＿＿＼ │ | 某引越センター | ＼|＿＿＿＿＿＿＿＿|
DisplayPortからHDMIに変換できるケーブルが手身近に手に入らないので、せっかく空いたディスプレイが使えません。ちょっともったいない感じがします。
さて、今回はAdobe Creative Cloudで手に入るモバイル向けインスペクトツール「Edge Inspect」を使ってみたのでご紹介します。
用意するものとか対応環境とか
- Creative Cloudのアカウント(無料でOK)
- WindowsかMacのパソコン
- Windowsは7以上、MacはLion以上
- Google Chrome(Ver.14以上)
- AndroidかiOS、Kindleの端末
これに加えて、パソコンと端末が双方とも同じネットワーク上にいられるようなLANが構築されていれば準備完了です。たぶんこれが一番ハードル高そうですが
必要なものをインストールする
まずはパソコン側でAdobe Creative CloudからEdge Inspectをダウンロードして、インストールします。
インストールが終わったら、こんなページが表示されると思います。これに従って今度はGoogle Chromeに拡張機能を追加します。
Chrome ウェブストア - Adobe Edge Inspect CCから拡張機能をインストールします。自動検出したい人はbonjourの設定もお忘れなく。これが終わったら準備完了です。
今度は端末側の設定です。こちらはアプリをインストールして、パソコンと同じネットワークに接続するだけですね。
http://forums.adobe.com/docs/DOC-2883
- iOS デバイス
- http://www.adobe.com/go/edgeinspect_ios_jp
- Android デバイス
- http://www.adobe.com/go/edgeinspect_android_jp
- Kindle Fire デバイス
- http://www.adobe.com/go/edgeinspect_amazon_jp
つかいかた
連携させる
まずは端末とパソコンを連携させます。パソコン側でEdge Inspectを起動してから、端末側でEdge Inspectを起動します。
すると端末側からは接続待ちのパソコンが見えます。見えない場合IPアドレスを直打ちすればOKです。
これを選択すると認証コードが表示されます。
同時にパソコン側にもコードを入力するテキストボックスが出てくるので、この認証コードを入力すると接続完了です。
それから
接続が完了すると、端末側にブラウザで現在表示しているページが表示されます。全く同じものではなく、認証が必要なページの場合はログイン画面が表示されることもあります。
たとえばはてなブログの編集ページだとこのようにログイン画面になってしまいます。
このあと、パソコンの方で「＜＞」という感じのアイコンを押すと…
このようにChromeのインスペクターっぽい画面が表示されます。あとはChromeのインスペクターと同じ感じで使えます。
MediaQueriesがちゃんと効いているかなんかはブラウザの画面幅を狭めたり広げたりすればわかりますが、そのほかのことや、JavaScriptが正しく動いているかはこういうのを使わないとなかなかわかりません。ちょっと準備は大変ですが無料で使えるので、試してみる価値はあると思います。
