Wie kann ich Javascript unter Android debuggen?

281

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?

jvenema
quelle
2
Off Topic, aber überlegen Sie sich Snap.svg. Es ist das Remake von RaphaelJS von derselben Person. Es wird ohne die Unterstützung alter Browser neu erstellt, ist also schneller, der Code ist sauberer usw.
Lajos Meszaros
Hinweis zur akzeptierten Antwort: Wenn Sie in Samsung Experience> = 9 Ihr Gerät nicht gefunden haben, wechseln Sie den USB-Typ zum Soundanschluss.
BOZ

Antworten:

245

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.

Pierre-Antoine LaFayette
quelle
12
Wann, oh, wann kann ich lokal auf Android debuggen, wenn ich es nicht remote tun kann?
Michael
Nicht sicher. Auf einem kleinen Gerät wie einem Telefon wäre dies nicht sehr sinnvoll, da die Bildschirmfläche für einen vollständigen Webinspektor so begrenzt wäre. Auf Tablets mag dies sinnvoller sein, aber sie müssten den Web Inspector für eine Touch-Oberfläche neu definieren, was einen erheblichen Aufwand darstellt. Vielleicht arbeiten sie daran, aber wer weiß.
Pierre-Antoine LaFayette
1
Ich vermute, dass ein erster Schnitt ohne wesentliche Anpassungen ein guter Anfang wäre, dh dass eine erhebliche Menge an Funktionen verwendet werden kann. Einige Tablets verfügen sogar über einen Stift, sodass Mausereignisse genauso funktionieren können.
Michael
Was war das mit einem kleinen Gerät wie einem Telefon?!?!? bestbuy.com/site/samsung-galaxy-view-18-4-32gb-black/…
Michael Dillon
Hinweis über den Remote-Debugging-Link für Chrome für Android: "Sie sollten mit einem Ihrer Google-Konten bei Chrome angemeldet sein. Das Remote-Debugging funktioniert nicht im Inkognito-Modus oder im Gastmodus." Wow Warum?
SDBBS
135

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;
}
Mads Mobæk
quelle
23
Ich habe es gerade versucht, aber der about: debug-Trick funktionierte auf meinem Nexus S mit ICS 4.0.3 nicht.
Derflocki
6
Sie sollten versuchen, about:debugvon 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.
Denilson Sá Maia
10
Dies ist nur der Aktienbrowser, oder? Ich versuche es in einer Chrome für Android Beta auf KitKat ohne Glück. (scheint KitKat hat nicht mehr den Aktienbrowser)
James
7
Dies benötigt einen Android-Aktienbrowser und funktioniert nicht auf Chrome :)
giorgio79
6
Der Kitkat-Aktienbrowser ist, wenn Ihr Hersteller ihn verwendet, Chromium. about:debugwirklich weiterleiten, chrome://debugwas sagt "kann nicht gefunden werden", zeigt aber eine DebugOption in den Einstellungen. Einige der Optionen werden erst wirksam, wenn anschließend eine neue Registerkarte geöffnet wird.
CD
21

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 (?).)

KajMagnus
quelle
Eine Schritt-für-Schritt-Anleitung zu weinr unter OS X wurde unter stackoverflow.com/questions/13330221/…
leymannx
Ich habe Weinre bereits ausprobiert und war mit dem Tool nicht sehr zufrieden. Das Protokoll ist nicht wirklich zuverlässig. Einige Fehler werden nicht angezeigt. Auch wenn sie angezeigt werden, zeigt Weinre nur die Fehlermeldung ohne die Stapelverfolgung an. Das hat mich total angepisst.
Lewis
Ich habe Weinre bereits ausprobiert und war mit dem Tool nicht sehr zufrieden. Das Protokoll ist nicht wirklich zuverlässig. Einige Fehler werden nicht angezeigt. Auch wenn sie angezeigt werden, zeigt Weinre nur die Fehlermeldung ohne die Stapelverfolgung an. Das hat mich total angepisst.
Lewis
17

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.

Cyberflohr
quelle
Warum wurde das abgelehnt? Es ist eines der wenigen Tools, das das Remote-Debugging von WebViews in nativen Apps unterstützt.
Alfie Hanssen
Weil es nicht sagt, wie es geht, außer dass es Sie auf einen Link für das gesamte Projekt verweist, müssen Sie es selbst viel ausgraben, bevor Sie tatsächlich erfolgreich sind
Adaptabi
2
Dieses Tool ist eigentlich ziemlich gut und hat mein Problem gelöst. Schade, dass ich herum googeln musste, um danach zu googeln, anstatt diese Antwort zu sehen, da sich jemand entschied, sie zu begraben. (Ich bin zuerst hier gelandet.) Ich werde einige Details hinzufügen, um diese Antwort zu verbessern. Sehen Sie, wie diese ganze SO-Sache funktioniert?
Erdferkel
jsHybugger APK ist weder bei Google Play noch zum Download verfügbar. Das Projekt wird hier gespeichert: github.com/dcendents/jsHybugger ; scheint aber nicht den Code zum Generieren der APK zu enthalten.
Adrian Herscu
14

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.

Ludvig Svenonius
quelle
Danke Ludvig, habe das nicht lange nach dem ursprünglichen Beitrag herausgefunden, aber gute Folgemaßnahmen.
Jvenema
Dies ist keine Antwort auf die Hauptfrage. Bitte machen Sie daraus einen Kommentar (oder eine separate Frage) und löschen Sie diesen.
PJ Brunet
12

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.

Charlie
quelle
5

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.

user3905
quelle
5

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)
user3663132
quelle
5

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

honzajde
quelle
6
Ja, aber es gibt nichts für die Konsole
Nico
3

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>
yorg
quelle
Dies ist ideal zum Debuggen von Javascript auf Mobilgeräten. Danke
ako
3

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

Gregory R.
quelle
Ich weiß nicht, warum diese Antwort nicht mehr anerkannt wurde. Es war unglaublich einfach und funktioniert für Emulator und physisches Gerät
Frank
3

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)

BurninLeo
quelle
1

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 BildGeben Sie hier die Bildbeschreibung ein
Antonio Petricca
quelle
0

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

Reign.85
quelle
0

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 .

Christian Læirbag
quelle
0

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.

Devashish Priyadarshi
quelle
0

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)

allofmex
quelle