Een speciale gastpost van Samsung Internet engineering group teamlid, Adil!
Developer-tools die door browsers worden geleverd, zijn de constante metgezel van veel webontwikkelaars. We kunnen ze gebruiken om onze code te inspecteren, ons op fouten te wijzen en verschillende controles uit te voeren. DevTools in Chrome kan u ook een manier bieden om uw schermgrootte aan te passen aan uw mobiele apparaat. Deze functie wordt door veel ontwikkelaars vaak gebruikt. Een van de handige punten van deze functie is dat u kunt kiezen uit populaire mobiele apparaten, en DevTools zal de schermgrootte precies hetzelfde aanpassen als dat apparaat. Zo kunnen we webpagina’s testen en debuggen met de grootte van het mobiele apparaat.
Chrome DevTools is niet alleen bedoeld voor het inspecteren van DOM-elementen en CSS-attributen. We kunnen het ook gebruiken voor onderzoek van netwerkaanvragen en toegang tot opslaggerelateerde parameters. Bovendien kunt u JavaScript-code direct uitvoeren en de berichten in de console bekijken. Is het niet verbazingwekkend?
Nu, stel je hebt een mobiele telefoon in je hand, en er treden specifieke problemen op, met name op dit apparaat, en je bent niet in staat om het probleem te reproduceren met behulp van DevTools en de hierboven geïllustreerde methode. Of, stel je een situatie voor waar je mobiele browser specifieke API’s heeft, en je wilt deze debuggen. In dit geval hebt u DevTools op uw mobiele telefoon nodig.
Wat u zich misschien niet realiseert, is dat u desktop DevTools ook kunt gebruiken voor het debuggen van op Blink gebaseerde browsers (zoals Samsung Internet) op uw Android-apparaten.
Om dit te doen, schakelt u eerst “USB Debugging” in op uw Android-toestel en sluit u het aan op uw computer.
Nu komt het spannende gedeelte. Ga naar de URL “chrome://inspect” en klik vervolgens op “Apparaten”. Hoera! U ziet nu de lijst met actieve browsersessies op uw mobiele apparaat.
Klik op “Inspecteren” en u ziet de browserweergave op uw computer. Nu kunt u alle manipulaties uitvoeren met DevTools.
U kunt de lijst met mobiele apparaten ook openen met Remote Devices in het menu DevTools.
Hopelijk zult u veel plezier beleven aan het gebruik van deze techniek om het debuggen op uw mobiel eenvoudiger te maken!