次の記事は、自動翻訳技術を使用して自動的に翻訳されました。 コンピュータプログラムによって翻訳されているため、誤りがある場合があります。Adobeは、世界中の多くのユーザーがより多くの記事を利用できるように、翻訳版を提供しています。
翻訳の品質を評価してください。Translation by SYSTRAN


ワインレ

オープンソースWeinerプロジェクトは、JavaScriptアプリケーションをリモートでデバッグするために使用できます。 WeinreインスタンスはPhoneGap buildでホストされます。または、独自のインスタンスをローカルで実行できます。

PhoneGap Buildデバッグサーバー

この節では、 PhoneGap buildサイトで使用できる標準のWebインスペクターツールを使用して 、デバイスで実行中にPhoneGapアプリをデバッグする方法を示します。 サイトにプロジェクトコードを提供する方法、および作成したコンパイル済みのアプリをデバイスに取り込む方法について詳しくは、PhoneGap buildの節を参照してください。

既存の Appsのリスト内からデバッグを有効にするには、アプリケーションの名前をクリックして詳細を表示します。 「設定」タブをクリ ックし 、「デバッグを有効にする 」チェックボックスをオンにします。

デバッグオプションを選択してプロジェクトを構築すると、「デバッグ 」ボタンが他のオプションと共に表示され、コードを更新してプロジェクトを再構築します。 デバイスでアプリをプレビューする場合、例えば、「PhoneGap Build」セクションの説明に従ってQRコードをスキャンすると、 Debug (デバッグ)を押すと、デバイス上で実行されるアプリと通信できるWebページが開きます。

リストされたターゲットを押すと、アプリの内部状態にアクセスできます。 アプリケーションを一時停止した場合や、デバイスがスタンバイモードに移行した場合は、デバッガーが接続を失うことがあります。 この場合、「 Remote 」タブには、接続を再確立する新しいターゲットが表示されます。

接続すると、「 Elements 」タブでは、実行中にアプリのDOMツリー全体を表示できます。

このインターフェイスを使用して、実行時にアプリケーションを変更できます。 例えば、CLIによって生成されるデフォルトのPhoneGapアプリ(「コマンドラインインターフェイス」を参照)では、アイコンの下にステータスメッセージがゆっくり点滅します。

デバッグビューでDOMツリーから様々なエレメントを選択すると、デバイス上でエレメントがハイライト表示されます。これにより、関連するコードを見つけやすくなります。

<div id="deviceready" class="blink">

右側のサイドバーでは、各エレメントに適用されたCSSプロパティと、それらを指定するセレクターに関する情報を表示できます。 class属性をダブルクリックして blink textを削除すると、メッセージはデバイス上で瞬きを停止し、 .blink セレクターはサイドバーの Css Rules Matchedに一致した Class CSS Rulesから消えます。

.blink {
  -webkit-animation: fade;
  -webkit-animation-delay: initial;
  -webkit-animation-direction: initial;
  -webkit-animation-duration: 3000ms;
  -webkit-animation-fill-mode: initial;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-name: fade;
  -webkit-animation-timing-function: initial;
}

DOMを編集せずに同じ変更を表示するには、「 Console 」タブを選択し、コマンドラインにJavaScript呼び出しを直接入力します。 次の例では、idが deviceready であるエレメ ントを選択し 、blinkクラスのオンとオフを切り 替えます

document.querySelector('#deviceready').classList.toggle('blink')

メソッドの戻り値がコンソール内に表示されます。 任意のオブジェクトの名 前を入力する と、そのオブジェクトの評価済みの内容を表示できます。

ブラウザーエンジンのエラーメッセージと console.log()呼び出しの結果も 、コンソールに表示されます。

エレメントビューに戻ると 、変更の結果が表示されますが、遅延が生じる場合があり、DOMノードを再度選択して現在の状態を表示する必要がある場合があります。

Web Inspectorには、他にもいくつかの便利な機能が用意されています。

  • 「ネッ トワーク 」タブには、ネットワークのやり取りの進行を視覚化するためのタイムラインインターフェイスと共に、アプリの実行中に行うネットワーク要求の詳細が一覧表示されます。

  • Timeline 」タブでも、同様に、アプリのコンポーネントリソースの読み込み時間を視覚化できます。

  • 「リ ソース 」タブでは、Storage APIで設定した様々なクライアント側のデータベース(localStoragesessionStorage、Web SQL)のCookieと内容を調べることができます。 このビューでは、HTML5アプリケーションキャッシュを調べることもできます。これにより、一連のネットワークリソースから永続的にアプリケーションをインストールできます。 ただし、この機能はPhoneGapアプリには適していません。PhoneGapアプリは、既にインストール済みのネイティブパッケージの一部としてデバイスに提供されています。

WebInspectorの機能がWebKitベースのブラウザー環境でどのように表示されるかに若干の違いがありますが、 Google ChromeApple Safariのマニュアルでは 、概要を説明しています。

ローカル・デバッグ・サーバの実行

PhoneGap buildを使用すると、ユーザーは独自のデバッグサーバーをBuildサービスで使用できます。

Buildでは、Weinerというツールを使用して、モバイルアプリのリモートデバッグを有効にします。

このガイドでは、独自のローカルサーバーの設定について説明します。

Weinreを実行するための前提条件は、 npmをインストールする必要があるこ とです。 Weinreをインストールした後は、ローカルサーバーを公開のアクセス可能な場所にホストする予定がない限り、自分のネットワーク内でのみ使用できます。 これには、このガイドの範囲外の追加の設定が必要です。

Weinerの設定

npmをインストー ルしたら 、Weinreを入手してインストールするのは、端末で次のコマンドを実行するのと同じくらい簡単です。

sudo npm -g install weinre

それだ! これで、独自のWeinreインスタンスを実行する準備が整いました。

Weinreを起動

新しいローカルWeinerインスタンスを起動するには、次のコマンドを実行します。

weinre

次のような出力が表示されます。

Hardeeps-MacBook-Air:~ hardeep$ weinre
2013-07-01T20:03:34.890Z weinre: starting server at `http://localhost:8080`

ウェイナーが起きて走ってる! NATを使用するルータの内側でこれを実行している場合は、IPアドレスを見つける必要があります。 このIPは、ビルドで構成を指定する際に使用します。

ビルドでのローカルWeinerインスタンスの使用

Weinreを実行しているマシンのIPアドレスを取得します。 Windowsでは、 ipconfig 、またはOSX/Linuxでifconfigを実行して実行でき ます

次に、次のように、デバッグサーバー上のWeinreデバッグスクリプトへの参照を含めます。

<script type="text/javascript" src="http://my.server.ip/target/target-script-min.js#some_unique_key"></script>
アプリを公開する前に、これを削除してください。

一般的な問題

ローカルサーバーに接続できません

まず、サーバーが実行されていることを確認します。 デフォルトの設定を使用している場合は、http://localhost:8080にアクセスし 、応答する必要があります。

これがうまくいけば、Buildに提供するIPアドレスが最も多いでしょう。 正しいことを確認してください。 windows [version] find ip address OSX [version] find ip addressなどのGoogle検索は、正しいIPを取得する際の記事を見つけるのに役立ちます

NATを実行するルータを使用している場合は、http://[ip address]:8080にアクセスして、ネットワーク内 でNATにアクセスできることを確認します

GitHubでこのページを編集
Copyright SYSTRAN 2016
この翻訳は役に立ちましたか?

Translation by SYSTRAN