das Testen und Debuggen von websites und web-apps auf mobilen Geräten kann eine Herausforderung sein. Browser auf Handys und Tablets verfügen häufig nicht über integrierte Debugger, und die Emulation mobiler Geräte ist nie so genau, wie Sie möchten. Um mobile Websites auf Android zu debuggen, bietet die Desktop-Version von Chrome eine Lösung mit Remote-Debugging.,
Dieser Artikel zeigt Ihnen, wie Sie Remote Debugging mit Chrome von Ihrem Computer aus verwenden. Sie können eines der gängigen Desktop-Betriebssysteme wie Windows, macOS oder Linux verwenden.
Debuggen von Android Chrome
Wenn Sie der Meinung sind, dass Sie möglicherweise einen Fehler auf einer mobilen Website oder einer nativen App auf Android haben, ihn jedoch nicht ganz beheben können, unterstützt Raygun JavaScript-Absturzberichte sowie Android-Absturzberichte. Sie können eine kostenlose 14-Tage-Testversion hier nehmen.
Einrichten
Bevor Sie ein Remote-Debugging durchführen können, müssen Sie Ihren Computer einrichten, um Ihr Android-Gerät erkennen zu können., Dies bedeutet, dass der Chrome-Debugger erkennen und an das Telefon anhängen kann. Sie beginnen mit der Einstellung einiger Optionen auf dem Telefon.
Telefoneinstellungen
Öffnen Sie die Einstellungen-App auf Ihrem Telefon. Sie müssen Entwickleroptionen aktivieren, wenn Sie dies noch nicht getan haben. Gehen Sie dazu zum Menü „Über das Telefon“, das sich auf modernen Android-Geräten im Systemmenü befindet. Sobald Sie dort sind, scrollen Sie nach unten und tippen Sie siebenmal auf „Build Number“. Kehren Sie nun zum vorherigen Bildschirm oder zum Menü „System“ in der App „Einstellungen“ zurück., Dort finden Sie nun unten einen neuen Menüpunkt namens „Entwickleroptionen“.
Sobald Sie sich in den Entwickleroptionen befinden, aktivieren Sie diese auf Ihrem Telefon, indem Sie oben auf der Seite auf den Schalter klicken. Wenn der Schalter „On“ anzeigt, scrollen Sie ein wenig nach unten und aktivieren Sie auch „USB Debugging“. Auf diese Weise können Sie Ihr Gerät über eine USB-Kabelverbindung debuggen.
Computer-Setup (mit Android USB-Debugging)
Treiberinstallation
Das ist alles, was wir auf dem Telefon tun können, für jetzt, also lasst uns unseren Computer fertig machen., Die Schritte zu unternehmen sind etwas anders auf jedem der großen Betriebssysteme.
Wenn Sie Windows verwenden, müssen Sie zunächst die USB-Treiber für Ihr Gerät installieren. Die Android Studio-Website enthält eine Liste der Orte, an denen Sie die Treiber finden können, sowie einige Anweisungen zur Installation der Treiber auf Ihrem Computer. Einige Hersteller stellen Links zu einer Treiberdatei bereit. Andere führen Sie einfach zu einer Support-Website, In diesem Fall müssen Sie ein wenig suchen, um die Treiber für Ihr Gerät zu finden.,
Falls auf Ihrem Computer macOS oder Linux ausgeführt wird, müssen Sie keine Treiber installieren. Mac-Benutzer sind in der Tat bereit zu gehen. Wenn auf Ihrem Computer Linux ausgeführt wird, sind einige weitere Setup-Schritte erforderlich. Sie müssen sicherstellen, dass Ihr Benutzerkonto zu einer bestimmten Gruppe gehört, und Sie müssen ein Paket mit sogenannten „udev-Regeln“installieren. Dies sind Konfigurationen, die bestimmte USB-Geräte Ihrem Linux-Computer bekannt machen. Wenn Sie an weiteren Details interessiert sind, habe ich vor einiger Zeit einen speziellen Artikel über das Linux-Setup für ADB geschrieben.,
Installieren Sie Android Debug Bridge (ADB)
Sobald Sie die Treiber oder UDEV-Regeln installiert haben, benötigen Sie auch ADB, das eine Schnittstelle für die Kommunikation mit Ihrem Mobilgerät bietet. ADB und andere Android-Plattform-Tools kommen mit Android Studio, aber Sie können sie auch separat herunterladen.
Entweder mit Android Studio Embedded Android SDK oder die offizielle Plattform-Tools-Paket von Google sind die bevorzugten Wege zu gehen. Die Plattform-Tools-Pakete sind einfach .zip-Dateien mit einem Ordner platform-tools., Nach dem extrahieren der Dateien finden Sie Binärdateien wie adb.exe (Windows) oder adb (macOS und Linux) dort. Sie können sie dann nach Bedarf über ein Shell-oder Terminalfenster Ihrer Wahl ausführen.
Wenn Sie unter Windows sind und die minimalste Version von ADB ohne Flaum wünschen, schauen Sie sich die XDA-Foren an; Scrollen Sie zur Download-Überschrift und klicken Sie auf den ersten Link in diesem Abschnitt.
Nachdem es heruntergeladen wurde, führen Sie es aus, um ADB zu installieren., Sobald es installiert ist, müssen Sie zu dem Ordner navigieren, in dem es installiert wurde (C:\Program Files(x86)\Minimal ADB and Fastboot standardmäßig), und doppelklicken Sie auf cmd-here.exe. Dadurch wird ein Eingabeaufforderungsfenster in diesem Ordner geöffnet.
Geben Sie mit einer der beiden Techniken in Ihrem Shell-Fenster adb start-server ein, um den ADB-Server zu starten.
Hinweis: Der ADB-Server muss jederzeit ausgeführt werden, wenn Sie debuggen möchten. Wenn Sie Ihren computer neu starten, wird der server nicht automatisch ausgeführt. Es wird nicht empfohlen, ADB als permanenten Hintergrunddienst auszuführen.,
Das letzte, was wir tun müssen, um den Computer einzurichten, ist das Remote-Debugging in den Chrome Developer Tools zu aktivieren. Öffnen Sie dazu Chrome auf Ihrem Computer und gehen Sie zu den DevTools-Einstellungen unter chrome://inspect/#devices
Um Websites in Android von hier aus zu debuggen, stellen Sie sicher, dass „USB-Geräte entdecken“ aktiviert ist. Ich würde auch vorschlagen, diesen Abschnitt der Entwicklertools auf einer Registerkarte offen zu halten, da wir ihn bald wieder benötigen werden.
Herstellen der Verbindung
Das ist so weit, wie Sie mit beiden Geräten alleine kommen können., Um Websites in Android auf dem Gerät zu debuggen,müssen wir sie miteinander verbinden. Wenn Sie dies noch nicht getan haben, schließen Sie Ihr Telefon über USB an Ihren Computer an. Wenn Sie dies nicht als Teil der Treiberinstallation getan haben, wird möglicherweise eine Benachrichtigung in Ihrer Taskleiste angezeigt, die Sie darüber informiert, dass Ihr Computer Ihr neues Gerät einrichtet. Stellen Sie sicher, dass Ihr Telefon eingeschaltet und entsperrt ist. Wenn dies der Fall ist und der ADB-Server ausgeführt wird, sollte ein Popup mit dem Titel “ USB-Debugging zulassen?”.
Wenn es nicht angezeigt wird, suchen Sie in Ihrem Benachrichtigungsbereich auf Ihrem Android-Gerät., Wenn „Als Mediengerät verbunden“, so etwas wie das oder etwas über „MTP“ angezeigt wird, klicken Sie darauf. Das sollte Sie zu einem Bildschirm bringen, auf dem Sie einen anderen Verbindungstyp auswählen können. Für unseren Zweck ist“ Kamera (PTP) “ der passende Verbindungstyp. Sobald Sie PTP ausgewählt haben, die “ Erlauben USB-Debugging?“popup sollte kommen.
Um zu vermeiden, dass Sie jedes Mal, wenn Sie Ihr Gerät anschließen, mit diesem Popup umgehen müssen, aktivieren Sie die Option „Immer von diesem Computer zulassen“. In jedem Fall sollten Sie auf „OK“ klicken, damit Ihr Mobilgerät zum Debuggen für Ihren Computer sichtbar ist., Kehren Sie zu diesem Zeitpunkt zur Registerkarte DevTools zurück, die wir uns zuvor angesehen haben. Wenn alles gut gelaufen ist, sollten Sie Ihr Telefon und alle seine Chrome-Registerkarten jetzt dort aufgelistet sehen.
Debuggen von Websites, die in Chrome auf Ihrem Gerät ausgeführt werden
Jetzt ist es an der Zeit, die Einrichtung zu beenden und mit dem Debuggen zu beginnen! Endlich! Chrome auf Ihrem Computer sollte Ihnen eine Liste der Registerkarten anzeigen, die im Chrome-Browser Ihres Remote-Geräts geöffnet sind. Wenn die Registerkarte, die Sie debuggen möchten, nicht die aktive Registerkarte ist, können Sie auf „Registerkarte Fokus“ klicken, um sie zur aktiven Registerkarte auf dem Gerät zu machen. Klicken Sie dann auf den Link“ inspect“.,
Dadurch wird der Inspektor für diese Registerkarte angezeigt. Von hier aus können Sie die Entwicklertools von Chrome so ziemlich wie beim Debuggen einer Webseite in Ihrem Desktop-Browser verwenden. Sie können sogar den Bildschirm Ihres Geräts in den Entwicklertools sehen. Wenn es noch nicht angezeigt wird oder Sie es ausschalten möchten, klicken Sie auf das Symbol rechts neben dem Inspektorsymbol in der oberen linken Ecke der Entwicklertools.
Debugging-Tipps
Sie können Ihr Gerät auch über Ihre Entwicklertools steuern., Verwenden Sie Ihren Mauszeiger auf dem Bildschirm, als wäre Ihr Cursor ein Finger auf dem Gerät selbst.
- Klicken Sie auf zu Tippen
- Klicken Sie auf und ziehen Sie, um zu wischen
- Verwenden Sie die scroll-wheel
- Halten Sie die
Shiftbeim ziehen bis zu zoom in - Halten Sie die
Shiftbeim ziehen nach unten, um herauszuzoomen
Sie können feststellen, dass es einige transparente Flecken in den Bildschirm werfen. Dies sind UI-Elemente aus der Chrome-App oder aus der System-Benutzeroberfläche Ihres Geräts., Sie sind ausgeblendet, da Sie mit dem Remote-Debugging-Protokoll nur mit der Webseite selbst interagieren können.
Auf älteren und weniger leistungsfähigen Geräten verbraucht der Screen Cast einen Großteil der Rechenleistung Ihres Mobilgeräts. Möglicherweise stellen Sie fest, dass die Leistung während des Bildschirmcastings langsam zu sein scheint. Wenn Sie also versuchen, die Leistung zu messen, deaktivieren Sie die Bildschirmdarstellung und interagieren Sie direkt mit dem Mobilgerät.
Wenn Sie schließlich auf Probleme stoßen, bei denen bei der Interaktion mit Ihrem Gerät nichts passiert, schließen Sie die Chrome-App und öffnen Sie sie erneut., Sie müssen eine erneute Verbindung zum Remote-Gerät über den DevTools-Bildschirm in den Entwicklertools herstellen. Wenn das nicht hilft, gehen Sie diese schnelle Checkliste durch:
- Trennen Sie das Gerät und schließen Sie es wieder an
- Sperren Sie Ihr Telefon und wecken Sie es wieder auf
- Schließen Sie das Entwicklertools-Fenster und öffnen Sie es erneut.
Fazit
Das Debuggen mobiler Websites in Android Chrome muss nicht schwierig sein. Es kann etwas mehr Setup erfordern, als die meisten von uns möchten. Sobald dies erledigt ist, wird das Debuggen einer mobilen Webseite auf dem Gerät jedoch viel einfacher., Sie können jetzt Android mobile Websites auf einem realen physischen Gerät debuggen.
Haben Sie zu viel Zeit damit verbracht, Ihren Fehler überhaupt zu entdecken? Raygun hilft Ihnen, Fehler in Ihrem JavaScript-oder Android-Code zu erkennen, zu diagnostizieren und zu zerstören. Intelligente Warnungen und Fehlergruppierung bedeutet, dass Sie nie wieder einen Fehler in Ihrer App verpassen. Lesen Sie mehr über Android crash-reporting-und JavaScript-crash-reporting.
Mehr zum Debuggen von Android
So konfigurieren Sie Ihre Fehler für eine bessere Fehlerberichterstattung
Beginnen Sie mit dem Remote-Debugging in Android