So debuggen Sie Webseiten in Chrome für Android auf dem Computer
Verschiedenes / / February 10, 2022
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 noch nicht lange her, 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 Seite mit der Option aus dem Rechtsklick-Kontextmenü von Chrome leicht debuggen können, aber das ist bei den Seiten auf dem Handy nicht möglich. Deshalb zeige ich Ihnen heute, 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 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 Ausführungsbox (Windows+R) und Renn %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.
Zuletzt aktualisiert am 03. Februar 2022
Der obige Artikel kann Affiliate-Links enthalten, die Guiding Tech unterstützen. Dies beeinträchtigt jedoch nicht unsere redaktionelle Integrität. Die Inhalte bleiben unvoreingenommen und authentisch.