Foutopsporing in webpagina's in Chrome voor Android op computer
Diversen / / February 10, 2022
![chroom](/f/3bb1c1fbe30dc2b5fdb9272e5126e2d0.png)
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 niet lang geleden toen ik nooit betaalde
aandacht voor mobiele pagina's
aangezien slechts weinig bezoekers mijn site bezochten met een smartphone. Maar tegenwoordig bestaat een aanzienlijk percentage van de bezoekers uit smartphones en tablets, en daarom is het noodzakelijk geworden om ook daar 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 laat ik je zien hoe je kunt debuggen mobiele webpagina's op uw computer 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 om verschillende API's en tools te downloaden. Als je enige doel van het installeren van Android SDK is om de pagina's te debuggen, schakel dan alles uit behalve Android SDK Platform-tools en klik op de Installeer pakket knop.
![Android SDK](/f/20d3360fcbb5f205198e3d8fd6a514cf.png)
Stap 2: Na het installeren van Android-platformtools, open het vak Uitvoeren (Windows+R) en loop %userprofile%\AppData\Local\Android\android-sdk\platform-tools om de directory met hulpprogramma's van het Android-platform te openen.
![Opdracht uitvoeren](/f/46ba86ad7e4f10e643bb61407e0b65f0.png)
Stap 3: Houd nu de Ctrl+Shift-toets ingedrukt en klik met de rechtermuisknop in de map om de opdrachtprompt daar te openen. U kunt ook de opdrachtprompt openen met behulp van het vak Uitvoeren en handmatig naar de map navigeren.
![Cmd-prompt](/f/2cf53ce2416e9ec07c2fe39f7456ab46.png)
Stap 4: Als je dat hebt gedaan, open je Chrome op je Android-telefoon, open Instellingen—>Ontwikkelaarstools en vink de optie USB-webfoutopsporing inschakelen aan.
![USB-foutopsporing Chrome](/f/6b8deac4f55b6a8bfc9bd83ae616b723.png)
Stap 5: Voer nu op de opdrachtprompt de opdracht uit: adb forward tcp: 9222 localabstract: chrome_devtools_remote en open de Chrome-browser op Windows bij succesvolle uitvoering.
Stap 6: Open de pagina die u wilt opsporen in uw Android Chrome-browser en open de URL localhost: 9222 in de Chrome-browser van uw computer.
![Selectie](/f/2f29505c037ab7bc0df311c79bca43e6.png)
Dat is alles, u ziet alle pagina's die in uw Android-browser zijn geopend als miniaturen op uw computer. Om de foutopsporingspagina te openen, klikt u gewoon op de respectieve miniatuur van de website. U kunt de foutopsporingswijzigingen die u op uw computer aanbrengt, rechtstreeks op Android in realtime volgen.
Gevolgtrekking
Ik weet zeker dat deze truc veel webontwikkelaars zal helpen om hun webpagina's voor smartphones te optimaliseren. Ik heb de truc gebruikt om mijn webpagina's te configureren en het werkte als een charme. Als u echter een betere manier weet om webpagina's van smartphones op de computer te debuggen, deel deze dan met ons.
Laatst bijgewerkt op 03 februari 2022
Het bovenstaande artikel kan gelieerde links bevatten die Guiding Tech helpen ondersteunen. Het tast onze redactionele integriteit echter niet aan. De inhoud blijft onbevooroordeeld en authentiek.