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?
Antworten:
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
console
JavaScript-Objekt können Sie Protokollnachrichten drucken, mit denen Sie überprüfen könnenadb logcat
.Erzeugt diese Ausgabe:
Bestimmen der Version von WebKit
Wenn Sie
javascript:alert(navigator.userAgent)
die Adressleiste eingeben, wird die WebKit-Version aufgelistet, zIn 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.
quelle
Versuchen:
Geben Sie auf dieser Seite in der Adressleiste eines Standard-Android-Browsers Folgendes ein:
(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:
quelle
about:debug
von derselben Registerkarte aus zu navigieren, auf der Ihre aktuelle Seite geöffnet ist. Anstatt zu navigieren, wird oben "SHOW JAVASCRIPT CONSOLE" angezeigt. Wenn Sie versuchen,about:debug
über eine neue Registerkarte darauf zuzugreifen , funktioniert dies nicht.about:debug
wirklich weiterleiten,chrome://debug
was sagt "kann nicht gefunden werden", zeigt aber eineDebug
Option in den Einstellungen. Einige der Optionen werden erst wirksam, wenn anschließend eine neue Registerkarte geöffnet wird.Die http://jsconsole.com ( http://jsconsole.com/remote-debugging.html ) bietet eine gute Möglichkeit, auf den Inhalt Ihrer Webseite zuzugreifen.
quelle
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 (?).)
quelle
Schauen Sie sich jsHybugger an . Damit können Sie Ihren js-Code remote debuggen für:
Wie das funktioniert (mehr Details und Alternativen auf der Projektseite, das fand ich am besten).
Verwenden Sie mit Chrome unter Android die ADB-Erweiterung ohne jsHybugger. Ich denke, das ist bereits in der akzeptierten Antwort auf diese Frage beschrieben.
quelle
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.
quelle
Vollständiges Chrome-Remote-Debugging des nativen Android-Browsers auf einem Galaxy S6 unter Android 5.1.1:
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.
quelle
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.
quelle
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 versuchenWenn 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.
quelle
In Adresszeile setzen
chrome://about
. Sie sehen Links zu allen möglichen Entwicklerseiten.quelle
Sie können YConsole als eingebettete js-Konsole ausprobieren. Es ist leicht und einfach zu bedienen.
Wie benutzt man :
quelle
Öffnen Sie beim Ausführen des Android-Emulators Ihren Google Chrome-Browser und geben Sie im Feld "Adresse" Folgendes ein:
Sie sehen eine Liste Ihrer Remote-Ziele. Finden Sie Ihr Ziel und klicken Sie auf den Link "Inspizieren".
quelle
Chrome hat eine wunderbare Funktion, die einfach den eigentlichen Android Chrome-Inhalt (einschließlich Inspektion usw.) auf den PC-Bildschirm überträgt ...
adb devices
, um den Dialog "Kommunikation mit ... zulassen" auf dem mobilen Gerät auszulösen.chrome://inspect/#devices
auf dem PC zu.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)quelle
Meine Lösung ist (für den Aktienbrowser):
quelle
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
quelle
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 .
quelle
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.
quelle
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)
quelle