Debuggen von 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 Thema und im CSS aussehen, bevor ich sie dauerhaft auf dem Server implementiere. Es ist noch nicht lange her, als ich nie bezahlt habe Aufmerksamkeit auf mobile Seiten 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, auch dort auf das Aussehen und die Präsentation zu achten.

Wenn es sich um eine Seite auf einem Computer handelte, hätte eine Seite mit der Option aus dem Kontextmenü von Chrome, das mit der rechten Maustaste aufgerufen wird, problemlos getestet werden können. Dies ist jedoch nicht die Option für Seiten auf Mobilgeräten. Also, heute werde ich Ihnen zeigen, wie Sie debuggen können mobile Webseiten auf Ihrem Computer mit Chrome für Android und Android SDK.

Debuggen der Webseite

Schritt 1: Herunterladen und installieren Android SDK 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 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 Renn % userprofile% AppData Local Android android-sdk Plattform-Tools Öffnen Sie das Android-Plattform-Tools-Verzeichnis.

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-Handy und öffnen Sie 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Ö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 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 jeweilige Website-Vorschaubild. 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.