So debuggen Sie Webseiten in Chrome für Android auf dem Computer

Als Administrator eines Blogs debugge ich meine persönliche Website mit Chrome, um zu sehen, wie die Änderungen im Design und im CSS aussehen würden, bevor ich sie dauerhaft auf dem Server implementiere. Ich war vor nicht allzu langer Zeit, als ich nie bezahlt habe

Aufmerksamkeit auf mobile Seiten

da nur wenige Besucher meine Seite mit einem Smartphone besuchten. Aber heute besteht ein erheblicher Prozentsatz der Besucher aus Smartphones und Tablets, und daher ist es notwendig geworden, sich auch dort um Optik und Präsentation zu kümmern.

Wenn es sich um eine Seite auf dem Computer handelte, hätte eine mit der Option aus dem Rechtsklick-Kontextmenü von Chrome leicht debuggt werden können, aber das ist bei den Seiten auf dem Handy nicht möglich. Heute zeige ich Ihnen, wie Sie mobile Webseiten auf Ihrem Computer mit Chrome für Android und Android SDK 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 das Android SDK zum ersten Mal auf Ihrem Computer ausführen, werden Sie aufgefordert, mehrere APIs und Tools herunterzuladen. Wenn Ihr einziger Zweck der Installation von Android SDK darin besteht, die Seiten zu debuggen, deaktivieren Sie alles außer Android SDK-Plattform-Tools und klicken Sie auf die Installationspaket Taste.

Schritt 2: Öffnen Sie nach der Installation der Android-Plattform-Tools die Run Box (Windows+R) und führen Sie sie aus %userprofile%\AppData\Local\Android\android-sdk\platform-tools um das Tools-Verzeichnis der Android-Plattform 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: Öffnen Sie danach Chrome auf Ihrem Android-Telefon, öffnen Sie es Einstellungen -> Entwicklertools und aktivieren Sie die Option USB-Web-Debugging aktivieren.

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

Schritt 6: Öffnen Sie die Seite, die Sie debuggen möchten, in Ihrem Android Chrome-Browser und öffnen Sie die URL lokaler Host: 9222 im Chrome-Browser Ihres Computers.

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 Miniaturbild der jeweiligen Website. 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 wunderbar geklappt. Wenn Sie jedoch einen besseren Weg kennen, um Smartphone-Webseiten auf dem Computer zu debuggen, teilen Sie ihn uns mit.