web-dev-qa-db-ja.com

Android用のFirebugまたはJavaScriptコンソールのデバッグの種類はありますか？

モバイル用のWebサイトを開発しています。 Firefoxデスクトップで動作します。 iPhoneでは動作しますが、Android 2.x（およびそれよりも低いかもしれません）でボタンを押すと、JavaScriptコードがクラッシュするか、他に何が...

これらのデバイスのロガーまたはJavaScriptコンソールにアクセスできますか？

Firebugアプリケーションのようなものが良いはずです。

javascriptandroidhtml5mobileandroid-browser
67
Christophe Debove

1つのオプションは weinre です。コンソールとともにDOMとスタイルの編集を提供します。自分で設定したくない場合は、 http://debug.phonegap.com でホストされているインスタンスがあります

他のオプションは JSHybugger です。確かにAndroidブラウザーで利用可能な最も完全なデバッグ環境です。有料製品ですが、おそらく価値があります。

45
Paul Beusterien

Chromeには、USB経由で接続したときにPCでモバイルデバイスのデバッグコンソールを表示できる「USB Webデバッグ」という非常に優れた機能があります。

詳細はこちらをご覧ください

編集：ADBはWindows 8ではサポートされていないようですが、このリンクは解決策を提供しているようです：

http://mikemurko.com/general/chrome-remote-debugging-nexus-7-on-windows-8/

34
seeg

一部のモバイルブラウザでabout:debugと入力して、JavaScriptコンソールを表示できます。

12
NSjonas

デバッグ出力をブラウザウィンドウに出力することがあります。 jQuery を使用すると、ページの表示領域に出力メッセージを送信できます。

<div id='display'></div>

$('#display').text('array length: ' + myArray.length);

または、ページに表示領域を追加せずにJavaScript変数を監視する場合：

function debug(txt) {
    $('body').append("<div style='width:300px;background:orange;padding:3px;font-size:13px'>" + txt + "</div>");
}
7
mbokil

同じ問題 で、console.log(...)（firebugなど）を使用し、ログビューアーアプリケーションをインストールするだけで、ブラウザーのすべてのログを表示できます。

3
Rory

私たちは、モバイルでWebサイトをデバッグするためのプロジェクトで以下の手順を実行しています。

  1. Mobogenieソフトウェアをモバイルとデスクトップにインストールします（両方とも同じバージョンです）。
  2. モバイルGoogle Chromeブラウザでサイトを開きます。
  3. Googleを開くChromeデスクトップで。オプション-> その他のオプション-> デバイスの検査に移動します。
  4. ここでは、モバイルで開いているサイトのリストを見つけて、[検査]をクリックすると、目的のJavaScriptコンソールが表示されます。
2
chirag

Cordova 3.3以降を使用しているで、デバイスがrunning Android = 4.4以降「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」セクションの下の「検査」リンクをクリックします。これにより、Chrome開発ツールが表示され、アプリケーションをデバッグできるようになります。
  • Chrome開発者ツールの[ソース]タブを選択して、デバイス/エミュレーターのCordovaアプリが現在実行しているJavaScriptを表示します。JavaScriptにブレークポイントを追加して、コードをデバッグできます。
  • また、「コンソール」タブを使用して、エラー（赤色で表示）を表示することも、コンソールの下部に「>」プロンプトが表示されることもあります。ここで、現在の値を検査したい変数またはオブジェクト（DOMオブジェクトなど）を入力すると、値が表示されます。
1
Chris Halcrow

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

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

使い方 ：

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

「USB Webデバッグ」は1つのオプションです

「画面に印刷する」別の。

ただし、正式には Adobe shadow として知られている ' Adobe Edge inspect 'によるリモートデバッグを好みます。内部で weinre を使用します（= WEb INspect REmote）

ブラウザに小さなプラグイン（Chrome）とプレイストアでダウンロードできる無料アプリをインストールするだけです。次に、Chrome開発ツールのようなすべてのツールがあります。

IOSとKindle Fireもサポートしています

更新

クリスが気づいたように、Edge inspectを使用するにはサブスクリプションを支払う必要があります。安価な代替手段は、weinreを直接使用することです。これはEdge inspectのベースです。 記事はこちら 設定方法について.

1
VDP

Firefoxのコンソールアドオンをインストールしました（ https://addons.mozilla.org/en-US/Android/addon/console/ ）Androidそれは非常にうまく機能し、angular2アプリのデバッグに役立ちました。

1
Sacky San

また、テキストをダンプするだけの簡単なコンソールの交換も探しました。だから私はこの関数でした：

function remoteLog (arg) {
    var file = '/files/remoteLog.php';
    $.post(file, {text: arg});
}

リモートのPHPファイルはすべての出力をargのデータベースに記録しました。5分かかりました。テキストメッセージですが、それでも...）。

0
Moshe Shaham

サードパーティのサーバーを介した転送を気にしない場合、 JSConsole はJavaScript用のかなり便利なリモートデバッガーです。

0
merv

2013-12-03に GoogleはChrome DevTools for Mobile を開始しました。これにより開発者はリモートデバッグエミュレーションを介してモバイルWebアプリケーションおよびscreen-casting with Zero Configuration。

すべての機能について、チェックアウト YouTubeでのポールアイリッシュの講演 。

0
Farm

私は最近、移動可能/サイズ変更可能な「ウィンドウ」（実際にはdiv）でコンソールログを表示するツールを作成しました。 Firebugのコンソールと同様の機能を提供しますが、タブレットのページで見ることができます。 タブレット/スマートフォン/ Phabletデバッグコンソール

0
Gus T Butt

js-mobile-console を試してください

MobileConsoleは、デバッグ用に任意のページに埋め込むことができます。エラーをキャッチし、ブラウザのネイティブJavaScriptコンソールとまったく同じように動作します。また、window.consoleのAPIを介して作成したすべてのログを出力します。

0
stevemao