Wie man Webseiten auf Chrome für Android auf dem Computer debuggt

Als Administrator eines Blogs debugge ich meine persönliche Website mit Chrome, um zu sehen, wie die Änderungen im Thema und im CSS aussehen, bevor ich sie dauerhaft auf dem Server implementiere. Ich habe vor nicht allzu langer Zeit noch nie auf mobile Seiten geachtet, da nur wenige Besucher meine Website mit einem Smartphone besuchten. Aber heutzutage besteht ein erheblicher Prozentsatz der Besucher aus Smartphones und Tablets, und daher ist es notwendig geworden, sich auch dort um das Aussehen und die Präsentation zu kümmern.

Wenn es sich um eine Seite auf einem Computer handelte, hätte eine Seite mit der Option aus dem Kontextmenü von Chrome problemlos ein Debugging durchführen können. Dies ist jedoch bei Seiten auf Mobilgeräten nicht der Fall. Daher zeige ich Ihnen heute, wie Sie mit Chrome für Android und Android SDK mobile Webseiten auf Ihrem Computer debuggen können.

Debuggen der Webseite

Schritt 1: Laden Sie das Android SDK herunter, installieren Sie es auf Ihrem Computer und führen Sie es aus. Das Installationsprogramm fordert Sie auf, Java herunterzuladen, wenn Sie es nicht installiert haben.

Wenn Sie Android SDK zum ersten Mal auf Ihrem Computer ausführen, werden Sie aufgefordert, mehrere APIs und Tools herunterzuladen. Wenn Sie Android SDK ausschließlich zum Debuggen der Seiten installieren möchten, deaktivieren Sie alle Optionen mit Ausnahme der Android SDK-Plattform-Tools und klicken Sie auf die Schaltfläche Paket installieren.

Schritt 2: Öffnen Sie nach der Installation der Android-Plattform-Tools die Run Box (Windows + R) und führen Sie % userprofile% \ AppData \ Local \ Android \ android-sdk \ platform-tools aus, um das Android-Plattform-Tools-Verzeichnis zu öffnen.

Schritt 3: Halten Sie nun Strg + Umschalttaste gedrückt und klicken Sie mit der rechten Maustaste in den Ordner, um dort die Eingabeaufforderung zu öffnen. Sie können die Eingabeaufforderung auch über das Feld Ausführen öffnen und manuell zum Ordner navigieren.

Schritt 4: Nachdem Sie dies getan haben, öffnen Sie Chrome auf Ihrem Android-Telefon, öffnen Sie Einstellungen -> Entwicklertools und aktivieren Sie die Option USB-Web-Debugging aktivieren.

Schritt 5: Führen Sie nun an der Eingabeaufforderung den Befehl adb forward tcp: 9222 localabstract: chrome_devtools_remote aus und öffnen Sie bei erfolgreicher Ausführung den Chrome-Browser unter Windows.

Schritt 6: Öffnen Sie die Seite, die Sie debuggen möchten, in Ihrem Android Chrome-Browser und öffnen Sie die URL localhost: 9222 in Ihrem Chrome-Browser.

Das ist alles, Sie sehen alle Seiten, die in Ihrem Android-Browser geöffnet sind, als Miniaturansichten auf Ihrem Computer. Um die Debug-Seite zu öffnen, klicken Sie einfach auf das jeweilige Website-Miniaturbild. Sie können die Debugging-Änderungen, die Sie auf Ihrem Computer vornehmen, direkt auf Android in Echtzeit verfolgen.

Fazit

Ich bin mir sicher, dass dieser Trick vielen Webentwicklern helfen wird, ihre Webseiten für Smartphones zu optimieren. Ich habe den Trick benutzt, um meine Webseiten zu konfigurieren, und es hat wie ein Zauber geklappt. Wenn Sie jedoch eine bessere Möglichkeit zum Debuggen von Smartphone-Webseiten auf einem Computer kennen, teilen Sie sie uns mit.