Hoe webpagina's te debuggen op Chrome voor Android op computer

Als beheerder van een blog debug ik mijn persoonlijke website met Chrome om te zien hoe de wijzigingen in het thema en CSS eruit zouden zien voordat ik ze permanent op de server implementeer. Ik was nog niet zo lang geleden toen ik nooit aandacht besteedde aan mobiele pagina's omdat slechts weinig bezoekers mijn site bezochten met behulp van een smartphone. Maar vandaag bestaat een aanzienlijk percentage bezoekers uit smartphones en tablets, en daarom is het noodzakelijk geworden om er ook voor uiterlijk en presentatie te zorgen.

Als het een pagina op de computer was, had iemand gemakkelijk kunnen debuggen met behulp van de optie in het contextmenu van Chrome met de rechtermuisknop, maar dat is niet de optie met de pagina's op mobiel. Dus vandaag zal ik je laten zien hoe je mobiele webpagina's op je computer kunt debuggen met Chrome voor Android en Android SDK.

Debuggen van de webpagina

Stap 1: Download en installeer Android SDK op uw computer en voer het uit. Het installatieprogramma zal u vragen om Java te downloaden als u het niet hebt geïnstalleerd.

Voor de eerste keer dat u Android SDK op uw computer uitvoert, wordt u gevraagd verschillende API's en hulpprogramma's te downloaden. Als je enige doel van het installeren van Android SDK is om de pagina's te debuggen, schakel je alles uit behalve Android SDK Platform-tools en klik je op de knop Pakket installeren.

Stap 2: Na het installeren van Android-platformtools, opent u de Run Box (Windows + R) en voert u % userprofile% \ AppData \ Local \ Android \ android-sdk \ platform-tools uit om de directory met Android-platformtools te openen.

Stap 3: Houd Ctrl + Shift-toets ingedrukt en klik met de rechtermuisknop in de map om de opdrachtprompt daar te openen. U kunt de opdrachtprompt ook openen met het vak Uitvoeren en handmatig naar de map navigeren.

Stap 4: Open daarna Chrome op uw Android-telefoon, open Instellingen -> Ontwikkelaarstools en vink de optie USB-webopsporing inschakelen aan.

Stap 5: Voer nu op de opdrachtprompt de opdracht adb forward tcp: 9222 localabstract: chrome_devtools_remote uit en open Chrome-browser op Windows bij succesvolle uitvoering.

Stap 6: Open de pagina die u wilt debuggen in uw Android Chrome-browser en open de URL localhost: 9222 in de Chrome-browser van uw computer.

Dat is alles, u zult alle open pagina's in uw Android-browser zien als miniaturen op uw computer. Om de foutopsporingspagina te openen, klikt u eenvoudig op de respectieve websiteminiatuur. U kunt de foutopsporingswijzigingen die u op uw computer aanbrengt, rechtstreeks in Android volgen.

Conclusie

Ik weet zeker dat deze truc veel webontwikkelaars zal helpen hun webpagina's voor smartphones te optimaliseren. Ik heb de truc gebruikt om mijn webpagina's te configureren en het werkte als charme. Als u echter een betere manier kent om webpagina's met smartphones op computers te debuggen, deel deze dan met ons.