web-dev-qa-db-ja.com

Cordovaアプリをデバッグする実際のソリューションはありますか

過去2日間、Cordova 3.2を使用して作成し、Android 2.3デバイスに展開したHTML5アプリをデバッグする方法を見つけようとしました。私が見たすべての記事/投稿は、実際のソリューションではなくハッキングを提供します:(ほとんどの場合、それらは私のケースでは機能しません。アプリ内のCSSスタイルとAngularjsコードをデバッグしてください。

これまでのところテストしました。

debug.phonegap.com

スクリプトをindex.htmlファイルに挿入し、debug.phonegap.comで生成されたURLにアクセスしましたが、何も起こりません。空白ページのみ。

ワイン

私が見つけた記事のほとんどは、Jarファイルをカウントする古いGithubリポジトリを指しますが、見つかりません:(

エッジ検査

これは機能し、モバイル内のPCでブラウジングしているWebページを表示します。しかし問題は、phonegapアプリを実行するもの以外の統合ブラウザー（またはエミュレーター）を使用することです。そのため、結果は正確ではありません。

Chromeエミュレーター

Edge inspectと同じ。 Android 2.3に同梱されている実際のWebキットv530を表示することはできません。

夢の解決策

完璧な解決策は、Google Chrome（デスクトップ）の拡張機能で、デスクトップブラウザをAndroid 2.3プラットフォームにあるものに切り替えることができます。エミュレーションなし、ハッキングなし、web-kit v 530を備えたブラウザ自体のみ。

残念ながら、そのような解決策は存在しません:(または私は間違っていますか？

助言がありますか？

androiddebuggingcordovaemulationmobile-webkit
120
numediaweb

通知

この回答は古く（2014年1月）、それ以降多くの新しいデバッグソリューションが利用可能になりました。

ようやく機能しました！ weinreとcordova（Phonegapビルドなし）を使用し、同じ問題に直面する可能性のある将来の開発者の手間を省くため、 YouTubeチュートリアル ;）

75
numediaweb

Androidの場合：

Androidデバイス内で「USBリモートデバッガー」を有効にし、USBケーブルで接続するだけです。次に、デバイスでアプリケーションを開きます。 Chromeはリモートブラウザーを検出し、ローカルでChromeを使用するときと同じようにコンソールを表示できます。

このリンクを使用してください：Chromeブラウザのchrome://inspect/#devices（ナビゲーションバーに貼り付ける必要があります）。

デバイスでアプリがクラッシュした場合は、ブラウザ内でコンソールのログを確認し、何が起こるかを確認するだけです。ローカルブラウザで行うのと同じ方法で、機能を追加したり、変数を変更したり、関数をオーバーライドしたりすることもできます。

実行する手順の詳細については、 この記事 を参照してください。

これは、Android 4.4+を実行しているデバイスでのみ機能します。

iOSの場合：

IOS用Safariを使用するには、次の手順を実行します。

1. iOSデバイスで、[設定]> [Safari]> [詳細設定]> [Webインスペクター]に移動して、Webインスペクターを有効にします。

2. iOSデバイスでSafariを開きます。

3. USB経由でコンピューターに接続します。

4.コンピューターでSafariを開きます。

5. Safariのメニューで[開発]に移動し、デバイスの名前を探します。

6.デバッグするタブを選択します。

enter image description here

120
Neotrixs

Android 4.4+デバイスを使用できる場合は、アプリの内部WebViewでもChromeリモートデバッグを使用できます。 Weinreよりもはるかに優れたデバッガーですが、キーは最新のAndroidバージョンを使用しています。

最近のCordovaビルドは、デバッグビルド（--releaseビルドでオフになっている）である限り、この種のデバッグを自動的に有効にします。

55
rdchambers

私にとって最適なのは、Chromeデバッガーを接続することです。

それを行うには、エミュレーターまたはデバイスでアプリを実行します（$ cordova emulateを使用）

次に、Google Chromeを開き、chrome://inspect/に移動します

実行中のアプリのリストが表示されます。アプリがそこにあるはずです。 「検査」をクリックします。

開発者ツールを備えた新しいウィンドウが開きます。そこで、「コンソール」をクリックしてエラーをチェックできます。

30
José

アプリでCordova 3.3以降を実行し、デバイスでAndroid 4.4+を実行している場合は、ChromeリモートWebviewデバッグを使用してデバッグできますCordovaアプリ。

それを可能にするには、まず電話機でUSBデバッグを有効にする必要があります。

次に、「デバイスの検査」タブを開きます。 Chromeでは、Settings>他のツール>デバイスの検査。

デバイスがコンピューターに接続されているときにデバイスでアプリを起動すると、デバイスリストにWebviewが表示されます。 Webviewの「検査」リンクをクリックすると、Webviewのデバッグツールが表示されます。

これを行う方法を完全に説明する記事を次に示します。 http://geeklearning.io/Apache-cordova-and-remote-debugging-on-Android/

20
Mitch

'GapDebug' を試しましたか？それは無料です。

Safari Webkit InspectorのバージョンとChrome Dev Toolsを統合して、OS XとWindowsで統合されたデバッグエクスペリエンスを提供するようです。

7
Zaxxo

別のオプションはVisual Studioで、これには Cordovaアプリのデバッグのプレリリースサポート があります。

統一されたデバッグ体験。クロスプラットフォーム開発では、多くの場合、各デバイス、エミュレーター、またはシミュレーターをデバッグするための異なるツールが必要です。異なるツールは、異なるワークフローを意味し、デバイスを切り替えるたびに生産性を失います。 Visual Studioを使用すると、Windows、Androidエミュレーター、接続されたAndroidデバイス、iOSデバイスとエミュレーター、Apacheなど、すべての展開ターゲットに同じワールドクラスのデバッグツールを使用できます。リップルエミュレータ。

Microsoftが Visual Studio Communityエディション無料 をリリースしたので、これを無料で試してみることができます。 Visual Studioと Apache Cordova用Visual Studioツール の両方をダウンロードする必要があります。

7
Josh

Genymotion を使用してAndroidアプリをデバッグできることを追加したいだけです。ストックAndroidエミュレータよりもずっと高速です。

5
Victor P

私の知る限り、2.2〜4.3のAndroidプラットフォーム用のCordovaアプリで実際のデバッグを行うための唯一の生産的なツールは、 jshybugger です。 Weinre はデバッガではなくインスペクターです。 JsHybuggerはコードをインスツルメントして、Android WebView内でデバッグできるようにします。

5
sgimeno

Intel XDK IDEを使用して、エミュレーターまたは実デバイスで開発およびデバッグできます。

また、CordovaのVisual Studio 2015 RCツールは非常に優れていることがわかりました。リップルエミュレーターです。

4
Mohamed Selim

Phonegapビルドを使用する場合、デバッグを有効にするオプションがあります。

ローカルビルドの場合、npmでweinreをインストールできます。 https://npmjs.org/package/weinre

そして、weinre docsへのリンク： http://people.Apache.org/~pmuellr/weinre/docs/latest/

chromeリモートデバッグと呼ばれるものもありますが、それについてはあまり知りません。RaymondCamdenの記事をご覧ください： http://www.raymondcamden.com/index。 cfm/2014/1/2/Apache-Cordova-33-and-Remote-Debugging-for-Android

chromeリモートデバッグのドキュメント： https://developers.google.com/chrome-developer-tools/docs/remote-debugging （正しく理解できた場合は_が必要ですAndroidデバイスにchromeがデフォルトのブラウザとして設定されている場合）おそらくあなたの理想的なソリューションに最も近いでしょうか？

3
QuickFix

Android 4.4+ w/SDKがインストールされている場合：

adb logcat chromium:D SystemWebViewClient:D \*:S
3
Gringo Suave

chromeを使用してhtml5アプリをデバッグすることもできます

デバッグモードでchromeを開くために.batを作成します

cd C:\Program Files (x86)\Google\Chrome\Application
chrome.exe "file:///C:\Users\***.html" --allow-file-access-from-files --disable-web-security
2
dpfauwadel

Phonegap Buildを使用したソリューションは次のとおりです。以下をconfig.xmlに追加して、Chrome Remote Webview Debuggingで検査できるようにします。

まず、ウィジェットタグに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/

2
brunettdan

デバッグできますCordova Android携帯電話にインストールされているアプリケーション USBケーブルを介してコンピューターからリモートで（WebアプリケーションをWebを表示しているかのようにリモートでクリックすることもできます） 「Chromeリモートデバッグ」を使用して、コンピューターからのアプリケーション）。 ストックAndroidブラウザーまたはAndroidのChromeで表示されるWebアプリケーションをデバッグすることもできますこの方法。

  1. Androidデバイスで開発者モードを有効にします（設定に移動->電話について->ビルド番号の7xをタップ）。

  2. USBケーブルを介してコンピューターを電話に接続します。

  3. コンピューターでChromeを起動し、chrome：// inspectに移動して、デバッグするリモートデバイスの横にある[検査]ボタン（[デバイス]タブの下）をクリックします。 またはコンピューターのChrome内で右クリック->検査-> DevToolsのコスト化と制御（3つの垂直ドット-開発者ツールの右上隅）->その他のツール- >リモートデバイス->左側の[デバイス]で、USB経由で接続しているデバイスをクリックします->目的のアプリケーションの[検査]ボタンをクリックします。

  4. 次に、「コンソール」をクリックすると、Chrome開発者ツールを使用した通常のWebアプリケーションの場合と同じ方法でJavaScriptをデバッグできます。

2
Tadej

Androidデバイスモニターを使用

Androidデバイスモニターには、以前にインストールしたAndroid sdkを含むパッケージが付属しています。デバイスモニターでは、デバイスログ全体、例外、すべてのメッセージを確認できます。これは、アプリケーションのクラッシュやその他の問題をデバッグするのに便利です。これを実行するには、Android sdk“/var/Android-sdk-linux/tools”内のtools /フォルダーに移動します。次に、以下を実行します

chmod +x monitor
./monitor

Windowsを使用している場合は、monitor.exeファイルを直接開きます。 「LogCat」の下にタブがあり、すべてのデバイス関連メッセージが表示されます。ここには、表示されないAndroidデバイス例外を含むすべてのメッセージが表示されますchromeデバイスを検査します。 logcatタブの「+」記号を使用してフィルターを作成し、アプリケーションのメッセージのみが表示されるようにしてください。

ソース： http://excellencenodejsblog.com/phonegap-debugging-your-Android-application/

2
Faraz Kelhini

私はワインが大好きです！どうやって使うのですか：

まず、index.htmlを追加します（app.settings.debugUrlがこの前に設定されていることを確認してください）：

  <!-- Weinre debugging -->
  <script type="text/javascript">
    if (app.settings.debugUrl) {
      document.addEventListener("DOMContentLoaded", function(event) { 
        var s = document.createElement("script")
        s.setAttribute("src", app.settings.debugUrl+"/target/target-script-min.js#anonymous")
        document.getElementsByTagName("body")[0].appendChild(s)
      }); 
    }   
  </script>

次に：

http://www.broken-links.com/2013/06/28/remote-debugging-with-weinre/ に基づく

1
brauliobo

Android <= 4.0.4のデバイスは、プラグインを追加する必要があります https://www.npmjs.com/package/cordova-plugin-crosswalk-webview-pgb-adapt

1
Yama