AndroidでJavaScriptをデバッグするにはどうすればよいですか？

Raphaeljsを含むプロジェクトに取り組んでいます。結局のところ、Androidでは動作しません。それは iPhoneで行います。

Androidブラウザーで何かをデバッグするにはどうすればいいですか？それはWebKitなので、バージョンがわかっていれば、そのフルバージョンのWebKitでデバッグしても同じ結果が得られますか？

更新：リモートデバッグ

以前は、AndroidでJavaScriptをデバッグするには、コンソールロギングが最適なオプションでした。最近のChrome for Androidリモートデバッグでは、Android上のChrome for Desktopデベロッパーツールの優れた点をすべて活用することができます。詳細については、https：//developers.google.com/chrome-developer-tools/docs/remote-debuggingをご覧ください。

更新：JavaScriptコンソール

URLバーのabout：debugに移動して、最近のAndroidデバイスでデバッグメニューとJavaScriptエラーコンソールをアクティブにすることもできます。ブラウザの上部にSHOW JAVASCRIPT CONSOLEが表示されます。

現在Android 4.0.3（Ice Cream Sandwich）では、logcatはブラウザーチャネルに出力します。したがって、を使用してフィルタリングできますadb logcat browser:* *:S。

元の回答

組み込みのconsoleJavaScriptオブジェクトを使用して、で確認できるログメッセージを印刷できますadb logcat。

console.error('1');
console.info('2');
console.log('3');
console.warn('4')

この出力を生成します：

D/WebCore (  165): Console: 1 line: 0 source: http://...
D/WebCore (  165): Console: 2 line: 0 source: http://...
D/WebCore (  165): Console: 3 line: 0 source: http://...
D/WebCore (  165): Console: 4 line: 0 source: http://...

WebKitのバージョンの確認

あなたが入力した場合javascript:alert(navigator.userAgent)、ロケーションバーにあなたが例えば記載されているWebKitのバージョンが表示されます

Chromeの場合： Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/532.2 (KHTML, like Gecko) Chrome/4.0.221.6 Safari/532.2

Androidエミュレーター Mozilla/5.0 (Linux; U; Android 1.6; en-us; sdk Build/DRC76) AppleWebKit/528.5+ (KHTML, like Gecko) Version/3.1.2 Mobile Safari/525.20.1

NB

Safariリリースの一部ではないWebKitのバージョンには、バージョン番号の後に+が付いており、そのバージョン番号は通常、WebKitの最新リリースバージョンよりも高くなっています。したがって、たとえば、528 +はSafari 3.1.2の一部として出荷された525.xバージョンよりも新しい非公式のWebKitビルドです。

試してください：

1. デバッグするページを開きます

2. そのページで、標準のAndroidブラウザーのアドレスバーに次のように入力します。

   about:debug 

   （何も起こりませんが、いくつかの新しいオプションが有効になっていることに注意してください。）

私が試したデバイスで動作します。Androidブラウザーのabout：debugで詳細をご覧ください。これらの設定は何をしますか？

編集： 行番号などの詳細情報を取得するのに役立つのは、次のコードをスクリプトに追加することです。

window.onerror = function (message, url, lineNo){
    console.log('Error: ' + message + '\n' + 'Line Number: ' + lineNo);
    return true;
}

http://jsconsole.com（http://jsconsole.com/remote-debugging.html）はあなたのウェブページのコンテンツにアクセスするために使用できる素敵な方法を提供します。

私は、Apache Cordovaの一部であるWeinreを使用しています。

Weinreを使用すると、デスクトップブラウザーにGoogle Chromeのデバッグコンソールが表示され、Androidをそのデバッグコンソールに接続して、HTMLとCSSをデバッグできます。コンソールでJavascriptコマンドを実行でき、AndroidブラウザーのWebページに影響します。Androidからのログメッセージがデスクトップデバッグコンソールに表示されます。

ただし、実際のJavascriptコードを表示したり、ステップスルーすることはできないと思います。そこで、Weinreとログメッセージを組み合わせます。

（私はJConsoleについてはあまり知りませんが、HTMLおよびCSSの検査はJConsoleでは不可能であり、JavaScriptコマンドとロギング（？）のみであるようです。）

jsHybuggerを見てください。それはあなたのためにあなたのjsコードをリモートでデバッグすることを可能にします：

• Androidハイブリッドアプリ（webview、phonegap、worklight）
• デフォルトのAndroidブラウザーで実行されるWebページ（Chromeではなく、このツールなしでADB拡張をサポートします）

これがどのように機能するか（プロジェクトサイトの詳細と代替案、これが私が最善の方法であることがわかったものです）。

1. デバイスにjsHybugger APKをインストールします
2. デバイスでUSBデバッグを有効にします。
3. AndroidデバイスをUSB経由でデスクトップコンピューターに接続します
4. Androidデバイス（ 'jsHybugger'）でアプリを実行します。
5. アプリのターゲットURLとページを入力します。Start Serviceを押し、最後にブラウザを開く
   • インストールされているブラウザのリストが表示されるので、いずれかを選択します。
   • ブラウザが起動します。
6. デスクトップコンピューターに戻り、Chromeをchrome：// inspect /で開きます。
7. インスペクターウィンドウが表示され、AndroidデバイスのページにリンクされたChromeデバッグツールが表示されます。
8. デバッグしてください！

繰り返しになりますが、Android上のChromeでは、jsHybuggerなしでADB拡張機能を使用してください。これは、この質問に対する受け入れられた回答ですでに説明されていると思います。

ちなみに、RaphaelJSがandroidで機能しない理由は、現時点ではandroid webkit（iPhone webkitとは異なります）がSVGをサポートしていないためです。Googleは最近、SVGがAndroidをサポートすることは良い考えであるという結論に達しました。そのため、しばらくの間はまだ利用できません。

Android 5.1.1上のGalaxy S6でのAndroidネイティブブラウザーの完全なChromeリモートデバッグ：

1. 電話でUSBデバッグを有効にする（設定、概要、ビルド番号の迅速なタップ、開発者設定、USBデバッグ）
2. 「インターネット」を開く
3. 「about：debug」に移動します（エラーが表示されます）
4. [その他]メニュー> [設定]> [デバッグ]> [リモートデバッグ]
5. USBケーブルで電話をコンピュータに接続します
6. 電話のインターネットWebブラウザーで、デバッグするサイトを開きます。
7. パソコンでChromeを開く
8. 「chrome：// inspect」に移動します
9. 検査するブラウザタブで[検査]をクリックします

Galaxy S5デバイスはChromeに表示されますが、タブは再起動後にのみ表示されます。再起動して接続しようとすると、モバイルブラウザがクラッシュします。

Raphaelは3.0より前のAndroidブラウザーではサポートされていません。それが問題です。SVGグラフィックはサポートされていません。ただし、キャンバスはサポートされています。アニメーション化する必要がない場合は、canvgを使用してグラフィックをレンダリングできます。

http://code.google.com/p/canvg/

これが、デフォルトのAndroidブラウザーでSVGアイコンをレンダリングするためのこの問題を回避する方法です。

about:debug（あるいはchrome:\\debugその両方がページを見つけることができないと言うが、設定で[デバッグ]メニューを有効にする）サムスンタブ上でAndroidのキットカット4.4.2にクロームやOperaにしようとしたとき

デバイスでルート権限を持っている場合は、デバイスで直接コンソールメッセージを表示できます。CatLogなどのアプリを使用してログ出力を表示します-https ://play.google.com/store/apps/details? id=com.nolanlawson.logcat&hl=enこれにより、すべてのlogcatアクティビティを表示できます。

Android KitKat / 4.4.2では、ブラウザーコンソールはChromiumチャネルに出力されます。「Chromium」でフィルタリングしてすべてのブラウザーアクティビティ（ブラウザーの内部アクティビティを含む）を取得することも、「Console」でフィルターしてブラウザーコンソールログのみを表示することもできます。

chromium [INFO:CONSOLE(3)]  "The key "x-minimal-ui" is not recognized and ignored.", source http://mywebsite.com/ (3)

アドレス行に入れてくださいchrome://about。可能なすべての開発ページへのリンクが表示されます。

YConsoleとjs組み込みコンソールを試すことができます。軽量で使いやすいです。

• ログとエラーをキャッチします。
• オブジェクトエディタ。

使い方 ：

<script type="text/javascript" src="js/YConsole-compiled.js"></script>
<script type="text/javascript" >YConsole.show();</script>

Androidエミュレーターを実行しているときに、Google Chromeブラウザーを開き、「アドレスフィールド」に次のように入力します。

chrome://inspect/#devices

リモートターゲットのリストが表示されます。ターゲットを見つけ、「検査」リンクをクリックします。

Chromeには、Android Chromeの実際のコンテンツ（検査など）をPC画面に表示するという優れた機能があります...

• デバイスでUSBデバッグを有効にadb devicesします。モバイルデバイスで「...との通信を許可」ダイアログをトリガーするには、経由で1回接続する必要があるかもしれません。
• AndroidデバイスをPCに接続し、
• 両方でChromeを起動し、
• 次にchrome://inspect/#devices、PCに移動します。
• ここでは、携帯電話のChromeのタブがリストされ、検査できます。

ネットには詳細なマニュアルもあります：https ://www.till.net/technologie/html-javascript/remote-web-debugging-unter-android-und-chrome

（後adb logcatにブラウザから何も示さなかったことがわかりました）

私の解決策は（株式ブラウザ用）です：

• 株式ブラウザ
• 「consolo.log」をJSソースコードに
• デバッグUSBが有効
• Android SDK
• Android SDKから：monitor.bat
• 添付画像としてフィルターを監視

Android Studioは、console.logなどを表示するために必要なすべてを提供します。logcatで「/ Webコンソール」にフィルターをかけるだけで、jsログが表示されます...

問題が発生した場合は、このプラグインを追加できます：https : //github.com/apache/cordova-plugin-console

非リモートオプションを探している場合：

以前のルート化されていないJellybeanリリースでは、android.permission.READL_LOGSがadbを介して一度許可されている場合、logcatビューアを使用できます。

firefoxには、すべてのアプリログを読み取って表示するコンソールアドオンがあり、firebug liteもあります。

「npm install javascript-compiler-deva」コマンドを実行し、「node compiler.js」を使用してcompiler.isを実行することにより、npmライブラリから「javascript-compiler-deva」を試すことができます。

ポート8888でサーバーを作成します。次に、「http：// localhost：8888」を押してJavaScriptコードを入力し、電話のブラウザ自体で「console.log」を含むJavaScriptコードの結果を確認できます。

「https://javascript-compiler-deva.herokuapp.com/」でもホストされています

ローカルのdebugging / about：config ...オプションは、2020以降のchrome / ff / ..ブラウザーでは機能しないようです。

非リモートjsコンソールを備えた別のブラウザーは DevBrowserです

または WebInspector （ファイルピッカーが機能しない）