web-dev-qa-db-ja.com

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

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

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

androiddebuggingwebkit
260
jvenema

更新：リモートデバッグ

以前は、コンソールロギングはAndroid上でJavaScriptをデバッグするための最良の選択肢でした。最近のChrome for Androidリモートデバッグでは、Chrome for Desktop開発者ツールのすべての長所をAndroid上で利用できます。詳細については、 https://developers.google.com/chrome-developer-tools/docs/remote-debugging をご覧ください。

更新：JavaScriptコンソール

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

現在アンドロイド4.0.3（アイスクリームサンドイッチ）では、logcatはブラウザチャンネルに出力します。だからあなたはadb logcat browser:* *:Sを使ってフィルタリングすることができます。

元の答え

組み込みのconsole JavaScriptオブジェクトを使用して、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

N.B.

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

233
Pierre-Antoine LaFayette

試してください：

  1. デバッグしたいページを開く

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

    about:debug

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

私が試したデバイスで動作します。 Androidブラウザについての詳細を読んでください：デバッグ、それらの設定は何をしますか？

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

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

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

52
tortexy

私は Weinre 、 Apache Cordova の一部を使っています。

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

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

（私は JConsole についてはあまり知りませんが、JConsoleではHTMLとCSSの検査はできません。Javascriptコマンドとロギングのみが可能です）

21
KajMagnus

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

  • Androidハイブリッドアプリ（Webビュー、PhoneGap、Worklight）
  • デフォルトのAndroidブラウザで動作するWebページ（Chromeではなく、このツールなしでADB拡張をサポートします）

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

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

繰り返しますが、Android上のChromeでは、jsHybuggerなしでADB拡張を使用してください。これは、この質問に対する一般的な回答で既に説明されていると思います。

18
cyberflohr

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に表示されますが、タブは再起動後にのみ表示されます。再起動して接続しようとすると、モバイルブラウザがクラッシュします。

13
Charlie

ちなみに、RaphaelJSがAndroid上で動作しないのは、iPhone Webkitとは異なり、Android Webkitが現時点ではSVGをサポートしていないためです。 GoogleがSVGによるAndroidのサポートは良い考えであるという結論に至ったばかりなので、しばらくの間は利用できなくなります。

13
Ludvig Svenonius

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

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

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

5
user3905

住所行chrome://aboutに入れてください。あなたはすべての可能なdevページへのリンクを見るでしょう。

5
honzajde

SamsungタブのAndroid KitKat 4.4.2でChromeまたはOperaを使用したときのabout:debug（またはchrome:\\debugの両方ともページが見つかりませんが、設定の[デバッグ]メニューを有効にする）

デバイスにROOT権限がある場合は、デバイスのメッセージを直接表示することができます。ログ出力を表示するには、CatLogのようなアプリを使用します - https://play.google.com/store/apps/details?id=com.nolanlawson.logcat&hl=ja これにより、すべての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)
4
user3663132

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

chrome://inspect/#devices

リモートターゲットのリストが表示されます。あなたの目標を見つけて、 '検査'リンクをクリックしてください。

2
Gregory R.

私の解決策は（株価ブラウザの場合）です：

  • 株式ブラウザ
  • "consolo.log"をJSソースコードに
  • デバッグUSB対応
  • Android SDK
  • Android SDKから：monitor.bat
  • 添付画像としてフィルターをモニターenter image description here
1
Antonio Petricca

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

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

使い方 ：

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

"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/ 」でもホストされています。

0
Devashish Priyadarshi

あなたが非リモートオプションを探しているならば：

以前の、そして根づいていないJellybeanのリリースでは、Android.permission.READL_LOGSがadbを介して一度許可されていればlogcatビューアを使うことができます。

Firefoxでは、 コンソールアドオン があり、すべてのアプリログを読んで表示したり、 firebug liteもあります .

0
Christian Læirbag

Androidスタジオでは、console.logなどを見るために必要なものがすべて揃っています。 logcatで "/ Webコンソール"にフィルタするだけで、あなたはあなたのjsログを見るでしょう...

何か問題がある場合は、このプラグインを追加してください。 https://github.com/Apache/cordova-plugin-console

0
Reign.85

Chromeには、実際のAndroid Chromeコンテンツ（検査などを含む）をPC画面に単純に取り込む素晴らしい機能があります...

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

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

（adb logcatがブラウザから何も表示しなかった後）

0
BurninLeo