Ist es möglich, die Entwickler-Tools-Konsole in Chrome auf einem Android-Handy zu öffnen?

165

Eine AngularJS-Anwendung funktioniert auf dem Desktop einwandfrei, wird jedoch auf Mobilgeräten nicht ordnungsgemäß gerendert (der tatsächliche Code wird angezeigt). Dies ist auf einem Android-Handy.

Ich würde gerne sehen, welche Fehler in der Konsole angezeigt werden.

Ist es möglich, die JS-Konsole in der Chrome-App auf Mobilgeräten zu öffnen (wie auf dem Desktop)?

google-chrome-devtools mobile-chrome tim_xyz
quelle

Antworten:

134

Sie können dies mit Remote-Debugging tun. Hier finden Sie die offizielle Dokumentation . Grundlegender Prozess:

  1. Verbinden Sie Ihr Android-Gerät
  2. Wählen Sie Ihr Gerät aus: Weitere Tools> Überprüfen Sie Geräte anhand *von Entwicklertools auf PC / Mac.
  3. Autorisieren Sie auf Ihrem Handy.
  4. Viel Spaß beim Debuggen !!

* Dies ist jetzt "Remote-Geräte".

PseudoAj
quelle
2
Ich denke, eine ausführliche Erklärung finden Sie im Dokumentationslink
PseudoAj
59
Ist dies ohne einen externen Computer möglich?
Eric Reed
59
Frage fragt nach offener Entwickler-Tools-Konsole in Chrome auf Android-Handy? Ihre Lösung erfordert eine separate Debugging-Maschine. In Ihrer Antwort ist das Debuggen nicht am Telefon selbst
Fennekin
5
Es gibt keinen anderen Weg, auf dem ich @fennekin kenne. Bitte
zögern
5
Ab Januar 2019 konnte ich Inspect-Geräte nicht unter Weitere Tools finden. Endlich fand ich sie unter chrome: // inspect, und Sie müssen das USB-Debugging von Ihrem Telefon aus zulassen
Abhinav Singh
53

Wenn Sie keinen PC zur Hand haben, können Sie Eruda verwenden, ein Devtool für mobile Browser. Https://github.com/liriliri/eruda
Es wird als einbettbares Javascript und auch als Lesezeichen bereitgestellt (durch Einfügen eines Lesezeichens in Chrome wird das entfernt Javascript: Präfix, also musst du es selbst eingeben)

Trogper
quelle
1
Sehr guter Begleiter zu Tools wie Termux, die die Entwicklung auf einzelnen Mobilgeräten real werden lassen! Ich habe bereits eruda-webpack-pluginin ein Projekt integriert : npm i eruba-webpack-plugin --save-optional.
vintproykt
Der einfachste Weg, um zu bekommen, was in der Konsole ist
makwana.a
Tolle Lösung. Es ist in einem CDN verfügbar.
Netishix
Das scheint bei mir nicht zu funktionieren. Das Einfügen in die Adressleiste (und das anschließende Lesen von 'Javascript:') scheint nichts zu bewirken.
BT
@BT Einige Websites beschränken sich auf das Laden von Skripten aus aufgelisteten zulässigen Domains. Versuchen Sie es auf einer anderen Website.
Trogper
10

Wenn Sie nur sehen möchten, was in der Konsole gedruckt wurde, können Sie den "gedruckten" Teil einfach irgendwo in Ihrem HTML-Code hinzufügen, damit er auf der Webseite angezeigt wird. Sie könnten es für sich selbst tun, aber es gibt eine Javascript-Datei, die dies für Sie erledigt. Sie können hier darüber lesen:

http://www.hnldesign.nl/work/code/mobileconsole-javascript-console-for-mobile-devices/

Der Code ist bei Github erhältlich . Sie können es herunterladen, in eine Javascipt-Datei einfügen und Ihrem HTML-Code hinzufügen

John Balvin Arien
quelle
Zu Ihrer Information: Es kann vorkommen, dass die Konsole NICHT angezeigt wird. Basierend auf einigen Gesprächen am Ende der offiziellen Homepage können Sie versuchen, dies explizit zu tun mobileConsole.init(). Dieser Trick hilft in meinem Fall. YMMV.
RayLuo
1
Dieser Link funktioniert immer noch. Das Laden dauert nur lange. Trotzdem kann ich zusammenfassen, dass diese Konversation zwischen mir und diesem lib-Besitzer dazu führte, dass er die folgenden Informationen in den Abschnitt "Notizen" auf seiner Hauptseite hinzufügte: "Wenn mobileConsole nicht startet (mobile Erkennung schlägt fehl), können Sie entweder den Autostart durch Festlegen überschreiben overrideAutorun auf true setzen oder das folgende Skript zu Ihrer Seite hinzufügen: if (!mobileConsole.status.initialized) { mobileConsole.init(); } "
RayLuo
7

Bitte tun Sie sich selbst einen Gefallen und drücken Sie einfach den einfachen Knopf:

Laden Sie den Web Inspector (Open Source) aus dem Play Store herunter .

A CAVEAT: ATTOW, die Konsolenausgabe akzeptiert keine Restparameter! Dh wenn du so etwas hast:

console.log('one', 'two', 'three');

du wirst nur sehen

einer

an der Konsole angemeldet. Sie müssen die Parameter manuell in ein Array einbinden und wie folgt verbinden:

console.log([ 'one', 'two', 'three' ].join(' '));

um die erwartete Ausgabe zu sehen.

Aber die App ist Open Source ! Ein Patch könnte unmittelbar bevorstehen ! Der Patcher könnte sogar Sie sein!

Sensei James
quelle
3

Kiwi Browser ist mobiles Chromium und ermöglicht die Installation von Erweiterungen . Installieren Sie Kiwi und dann die Chrome-Erweiterung "Mini JS Console" (suchen Sie einfach in Google und installieren Sie sie von der Chrome-Erweiterungswebsite, uBlock funktioniert auch;). Es wird im Kiwi-Menü unten verfügbar und zeigt die Konsolenausgabe für die aktuelle Seite an.

Pawel
quelle
-1

Sie können wahrscheinlich den Gear Browser ausprobieren, er kann Elemente überprüfen und die Website nur auf Mobilgeräten debuggen.

https://gear4.app

Angolao
quelle
5
Die App ist nur für iPhones. Die Frage spezifizierte Android.
Pete