Adobe Edge Inspectでスマートフォンブラウザのデバッグ

ChromeのAndroid USBデバッグをつかうと、パソコン版Chromeのデベロッパーツールの要領でUSBケーブルでつないだAndroid端末のChromeのデバッグが行えますが
AdobeのEdge Inspect(エッジインスペクト)を使うと、これと同様にAndroidやiPhoneのデフォルトブラウザのデバッグを行えます。

Edge Inspectでデバッグするために必要な構成はこちら

  • パソコンとスマートフォンがともに接続できる無線LANのネットワーク
  • パソコンのGoogle Chrome
  • Edge Inspectのパソコン用アプリケーション(無償)
  • Edge Inspectのスマートフォン用アプリケーション(無償)
  • Bonjour(パソコンがMac OS X以上の場合はもともと有効)

Edge Inspect導入手順

公式のEdge Inspect インストールガイドの受け売りですが、導入するまでの手順をかんたんに紹介します。

まずは下準備、こちらを順不同で用意します。

  • パソコンにEdge Inspectのアプリケーションをインストール
    Adobe Edge InspectオフィシャルサイトかAdobe Application Manager からダウンロードできます。
  • パソコンのChromeへ、拡張機能のEdge Inspectをインストール
  • スマートフォンへEdge Inspectのアプリをインストール
    iPhoneならApple Storeで、AndroidならPlayストアで「Edge Inspect」と検索すると見つかります。

Edge Inspectは、Bonjour(ボンジュール)で無線LANのネットワーク内の機器どうしを紐付けてくれているので
パソコンにBonjourがインストールされていない場合はこちらも準備します。
Bonjourは、Apple software Updateでプリンタとパソコンを紐付けるソフトとしてよく見かける、あれです。

それならと、すぐインターネット検索でBonjourのインストーラを探すと
どことは言いませんが怪しいインストーラもあるので
公式のインストールガイドのとおり、Edge Inspect のインストールフォルダーにあるBonjourインストーラを使うのが安全です。

アプリが準備できたらさっそく接続。
パソコンのChromeでEdge Inspectをアイコンクリックで起動し、同時にスマートフォンのEdge Inspectアプリも起動すると接続画面になります。
スマホのアプリではこんな画面。
adobe-edge-inspect-android-browser

ここで、自動検出出来た場合は「はじめに」が表示されているところにパソコンの情報が表示されますので、これをタップして選択します。
仮にいつまでたっても候補が表示されない場合は、スマホアプリのほうの「接続」の右隣にある「+」アイコンをタップしてから、パソコンのローカルIPを直接入力します。

こうしてスマートフォンのアプリからパソコンを認識できると、スマートフォンのアプリ側にパスコードが表示されます。
adobe-edge-inspect-android-browser2

すると、パソコンのChromeのEdge Inspect拡張機能側にパスコードを入力する欄がでてくるので
ここへスマホへ表示されているパスコードを入力します。

これで手順は完了。
パソコン側へデベロッパーツールのようなウィンドウが表示され、パスコードを入力したスマートフォン端末名のリンクが表示されます。
リンクをクリックすると、パソコンのChromeで表示しているWebページが、スマートフォンのEdge Inspectアプリ内に表示され
パソコン側の先ほど開いたデベロッパーツールのようなウィンドウに
スマートフォンのEdge Inspectに表示されているWebページの状況がリアルタイムで表示されます。

参考:
Adobe® Edge Inspect インストールガイド
Adobe® Edge Inspect CC 入門ガイド

関連記事

Pocket