web-dev-qa-db-ja.com

Android phonegapを使用したエミュレーターのjavascriptのデバッグ

Phonegapが初めてで、Android開発。エミュレータでjavascriptエラーをデバッグする方法を知っていますか？ADBについて聞いたことがあります。 ？jsonpで呼び出されたajaxがありますが、エミュレーターで応答しませんが、Windows上のブラウザーでそのajaxを呼び出すことができます。

javascriptandroidandroid-emulatorcordova
68
davidlee

JavaScriptでconsole.log（）を呼び出すことで、少なくともデバッグ情報をadbコンソールに記録できます。たぶんそれで十分でしょうか？

Adbを使用してログ出力を表示するには、SDK platform-tools /ディレクトリに移動して実行します：

adb logcat

logcatコマンドラインツール を参照してください

41
Stefan H Singer

2016年11月更新：これはもう機能しないようです

最も簡単なそして最も強力な方法の1つは、 http://debug.phonegap.com を使用することです（Weinreを使用しますあなたが気にするなら、背景）。あなただけ

  1. ランダムな文字列を選択します。たとえば、r4nd0m、
  2. 挿入<script src="http://debug.phonegap.com/target/target-script-min.js#r4nd0m"></script>をindex.html
  3. http://debug.phonegap.com/client/#r4nd0mすると、モバイルWebアプリをすぐにデバッグできます。

できること（FirebugまたはWeb Inspectorに似ています）：

  1. DOMの表示と変更
  2. CSSを編集する
  3. Javascriptをライブでデバッグし、リモートで実行するためのコンソール。
  4. ストレージ、リソース、タイムライン、プロファイルなどのその他のもの。
43
duality_

Chrome devツールを使用して、リモートでデバッグすることができますAndroid Phonegapアプリ！ここに手順を書きました： Remotegap Phonegap Chrome Dev Tools のアプリ

Androidエミュレーターの手順：

  1. Googleのchrome：// inspect /に移動しますChromeデスクトップコンピューターで。
  2. [デバイス]タブで[Androidエミュレーター]を見つけ、[検査]リンクをクリックします

Google Chrome remote target

参照 リモートデバッグの開始Android Devices

22
jackocnr

jsconsole をお勧めします。 JavaScriptをページに挿入し、基本的なコンソールを提供します。 リモートデバッグ に素敵なチュートリアルがあります。

4
dave1010

これは、Windows 7でEclipseを使用してアプリをテストするときに、Android/Phonegapのjavascriptエラーをデバッグするために機能することがわかりました。

ウィンドウ>ビューの表示>その他...に移動するだけです

次に、Androidフォルダーの下のLogCatを選択します。

ポップアップされたウィンドウ/タブは、Androidエミュレーターがログとエラーメッセージを送信する場所です。このウィンドウをデタッチして、Eclipse IDEの外側に配置できます（これは便利だと思います）。また、ウィンドウの右上隅にある5色の文字のいずれかを選択することにより、表示されるエラーのタイプを制御できます。

無駄な情報を非表示にしてエラーのみを表示するには、（E）のみが選択されていることを確認してください。個人的には、（W）警告と（E）エラーを選択することも好きです。

お役に立てば幸いです！

2
abassi

はい、console.logでログエラーが発生し、EclipseでLogCatタブが表示されます。そこに、Webコンソールメッセージ（JSエラーを含む）が表示されます。少し冗長なので、フィルタリングしてWebコンソールタグだけを表示する必要がありますが、うまく機能します。ここで説明します： Android/EclipseのPHONEGAPでコンソールコンソールのログ出力とJAVASCRIPTエラーを表示する

2
ferik

（最終的に）Android- http://www.jshybugger.org/

特徴：

  • 行ブレークポイントの追加/削除/有効化/無効化
  • 式を見ます
  • ステップイン/オーバー/アウト
  • 例外で一時停止
  • 呼び出しスタックナビゲーション
  • 局所変数検査
  • リモートコンソール
  • javaScript構文とランタイムエラー報告
  • ローカルストレージアイテムの表示/編集/削除
  • セッションストレージアイテムの表示/編集/削除
  • webSQLデータベースレコードの表示/編集/削除（ビデオを見る）
  • ページリソース（画像、スクリプト、html）を表示する
  • リモートコンソールサポートの強化（スタックトレース）
  • デバッガー：強化されたオブジェクト検査
  • デバッガー：条件付きブレークポイント
  • デバッガー：ここに進みます
2
William Pownall

2つのステップで簡単に解決できました。

ロギングのレベルを変更する

Config.xmlにこの行を追加します

    <log level="DEBUG"/>

Cordovaログを実行する

これは、実行してすべてのログメッセージを追跡し、phonegapプロジェクトに移動して\platforms\Android\cordovaに移動し、log.batを開いてコマンドラインを使用してアプリケーションをエミュレートできるbatファイルです。

cordova emulate

ログはcmdに表示され、log.batを開くとポップアップされます

2
shady sherif

例外をキャッチしてコンソールに表示する最適なソリューションは、次のコードです。

window.onerror = function(msg, uri, line) {
    console.log(msg + uri + line);
}
0
Rodrigo Dias

PhoneGap/Apache CordovaアプリケーションのデバッグはGapDebugで簡単

  • https://www.genuitec.com/products/gapdebug/ からGapDebugをダウンロードしてインストールします

  • PC/MacでGapDebugを実行する

  • Androidデバイス（設定->開発者オプション（ON）-> USBデバッグ（ON ））

  • 開発者オプションが見つからない場合（設定->電話について->ビルド番号を7回クリック）

  • GapDebugからアプリケーションをデバッグできます

参照

0
Priyanka

NodeJSをどこかに設定する場合は、John Boxallの iBug で拡張デバッグを実行できます。これは、iPhone用に設計されていますが、Android and it基本的にはモバイルデバイス用のfirebug liteです。フォークの原因を指しているNodeが大幅に変更され、Johnのコードが最新のnodeJSで実行されないため、パッチを適用して取得しますnodeJS 0.2.3、nodeJSのより新しいバージョンのYMMVで実行します。

0
Kris Erickson

Eclipseでは、Androidエミュレーターの戻るボタンにフックを追加し、その場で値を検査します。onBackPressedイベントマネージャーを追加し、そこからJavaScriptコンソールを呼び出します。 Eclipseデバッグパースペクティブでは、String変数の値を検査したい値に変更し、super.loadUrlを呼び出してアプリに渡します。

以下のコードを参照してください。 DDMSビューからアプリケーションのデバッグを有効にすることを忘れないでください

public class MyActivity extends DroidGap {
    private String js = "";
    @Override
    public void onBackPressed() {  
        //add a breakpoint to the follow line 
        //and change the value for "js" variable before continuing execution
        super.loadUrl("javascript:console.log(" + js + ")");
        return;
    }
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        super.setBooleanProperty("keepRunning", false);
        super.setIntegerProperty("splashscreen", R.drawable.splash);
        super.loadUrl("file:///Android_asset/www/index.html", 20000);
    }
}
0
Bruno Pasquali

Phonegapデバッグはまだ存在しています。私が知っているのは、設定にあるphonegapビルドにあり、デバッグアプリケーションオプションをチェックします。保存すると、アプリが再構築されます。アプリケーションページに再構築オプションとともにデバッグボタンが表示されます。 （このサービスは組み込みのワインセラーも使用します）

私が最速だと思うもう1つのオプションは jsconsole.com です。セットアップは非常に簡単で、ドライバーやSDKなどの多くのものをインストールする必要がある他のデバッグ方法と比較して、構成はほとんど必要ありません。

注！

PhoneGap 10では、アプリをビルドし、アプリの外部のリクエスト（インターネットがないかのように）が失敗した場合、config.xmlにこれを追加する必要があります。

<gap:plugin name="com.indigoway.cordova.whitelist.whitelistplugin" version="1.1.1" />
<access Origin="*" />
<allow-navigation href="*" />
<allow-intent href="*" />

リモートデバッグツールを動作させて、デフォルトで外部リクエストがブロックされていることを確認するために、髪を引っ張っていました。これは私を救った。

0
Gokigooooks

console.logを使用すると、簡単な印刷ステートメントを実行できます。 adbを使用してそれらを表示するだけでなく、デバイスでログビューアーを使用して、そこでログを表示できます。詳細： http://www.technomancy.org/Android/javascript-debugging/

0
Rory

Phonegap Buildを使用していて、Chromeコンソールを使用してデバッグしたい場合は、こちらが有効なソリューションです。USBデバッグを使用してWebViewをデバッグすることができます（ https：// developer。 chrome.com/devtools/docs/remote-debugging#debugging-webviews ）

まず、ウィジェットタグにxmlns：Android = "http://schemas.Android.com/apk/res/Android"が含まれていることを確認します

<widget 
    xmlns="http://www.w3.org/ns/widgets" 
    xmlns:gap="http://phonegap.com/ns/1.0" 
    xmlns:Android="http://schemas.Android.com/apk/res/Android"
    id="me.app.id" 
    version="1.0.0">

次に、以下を追加します

<gap:config-file platform="Android" parent="/manifest">
     <application Android:debuggable="true" />
</gap:config-file>

Nexus 5、Phonegap 3.7.0で動作します。

<preference name="phonegap-version" value="3.7.0" />

Phonegap Buildでアプリをビルドし、APKをインストールし、電話機をUSBに接続し、電話機でUSBデバッグを有効にしてから、chrome：// inspectにアクセスします。

ソース： https://www.genuitec.com/products/gapdebug/learning-center/configuration/

0
brunettdan