wake-up-neo.com

Wie kann ich Javascript auf Android debuggen?

Ich arbeite an einem Projekt, das Raphaeljs beinhaltet. Es stellt sich heraus, es funktioniert nicht auf Android. Es tut auf dem iPhone.

Wie zum Teufel soll ich mit dem Android-Browser etwas debuggen? Es ist WebKit. Wenn ich also die Version kenne, wird das Debuggen auf der full -Version von WebKit die gleichen Ergebnisse erzielen?

androiddebuggingwebkit
247
jvenema

Update: Remote-Debugging

Bisher war die Konsolenprotokollierung die beste Option zum Debuggen von JavaScript auf Android. Mit Chrome für Android-Remote-Debugging können wir heute alle Vorteile der Chrome für Desktop-Entwicklertools für Android nutzen. Weitere Informationen finden Sie unter https://developers.google.com/chrome-developer-tools/docs/remote-debugging .

Update: JavaScript Console

Sie können auch zu about: debug in der URL-Leiste navigieren, um das Debug-Menü und die JavaScript-Fehlerkonsole bei aktuellen Android-Geräten zu aktivieren. Sie sollten SHOW JAVASCRIPT CONSOLE oben im Browser sehen. 

In Android 4.0.3 (Eiscremesandwich) wird das Logcat derzeit an den Browserkanal ausgegeben. Sie können also mit adb logcat browser:* *:S filtern.

Originalantwort

Sie können das integrierte console-JavaScript-Objekt verwenden, um Protokollnachrichten zu drucken, die Sie mit adb logcat überprüfen können.

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

Produziert diese Ausgabe:

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://...

Bestimmen der Version von WebKit

Wenn Sie javascript:alert(navigator.userAgent) in die Adressleiste eingeben, wird die WebKit-Version angezeigt.

In 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

Auf dem Android-Emulator 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.

Versionen von WebKit, die nicht Teil einer Safari-Version sind, haben nach der Versionsnummer ein +, und ihre Versionsnummer ist im Allgemeinen höher als die neueste Version von WebKit. So ist beispielsweise 528+ ein inoffizieller Build von WebKit, der neuer ist als die Version 525.x, die als Teil von Safari 3.1.2 ausgeliefert wurde.

224
Pierre-Antoine LaFayette

Versuchen: 

  1. Öffnen Sie die Seite, die Sie debuggen möchten

  2. geben Sie auf dieser Seite in die Adressleiste eines Standard-Android-Browsers Folgendes ein:

    about:debug

    (Beachten Sie, dass nichts passiert, aber einige neue Optionen wurden aktiviert.) 

Funktioniert auf den Geräten, die ich ausprobiert habe. Lesen Sie mehr über Android-Browser über: Debuggen, was machen diese Einstellungen?

Edit: Um weitere Informationen wie Zeilennummern abzurufen, fügen Sie diesen Code Ihrem Skript hinzu:

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

Das http://jsconsole.com ( http://jsconsole.com/remote-debugging.html ) bietet eine nette Möglichkeit, um auf den Inhalt Ihrer Webseite zuzugreifen.

52
tortexy

Ich benutze Weinre , Teil von Apache Cordova .

Mit Weinre bekomme ich die Debug-Konsole von Google Chrome in meinem Desktop-Browser. Ich kann Android mit dieser Debug-Konsole verbinden und HTML und CSS debuggen. Ich kann Javascript-Befehle in der Konsole ausführen, und diese beeinflussen die Webseite im Android-Browser. Protokollmeldungen von Android werden in der Desktop-Debug-Konsole angezeigt.

Ich denke jedoch, dass es nicht möglich ist, den eigentlichen Javascript-Code anzuzeigen oder zu durchsuchen. Also kombiniere ich Weinre mit Protokollnachrichten.

(Ich weiß nicht viel über JConsole , aber es scheint mir, dass HTML- und CSS-Inspektionen mit JConsole nicht möglich sind, nur Javascript-Befehle und Logging (?).)

21
KajMagnus

Schauen Sie sich jsHybugger an. Es erlaubt Ihnen, Ihren js-Code aus der Ferne zu debuggen:

  • Android-Hybrid-Apps (Webview, Telefonkarten, Worklight)
  • Webseiten, die im Standard-Android-Browser ausgeführt werden (nicht Chrome, es unterstützt die ADB-Erweiterung ohne dieses Tool)

Wie das funktioniert (mehr Details und Alternativen auf der Projektseite, so fand ich es am besten). 

  1. Installieren Sie den jsHybugger APK auf Ihrem Gerät
  2. Aktivieren Sie das USB-Debugging auf Ihrem Gerät.
  3. Schließen Sie das Android-Gerät über USB an Ihren Desktop-Computer an
  4. Führen Sie die App auf dem Android-Gerät aus ('jsHybugger')
  5. Geben Sie die Ziel-URL und die Seite in der App ein. Drücken Sie Start Service und öffnen Sie den Browser
    • Sie erhalten eine Liste der installierten Browser. Wählen Sie einen aus.
    • Der Browser wird gestartet.
  6. Öffnen Sie Chrome auf Ihrem Desktop-Computer, um chrome: // inspect /
  7. Ein Inspektorfenster mit den Chrome-Debugging-Tools wird auf dem Android-Gerät mit der Seite verknüpft.
  8. debuggen weg!

Auch bei Chrome unter Android verwenden Sie die ADB-Erweiterung ohne jsHybugger. Ich denke, das wurde bereits in der akzeptierten Antwort auf diese Frage beschrieben.

18
cyberflohr

Zu Ihrer Information: Der Grund, warum RaphaelJS unter Android nicht funktioniert, ist, dass Android-Webkit (im Gegensatz zum iPhone-Webkit) SVG derzeit nicht unterstützt. Google ist erst vor kurzem zu dem Schluss gekommen, dass SVG die Unterstützung eines Android-Geräts als eine gute Idee bietet und daher für einige Zeit noch nicht verfügbar ist.

13
Ludvig Svenonius

Vollständiges Chrome-Remote-Debugging des nativen Android-Browsers auf einem Galaxy S6 unter Android 5.1.1:

  1. USB-Debugging auf dem Telefon aktivieren (Einstellungen, ungefähr, schnell auf Build-Nummer tippen, Entwicklereinstellungen, USB-Debugging)
  2. Öffnen Sie "Internet"
  3. Navigiere zu 'about: debug' (es wird ein Fehler angezeigt)
  4. MEHR Menü> Einstellungen> Debuggen> Remote-Debugging
  5. Schließen Sie das Telefon mit einem USB-Kabel an den Computer an
  6. Öffnen Sie auf dem Telefon im Internet-Webbrowser die Site, die Sie debuggen möchten
  7. Öffnen Sie Chrome auf dem Computer
  8. Navigieren Sie zu "chrome: // inspect".
  9. Klicken Sie auf der Browser-Registerkarte, die Sie überprüfen möchten, auf inspect

Die Galaxy S5-Geräte werden in Chrome angezeigt, die Registerkarten werden jedoch erst nach dem Neustart angezeigt. Nach dem Neustart und dem Verbindungsaufbau stürzt der mobile Browser ab.

12
Charlie

Raphael wird von Android-Browsern vor Version 3.0 nicht unterstützt. Das ist Ihr Problem. Sie haben keine Unterstützung für SVG-Grafiken. Es hat jedoch Unterstützung für Leinwand. Wenn Sie es nicht animieren müssen, können Sie die Grafiken mit canvg rendern: 

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

So haben wir dieses Problem beim Rendern von SVG-Symbolen im Android-Standardbrowser gelöst.

5
user3905

Der about:debug (oder chrome:\\debug, von denen beide sagen, dass die Seite nicht gefunden werden kann, aber das Debug-Menü in den Einstellungen aktiviert wird), wird bei Chrome oder Opera unter Android KitKat 4.4.2 auf einem Samsung-Tab versucht

Wenn Sie ROOT-Berechtigungen auf Ihrem Gerät haben, können Sie die Konsolenmeldungen direkt auf dem Gerät anzeigen. Verwenden Sie eine App wie CatLog, um die Protokollausgabe anzuzeigen. - https://play.google.com/store/apps/details?id=com.nolanlawson.logcat&hl=de Damit können Sie alle Logcat-Aktivitäten anzeigen.

In Android KitKat/4.4.2 wird die Browserkonsole an den Chromium-Kanal ausgegeben. Sie können nach "Chromium" filtern, um alle Browseraktivitäten abzurufen (einschließlich der internen Aktivitäten des Browsers), oder einfach nach "Console" filtern, um nur das Browserkonsolenprotokoll anzuzeigen.

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

In die Adresszeile chrome://about eingeben. Sie sehen Links zu allen möglichen Entwicklerseiten.

4
honzajde

Meine Lösung ist (für den Aktienbrowser):

  • Aktienbrowser
  • "consolo.log" in den JS-Quellcode
  • Debug USB aktiviert
  • Android SDK
  • Vom Android-SDK: monitor.bat
  • Überwachen Sie den Filter als angefügtes Bildenter image description here
1
Antonio Petricca

Sie können die YConsole a js Embedded Console ausprobieren. Es ist leicht und einfach zu bedienen.

  • Fangprotokolle und Fehler.
  • Objekteditor.

Wie benutzt man :

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

Öffnen Sie beim Ausführen des Android-Emulators Ihren Google Chrome-Browser, und geben Sie im Adressfeld Folgendes ein:

chrome://inspect/#devices

Sie sehen eine Liste Ihrer Remote-Ziele. Finden Sie Ihr Ziel und klicken Sie auf den Link "Inspect".

1
Gregory R.

Sie können "javascript-compiler-deva" aus der npm-Bibliothek versuchen, indem Sie den Befehl "npm install javascript-compiler-deva" und dann die compiler.is mit "node compiler.js" ausführen.

Es erstellt einen Server am Port 8888. Sie können dann " http: // localhost: 8888 " drücken, Ihren JavaScript-Code eingeben und das Ergebnis eines beliebigen JavaScript-Codes einschließlich "console.log" im Browser des Telefons sehen.

Es wird auch gehostet in " https://javascript-compiler-deva.herokuapp.com/ "

0
Devashish Priyadarshi

Wenn Sie nach nicht entfernten Optionen suchen:

Bei früheren und nicht verwurzelten Jellybean-Releases kann ein Logcat-Viewer verwendet werden, wenn Android.permission.READL_LOGS einmal über adb gewährt wird.

Auf Firefox gibt es ein console-Addon , das alle App-Protokolle liest und anzeigt, und es gibt auch firebug lite .

0
Christian Læirbag

Android Studio bietet alles, was Sie brauchen, um console.log und andere zu sehen. In logcat filtern Sie einfach nach "/ Web Console" und Sie sehen Ihre js-Protokolle ...

Bei Problemen können Sie dieses Plugin hinzufügen: https://github.com/Apache/cordova-plugin-console

0
Reign.85

Chrome hat eine wundervolle Funktion, die einfach den aktuellen AndroidChrome Inhalt (inkl. Inspektion usw.) auf den PC-Bildschirm überträgt ...

  • Aktivieren Sie das USB-Debugging auf dem Gerät. Möglicherweise müssen Sie die Verbindung auch einmal über adb devices herstellen, um den Dialog "Kommunikation mit ... zulassen" auf dem mobilen Gerät auszulösen.
  • verbinden Sie das Gerät Android mit dem PC.
  • starten Sie Chrome auf beiden und
  • navigieren Sie dann auf dem PC zu chrome://inspect/#devices.
  • Hier werden die Registerkarten des Mobiltelefons Chrome aufgelistet und können eingesehen werden.

Es gibt auch ein detailliertes Handbuch im Internet: https://www.till.net/technologie/html-javascript/remote-web-debugging-unter-Android-und-chrome

(festgestellt, dass nach adb logcat nichts vom Browser angezeigt wurde)

0
BurninLeo