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

Cordova 3.2を使用して作成し、Android 2.3デバイスにデプロイしたHTML5アプリをデバッグする方法を理解するために、過去2日間を費やしました。私が見たすべての記事/投稿は実際の解決策ではなくハックを提供します:(そしてほとんどの場合、それらのどれも私のケースでは機能しません;アプリ内のcssスタイルとAngularjsコードをデバッグします。

これまでにテストしました。

debug.phonegap.com

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

ウェインレ

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

エッジ検査

それは機能し、モバイル内のPCで閲覧しているWebページを表示します。結果は正確ではありません。

Chromeエミュレータ

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

夢のソリューション

完璧な解決策は、デスクトップブラウザーをAndroid 2.3プラットフォームで見られるものと同じものに切り替えることができるGoogle Chrome（デスクトップ）の拡張です。エミュレーションなし、ハッキングなし、Webキットv 530を搭載したブラウザ自体。

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

助言がありますか？

アンドロイド用：

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

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

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

実行する手順の詳細については、この記事をお読みください。

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

iOSの場合：

iOSでSafariを使用するには、次の手順に従います。

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

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

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

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

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

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

通知

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

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

Android 4.4以降のデバイスを使用できる場合は、アプリの内部WebViewでもChromeリモートデバッグを使用できます。それはWeinreよりはるかに優れたデバッガですが、重要なのは最新のAndroidバージョンを使用することです。

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

私にとって最良の方法は、Chromeデバッガを接続することです。

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

次に、Google Chromeを開いて、 chrome://inspect/

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

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

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

これを行うには、最初に電話でUSBデバッグを有効にする必要があります。

次に、「デバイスの検査」タブを開きます。Chromeで、に行く設定 > その他のツール > 点検デバイス。

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

これを行う方法を完全に説明する記事は次のとおりです。http：//geeklearning.io/apache-cordova-and-remote-debugging-on-android/

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

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

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

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

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

私の知る限り、2.2から4.3までのAndroidプラットフォームのCordovaアプリで実際にデバッグするための生産的なツールはjshybuggerだけです。Weinreはインスペクターであり、デバッガーではありません。JsHybuggerは、Android WebView内でデバッグできるようにコードを計測します。

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

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

CordovaのVisual Studio 2015 RCツールもリップルエミュレーターで非常に優れている

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

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

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

そして、クロムリモートデバッグと呼ばれるものがありますが、私はそれについてあまり知りません。レイモンドカムデンの記事をご覧ください。 Cordova-33-and-Remote-Debugging-for-Android

クロムリモートデバッグ用のドキュメント：https : //developers.google.com/chrome-developer-tools/docs/remote-debugging （正しく理解できれば、デフォルトのブラウザとしてクロムを搭載したAndroidデバイスが必要です）夢に最も近いかもしれません解決？

Android 4.4以降とSDKがインストールされている場合：

adb logcat chromium:D SystemWebViewClient:D \*:S

Cordova 3.3以降を使用していて、デバイスがAndroid 4.4以降を実行している場合は、「Chrome搭載のAndroidでリモートデバッグ」を使用できます。完全な手順はここにあります：

https://developer.chrome.com/devtools/docs/remote-debugging

要約すれば：

• USBケーブルを使用してデバイスをデスクトップコンピューターに接続します
• デバイスでUSBデバッグを有効にする（私のデバイスでは、これは[設定]> [その他]> [開発者向けオプション]> [USBデバッグ]にあります）

または、Cordova 3.3以降を使用していて、4.4を搭載した物理デバイスがない場合は、Android 4.4以降を使用するエミュレータを使用して、デスクトップコンピュータ上のエミュレータからアプリケーションを実行できます。

• デバイスまたはエミュレーターでCordovaアプリケーションを実行する
• デスクトップコンピューターのChromeで、アドレスバーにchrome：// inspect /＃devicesと入力します
• デバイス/エミュレーターは、コンピューターに接続されている他の認識されているデバイスと共に表示され、デバイスの下には、デバイス/エミュレーターで実行されているCordova 'WebView'（基本的にはCordovaアプリ）の詳細があります（ Cordovaが機能する方法は、基本的にデバイス/エミュレーターに「ブラウザー」ウィンドウを作成することです。その中に、実行中のHTML / JavaScriptアプリである「WebView」があります）
• リストされているデバイス/エミュレータが表示されている「WebView」セクションの下の「inspect」リンクをクリックします。これにより、アプリケーションのデバッグを可能にするChrome開発者ツールが表示されます。
• Chromeデベロッパーツールの[ソース]タブを選択して、デバイス/エミュレーターのCordovaアプリが現在実行しているJavaScriptを表示します。JavaScriptにブレークポイントを追加して、コードをデバッグすることができます。
• また、「コンソール」タブを使用してエラー（赤で表示されます）を表示したり、コンソールの下部に「>」プロンプトを表示したりできます。ここで、現在の値を検査する変数またはオブジェクト（DOMオブジェクトなど）を入力できます。値が表示されます。

これがPhonegap Buildを使用したソリューションです。以下をconfig.xmlに追加して、ChromeリモートWebviewデバッグで検査できるようにします。

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

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

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

chmod +x monitor
./monitor

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

出典：http : //excellencenodejsblog.com/phonegap-debugging-your-android-application/

html5アプリをChromeでデバッグすることもできます

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

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

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

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

2. コンピューターを携帯電話とUSBケーブルで接続します。

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

4. 次に、[コンソール]をクリックすると、Chrome開発ツールを使用した通常のウェブアプリケーションと同じようにJavaScriptをデバッグできます。

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

まず、あなたの身に着けてください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>

次に：

• インストール： sudo npm install -g weinre
• 実行： weinre --boundHost -all-
• ブラウザで開く：http：// localhost：8080 / client /＃anonymous
• アプリを開くとターゲットが表示されるのを見る

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

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