Wie kann ich Javascript unter Android debuggen?

Ich arbeite an einem Projekt, an dem Raphaeljs beteiligt ist. Es stellt sich heraus, dass es unter Android nicht funktioniert. Es funktioniert auf dem iPhone.

Wie zum Teufel gehe ich vor, um etwas im Android-Browser zu debuggen? Es ist WebKit. Wenn ich also die Version kenne, führt das Debuggen in dieser Vollversion von WebKit zu denselben Ergebnissen?

Update: Remote-Debugging

Bisher war die Konsolenprotokollierung die beste Option zum Debuggen von JavaScript unter Android. In diesen Tagen können wir mit dem Remote-Debugging von Chrome für Android 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-Konsole

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

Derzeit in Android 4.0.3 (Ice Cream Sandwich) gibt der Logcat auf dem Browserkanal aus. So können Sie mit filtern adb logcat browser:* *:S.

Ursprüngliche Antwort

Mit dem integrierten consoleJavaScript-Objekt können Sie Protokollnachrichten drucken, mit denen Sie überprüfen können adb logcat.

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

Erzeugt 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)die Adressleiste eingeben, wird die WebKit-Version aufgelistet, z

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 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

NB

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

Versuchen:

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

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

   about:debug 

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

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

Bearbeiten: Um weitere Informationen wie die Zeilennummer abzurufen, müssen Sie diesen Code zu Ihrem Skript hinzufügen:

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

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

Ich benutze Weinre , einen Teil von Apache Cordova .

Mit Weinre erhalte ich die Debug-Konsole von Google Chrome in meinem Desktop-Browser und kann Android mit dieser Debug-Konsole verbinden sowie HTML und CSS debuggen. Ich kann Javascript-Befehle in der Konsole ausführen, die sich auf die Webseite im Android-Browser auswirken. Protokollnachrichten von Android werden in der Desktop-Debug-Konsole angezeigt.

Ich denke jedoch, dass es nicht möglich ist, den tatsächlichen Javascript-Code anzuzeigen oder durchzugehen. Also kombiniere ich Weinre mit Protokollnachrichten.

(Ich weiß nicht viel über JConsole, aber es scheint mir, dass HTML- und CSS-Inspektion mit JConsole nicht möglich ist, nur mit Javascript-Befehlen und Protokollierung (?).)

Schauen Sie sich jsHybugger an . Damit können Sie Ihren js-Code remote debuggen für:

• Android Hybrid Apps (Webview, Phonegap, 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, das fand ich am besten).

1. Installieren Sie die 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 -Seite in die App ein. Drücken Sie Start Service und öffnen Sie schließlich den Browser
   • Sie erhalten eine Liste der installierten Browser. Wählen Sie einen aus.
   • Der Browser wird gestartet.
6. Zurück auf Ihrem Desktop-Computer öffnen Sie Chrome zu Chrome: // inspect /
7. Ein Inspektorfenster mit den Chrome-Debugging-Tools wird angezeigt, die mit der Seite auf dem Android-Gerät verknüpft sind.
8. debug weg!

Verwenden Sie mit Chrome unter Android die ADB-Erweiterung ohne jsHybugger. Ich denke, das ist bereits in der akzeptierten Antwort auf diese Frage beschrieben.

Zu Ihrer Information, der Grund, warum RaphaelJS auf Android nicht funktioniert, ist, dass das Android-Webkit (im Gegensatz zum iPhone-Webkit) SVG derzeit nicht unterstützt. Google ist erst kürzlich zu dem Schluss gekommen, dass die SVG-Unterstützung eines Android eine gute Idee ist, sodass sie für einige Zeit noch nicht verfügbar sein wird.

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

1. Aktivieren Sie das USB-Debugging auf dem Telefon (Einstellungen, tippen Sie schnell auf Build-Nummer, Entwicklereinstellungen, USB-Debugging)
2. Öffnen Sie "Internet"
3. Navigieren Sie zu 'about: debug' (es wird ein Fehler angezeigt)
4. MEHR Menü> Einstellungen> Debug> 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 Registerkarte Browser, die Sie überprüfen möchten, auf Überprüfen

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

Raphael wird in Android-Browsern vor 3.0 nicht unterstützt, das ist Ihr Problem. Sie unterstützen SVG-Grafiken nicht. Es unterstützt jedoch Canvas. 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 Standard-Android-Browser umgangen.

Die about:debug(oderchrome:\\debug beide sagen, Seite kann nicht gefunden werden, aber aktivieren Sie das Debug-Menü in den Einstellungen), wenn Sie es auf Chrome oder Opera unter Android KitKat 4.4.2 auf einem Samsung Tab versuchen

Wenn Sie über ROOT-Berechtigungen für Ihr Gerät verfügen, 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 diese Weise können Sie alle Logcat-Aktivitäten anzeigen.

In Android KitKat / 4.4.2 wird die Browserkonsole auf dem 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 "Konsole" filtern, um nur das Browser-Konsolenprotokoll anzuzeigen.

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

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

Sie können YConsole als eingebettete js-Konsole ausprobieren. Es ist leicht und einfach zu bedienen.

• Protokolle und Fehler abfangen.
• Objekteditor.

Wie benutzt man :

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

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

chrome://inspect/#devices

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

Chrome hat eine wunderbare Funktion, die einfach den eigentlichen Android Chrome-Inhalt (einschließlich Inspektion usw.) auf den PC-Bildschirm überträgt ...

• Aktivieren Sie das USB-Debugging auf dem Gerät. Möglicherweise müssen Sie auch einmal eine Verbindung herstellen adb devices, um den Dialog "Kommunikation mit ... zulassen" auf dem mobilen Gerät auszulösen.
• Verbinden Sie das Android-Gerät mit dem PC.
• Starten Sie Chrome auf beiden und
• Navigieren Sie dann chrome://inspect/#devicesauf dem PC zu.
• Hier werden die Registerkarten des Mobiltelefons Chrome aufgelistet und können überprüft 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 logcatnichts vom Browser angezeigt)

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

• Aktienbrowser
• "consolo.log" in den JS-Quellcode
• Debuggen von USB aktiviert
• Android SDK
• Vom Android SDK: monitor.bat
• Monitorfilter als angehängtes Bild

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

Wenn Sie Probleme haben, können Sie dieses Plugin hinzufügen: https://github.com/apache/cordova-plugin-console

Wenn Sie nach nicht entfernten Optionen suchen:

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

Unter Firefox gibt es ein Konsolen-Addon , das alle App-Protokolle liest und anzeigt, und es gibt auch Firebug Lite .

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

Es erstellt einen Server an Port 8888. Sie können dann auf " http: // localhost: 8888 " klicken , Ihren JavaScript-Code eingeben und das Ergebnis eines beliebigen JavaScript-Codes einschließlich "console.log" im Telefonbrowser selbst anzeigen.

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

Die lokalen Debugging / about: config ... -Optionen scheinen in den Chrome / ff / .. -Browsern ab 2020 nicht mehr zu funktionieren.

Ein anderer Browser mit nicht entfernter js-Konsole ist DevBrowser

oder WebInspector (Dateiauswahl funktioniert nicht)