Weinreを使用してWebアプリケーションおよびPhoneGapアプリケーションをデバッグする
5345 ワード
Web開発者は、JavaScript、DOM要素、CSSスタイルのデバッグなど、FirefoxのfirebugまたはChromeの開発者ツールを使用してWebデバッグを行うことが多い.しかし、モバイルWebサイトやアプリケーションのデバッグを期待すると、これらのツールは使いにくい.
Weinreは、モバイルデバイスブラウザ内で実行されているWebページまたはアプリケーションをデスクトップでリモートデバッグするためのデバッグツールです.WeinreはWEB INspector REmoteの略です.ダウンロード、インストール、使用方法、phoneGapアプリケーションのデバッグにweinreを使用する方法など、weinreの基本的な使用方法について説明します.
Adobe Inspectについて
Weinreは非常に便利で、現在はモバイルデバイスのリモートデバッグに最適なツールですが、本格的なプラットフォーム間モバイルウェブアプリケーションの開発を行う際には、通常、開発者は複数の異なるモデルのモバイルデバイスに直面します.この場合、weinreを使用して同時にすべてのデバイスでデバッグを行うのは非常に時間と労力がかかります.Adobeクリエイティブクラウドプラットフォームでは、マルチモバイルデバイス間の同期テストのための無料ツールAdobe Inspectを提供し、登録して無料でダウンロードできます.
Adobe Shadow
Adobeでは最新のクリエイティブクラウドサービスが発売され、このサービスプラットフォームではユーザーが最新のAdobeツールをダウンロードすることができ、最高はアクティブAdobeが発売したばかりの実験版ソフトウェアを無料で入手することができ、HTML 5アニメーション制作ツールAdobe Edge Animate、HTML 5プログラミングツールAdobe Edge Code、モバイルプラットフォームテストソフトウェアEdge Inspectなどが含まれている.ここでは無料で登録できます:http://t.cn/zYOZYTb、ここで登録して取得できます:http://t.cn/zYOZjxH.
ダウンロード
ダウンロードアドレス:https://github.com/callback/callback-weinre/archives/master、以下の図:
ダウンロード
Weinreでは、.jarファイルとmacインストール可能ファイルの2つのダウンロードが提供されています.ここでは主に.jarファイルを例に挙げます.macコンピュータを使用している場合は、macインストールファイル方式を選択し、weinreアプリケーションを実行した後、次の図に示します.
mac上で実行されるweinreアプリケーション
Weinreの基本概念
Weinreを使用する前に、weinreの基本的な概念を理解する必要があります.
Weinreを使用する目的は、モバイルデバイスブラウザ内で実行されるWebサイトまたはアプリケーションをデバッグすることです.このモバイルデバイスを「デバッグターゲット(Debug Target)」と呼びます.モバイルデバイス上で直接デバッグを行うのは不便なため、weinreはデスクトップの伝統的なwebkit環境(Web InspectorやGoogle Chromeの開発者ツールなど)を使用してデバッグを行うのに役立ち、このデスクトップデバッグ環境を「デバッグクライアント(Debug Client)」と呼んでいます.Weinreデスクトップのデバッグクライアントとモバイルデバイスのデバッグターゲットを同期させるには、「デバッグサーバ(Debug Server)」を構築する必要があります.
したがって、weinreを使用してリモートデバイスのデバッグを行う場合、上の3つの要素が含まれます.デバッグサーバ:デバッグサーバは、デバッグターゲットとデバッグクライアントとの間のコマンド を同期するプロキシとして機能する.クライアントをデバッグする:通常はデスクトップデバッグ環境、すなわち開発者が実際にデバッグを操作する場所 である.デバッグターゲット:デバッグされたウェブコンテンツを実行するモバイルデバイス Weinreのデバッグターゲットとクライアントはブラウザで実行され、デバッグサーバはHTTPサーバ方式で両者の仲介として実行されます.Patrick Muellerのweinreに関するマニュアルでは,この関係を説明した.より詳細な説明は、http://muellerware.org/papers/weinre/manual.html
Weinreの組成
デバッグサーバの起動
ダウンロードしたweinre-jar-1.6.1.zipファイルを解凍すると、weinre.jarファイルが得られます.最初のステップはweinreデバッグサーバを起動することです.コマンドは以下のとおりです.このうち192.168.43.149はweinreマシンを実行するipアドレスであり、通常はデバッグ担当者マシンのアドレスである.デフォルトではweinreはポート8080を使用します.ポート番号を変更する場合は、–httpPortパラメータを使用してカスタムポートを指定します.
Weinreデバッグサーバのホームページ
モバイルWebアプリケーションのデバッグ
デスクトップでデバッグクライアントを起動します.Weinreデバッグサーバのホームページに記載されているように、Chromeブラウザを開き、debug client user interfaceアドレス(クライアントUIアドレスのデバッグ)を入力します.この例では、次のようになります.http://192.168.43.149:8080/client/#anonymous、デフォルトのデバッグid(debug id)です.このweinreデバッグサーバがあなた一人でしか使用されていない場合は、デフォルトのdebug id:anonymousを使用できます.
起動したweinreデバッグクライアントuiは次の図です.
WeinreクライアントUIのデバッグ
現在、デバッグサーバにデバッグターゲット(通常はモバイルデバイス)が接続されていないため、上図ではtargetsの下にnoneと表示されます.
次に、テストするWebページをモバイルデバイスで実行し、デバッグクライアントを使用してデバッグを開始します.テストを行うWebサイトまたはアプリケーションは、weinreサーバと必ずしも実行する必要はありません.Webサイトでweinreデバッグをアクティブにするには、次のscriptスクリプトをページに追加する必要があります.この例では、xxx.xxx.xxx.xxx:8080はweinreデバッグサーバのアドレスとポート番号です.これにより、ページがtarget-script-min.jsを実行するとweinreサーバに接続し、リモートデバッグを実現できます.
次に、モバイルデバイスでブラウザを開き、デバッグするアプリケーションを実行します.
モバイルデバイスブラウザで実行されるWebアプリケーション
このとき、デスクトップブラウザ内のweinreデバッグクライアントを表示すると、次の図のようにtargetsが検出されていることがわかります.
义齿
これで、デバッグクライアントのelement、resource、network、timeline、console機能を使用すると、デスクトップ上でモバイルデバイス上のブラウザ内で実行されるWebアプリケーションに対してリモートでデバッグすることができ、Chromeの開発者ツールと同じ方法で使用できます.たとえばDOM要素を選択したり、スタイル値やdom値を調整したり、ネットワークデータを検出したり、consoleでjsスクリプトをリモートで実行したりします.デバッグされたWebコンテンツをモバイルデバイスで操作すると、elementパネルのdomツリーなどのデバッグクライアントのコンテンツが自動的に更新されます.これまでweinreを使用してscriptをデバッグすることはできませんでした.たとえば、ブレークポイントを設定します.次の図は、elementパネルを使用してDOM要素を選択したときに、モバイルデバイス上で要素を同時にハイライトする場合を示しています.
PhoneGapアプリケーションのデバッグ
PhoneGapアプリケーションは、実際にはモバイルデバイスのwebview(Android:webview,IOS:uiwebview)で実行されるwebアプリケーションであるため、デバッグするwebアプリケーションページにweinreスクリプトを加えるだけでよい.
自分でweinreサーバを構築したくない場合は、phoneGapが提供するオンラインweinreを使用してサーバをデバッグすることを考えることができます.アドレスはdebug.phonegap.comで、以下の通りです.デバッグidを提供し、デバッグするWebアプリケーションまたはサイトページに対応するweinre scriptを追加するだけで、phonegap debugサーバのポートとアドレスを使用してクライアントを実行できます.
PhoneGapデバッグサーバ
資料 weinreの詳細については、weinreのサイト:http://phonegap.github.com/weinre/Home.html を参照してください.は、Patrick Muellerのweinreに関する初期のサイトで、http://muellerware.org/papers/weinre/manual.html の詳細情報を提供しています.
Update:上記Githubアドレスは失効しており、新しいアドレスはhttp://people.apache.org/~pmuellr/weinre/docs/1.x/1.5.0/およびhttps://github.com/pmuellr/weinre
Weinreは、モバイルデバイスブラウザ内で実行されているWebページまたはアプリケーションをデスクトップでリモートデバッグするためのデバッグツールです.WeinreはWEB INspector REmoteの略です.ダウンロード、インストール、使用方法、phoneGapアプリケーションのデバッグにweinreを使用する方法など、weinreの基本的な使用方法について説明します.
Adobe Inspectについて
Weinreは非常に便利で、現在はモバイルデバイスのリモートデバッグに最適なツールですが、本格的なプラットフォーム間モバイルウェブアプリケーションの開発を行う際には、通常、開発者は複数の異なるモデルのモバイルデバイスに直面します.この場合、weinreを使用して同時にすべてのデバイスでデバッグを行うのは非常に時間と労力がかかります.Adobeクリエイティブクラウドプラットフォームでは、マルチモバイルデバイス間の同期テストのための無料ツールAdobe Inspectを提供し、登録して無料でダウンロードできます.
Adobe Shadow
Adobeでは最新のクリエイティブクラウドサービスが発売され、このサービスプラットフォームではユーザーが最新のAdobeツールをダウンロードすることができ、最高はアクティブAdobeが発売したばかりの実験版ソフトウェアを無料で入手することができ、HTML 5アニメーション制作ツールAdobe Edge Animate、HTML 5プログラミングツールAdobe Edge Code、モバイルプラットフォームテストソフトウェアEdge Inspectなどが含まれている.ここでは無料で登録できます:http://t.cn/zYOZYTb、ここで登録して取得できます:http://t.cn/zYOZjxH.
ダウンロード
ダウンロードアドレス:https://github.com/callback/callback-weinre/archives/master、以下の図:
ダウンロード
Weinreでは、.jarファイルとmacインストール可能ファイルの2つのダウンロードが提供されています.ここでは主に.jarファイルを例に挙げます.macコンピュータを使用している場合は、macインストールファイル方式を選択し、weinreアプリケーションを実行した後、次の図に示します.
mac上で実行されるweinreアプリケーション
Weinreの基本概念
Weinreを使用する前に、weinreの基本的な概念を理解する必要があります.
Weinreを使用する目的は、モバイルデバイスブラウザ内で実行されるWebサイトまたはアプリケーションをデバッグすることです.このモバイルデバイスを「デバッグターゲット(Debug Target)」と呼びます.モバイルデバイス上で直接デバッグを行うのは不便なため、weinreはデスクトップの伝統的なwebkit環境(Web InspectorやGoogle Chromeの開発者ツールなど)を使用してデバッグを行うのに役立ち、このデスクトップデバッグ環境を「デバッグクライアント(Debug Client)」と呼んでいます.Weinreデスクトップのデバッグクライアントとモバイルデバイスのデバッグターゲットを同期させるには、「デバッグサーバ(Debug Server)」を構築する必要があります.
したがって、weinreを使用してリモートデバイスのデバッグを行う場合、上の3つの要素が含まれます.
Weinreの組成
デバッグサーバの起動
ダウンロードしたweinre-jar-1.6.1.zipファイルを解凍すると、weinre.jarファイルが得られます.最初のステップはweinreデバッグサーバを起動することです.コマンドは以下のとおりです.このうち192.168.43.149はweinreマシンを実行するipアドレスであり、通常はデバッグ担当者マシンのアドレスである.デフォルトではweinreはポート8080を使用します.ポート番号を変更する場合は、–httpPortパラメータを使用してカスタムポートを指定します.
java -jar weinre.jar --boundHost 192.168.43.149
Weinreデバッグサーバのホームページ
モバイルWebアプリケーションのデバッグ
デスクトップでデバッグクライアントを起動します.Weinreデバッグサーバのホームページに記載されているように、Chromeブラウザを開き、debug client user interfaceアドレス(クライアントUIアドレスのデバッグ)を入力します.この例では、次のようになります.http://192.168.43.149:8080/client/#anonymous、デフォルトのデバッグid(debug id)です.このweinreデバッグサーバがあなた一人でしか使用されていない場合は、デフォルトのdebug id:anonymousを使用できます.
起動したweinreデバッグクライアントuiは次の図です.
WeinreクライアントUIのデバッグ
現在、デバッグサーバにデバッグターゲット(通常はモバイルデバイス)が接続されていないため、上図ではtargetsの下にnoneと表示されます.
次に、テストするWebページをモバイルデバイスで実行し、デバッグクライアントを使用してデバッグを開始します.テストを行うWebサイトまたはアプリケーションは、weinreサーバと必ずしも実行する必要はありません.Webサイトでweinreデバッグをアクティブにするには、次のscriptスクリプトをページに追加する必要があります.この例では、xxx.xxx.xxx.xxx:8080はweinreデバッグサーバのアドレスとポート番号です.これにより、ページがtarget-script-min.jsを実行するとweinreサーバに接続し、リモートデバッグを実現できます.
次に、モバイルデバイスでブラウザを開き、デバッグするアプリケーションを実行します.
モバイルデバイスブラウザで実行されるWebアプリケーション
このとき、デスクトップブラウザ内のweinreデバッグクライアントを表示すると、次の図のようにtargetsが検出されていることがわかります.
义齿
これで、デバッグクライアントのelement、resource、network、timeline、console機能を使用すると、デスクトップ上でモバイルデバイス上のブラウザ内で実行されるWebアプリケーションに対してリモートでデバッグすることができ、Chromeの開発者ツールと同じ方法で使用できます.たとえばDOM要素を選択したり、スタイル値やdom値を調整したり、ネットワークデータを検出したり、consoleでjsスクリプトをリモートで実行したりします.デバッグされたWebコンテンツをモバイルデバイスで操作すると、elementパネルのdomツリーなどのデバッグクライアントのコンテンツが自動的に更新されます.これまでweinreを使用してscriptをデバッグすることはできませんでした.たとえば、ブレークポイントを設定します.次の図は、elementパネルを使用してDOM要素を選択したときに、モバイルデバイス上で要素を同時にハイライトする場合を示しています.
PhoneGapアプリケーションのデバッグ
PhoneGapアプリケーションは、実際にはモバイルデバイスのwebview(Android:webview,IOS:uiwebview)で実行されるwebアプリケーションであるため、デバッグするwebアプリケーションページにweinreスクリプトを加えるだけでよい.
自分でweinreサーバを構築したくない場合は、phoneGapが提供するオンラインweinreを使用してサーバをデバッグすることを考えることができます.アドレスはdebug.phonegap.comで、以下の通りです.デバッグidを提供し、デバッグするWebアプリケーションまたはサイトページに対応するweinre scriptを追加するだけで、phonegap debugサーバのポートとアドレスを使用してクライアントを実行できます.
PhoneGapデバッグサーバ
資料
Update:上記Githubアドレスは失効しており、新しいアドレスはhttp://people.apache.org/~pmuellr/weinre/docs/1.x/1.5.0/およびhttps://github.com/pmuellr/weinre