Ontwikkelen voor mobiel moet net zo eenvoudig zijn als ontwikkelen voor desktop. We hebben hard gewerkt in de Chrome DevTools om het u gemakkelijker te maken en het is tijd om enkele nieuwe functies te onthullen die uw mobiele webontwikkeling dramatisch zouden moeten verbeteren. Eerst debuggen op afstand en daarna onthullen we de juiste mobiele emulatie .
Screencast het scherm van uw apparaat naar het bureaublad
Tot nu toe moest u tijdens het op afstand debuggen heen en weer schakelen tussen uw apparaat en uw devtools. Nu geeft Screencast het scherm van uw apparaat weer naast uw devtools . Het zien ervan is goed, maar er mee omgaan is nog beter:
- Klikken op de screencast worden vertaald in tikken en de juiste aanraakgebeurtenissen worden op het apparaat geactiveerd.
- Inspecteer het element op uw apparaat met uw bureaubladaanwijzer
- Typ op uw bureaubladtoetsenbord : alle toetsaanslagen worden naar het apparaat verzonden . Een enorme tijdsbesparing ten opzichte van typen met uw duimen.
- Blader door de pagina door deze met uw aanwijzer te bewegen of gewoon over het trackpad van uw laptop te schuiven.
De volledige documentatie over screencasting legt dit alles en meer vast, zoals het verzenden van een knijpzoomgebaar. Chrome op Android Bèta (m32) vereist.
Gemakkelijk op afstand debuggen
Achttien maanden geleden introduceerde Chrome behoorlijke foutopsporing op afstand voor WebKit-browsers, maar als je het destijds uitprobeerde, kreeg je te maken met een Android SDK-download van 400 MB, waarbij je het binaire adb bestand aan je $PATH toevoegde en een aantal magische commandoregel-bezweringen.
Nu zijn we blij om aan te kondigen dat je dat allemaal kunt vergeten. Chrome kan nu automatisch uw via USB aangesloten apparaten detecteren en ermee praten . We hebben het adb protocol rechtstreeks via USB in Chrome geïmplementeerd, zodat u eenvoudig naar Menu > Tools > Inspect Devices kunt gaan en onmiddellijk uw foutopsporingssessie op afstand kunt starten.
Dit werkt prima op alle platforms, inclusief Chrome OS, maar houd er rekening mee dat u in Windows eerst de juiste USB-stuurprogramma's moet installeren om met het apparaat te kunnen praten. Als u het nog nooit eerder heeft geprobeerd, moet u ook USB-foutopsporing op het apparaat inschakelen en bevestigen dat u Chrome voor Android Bèta gebruikt. Lees de volledige documenten. .
Port-forward voor lokale projecten
Je ontwikkelt op localhost:8000, maar je telefoon kan daar niet bij. Daarom hebben we port forwarding rechtstreeks toegevoegd aan de workflow voor foutopsporing op afstand. Nu kunt u eenvoudig aan uw volledige projecten werken, zonder tunnelhacks. Over about:inspect klik op Port Forwarding om in te stellen welke poorten je beschikbaar wilt hebben, en ze zullen groen oplichten als ze klaar zijn om te gebruiken.
Mobiele emulatie
U beschikt niet altijd over de apparaten die u moet testen op compatibiliteit, toch? Terwijl het op afstand debuggen van echte apparaten je het beste gevoel voor prestaties en aanraking geeft, kun je nu op realistische wijze veel apparaatkenmerken op de desktop emuleren, waardoor je tijd bespaart en je iteratielus veel sneller wordt.
Emuleer schermgrootte, devicePixelRatio en <meta viewport> met full-touch-gebeurtenissimulatie
Als je de vorige Device Metrics-functie hebt gezien, is er nu een enorme upgrade beschikbaar. Het team heeft er hard aan gewerkt om de nieuwe mobiele emulatie een bijna realistische weergave te geven van wat je op echte apparaten zou zien. WebKit-browsers hanteren bijvoorbeeld een complex algoritme voor het automatisch aanpassen van tekst en in feite heeft elk apparaat een specifieke "fudge-factor" voor het automatisch aanpassen van tekst, die verandert om de tekst leesbaar te houden. In de emulatiemodus kunt u bevestigen dat dit gedrag wordt toegepast en de resultaten bekijken.
Pixelverhouding van apparaat
Tot nu toe was het vrijwel onmogelijk om te zien wat een apparaat met hoge DPI weergeeft op een apparaat met lage DPI. Nu zal de dPR-emulatie in DevTools uw weergave aanpassen zodat u kunt inzoomen op een diep DPI-scenario. Bovendien kunt u verwachten dat window.devicePixelRatio , @media (-webkit-min-device-pixel-ratio: 2) , image-set( url(pic2x.jpg) 2x, …) , enz. uw instellingen weerspiegelen, zodat u om te zien hoe uw app zich aanpast, inclusief het laden van verschillende dpi-specifieke items.
De apparaatemulatie strekt zich niet helemaal uit tot browserfuncties of bugs. Dus terwijl iOS wordt geëmuleerd, zal WebGL nog steeds werken en zul je de iOS 5-oriëntatiezoombug niet tegenkomen. Om die variabiliteit te ervaren, ga je naar het apparaat.
Juiste emulatie van <meta viewport> (en @viewport )
Het testen van het gedrag van wat width=device-width en minimum-scale:1.0 doen, was voorheen alleen een spel voor apparaten. Nu kunt u snel verschillende viewports uitproberen en zien hoe ze worden weergegeven.
Raak Gebeurtenissimulatie aan
De emulatie van de touchscreen- instelling zorgt ervoor dat uw klikken worden geïnterpreteerd als touchstart enzovoort. Bovendien zullen synthetische gebeurtenissen zoals zoomen, scrollen en pannen werken. Om te knijpen en te zoomen, hoeft u alleen maar shift +slepen of shift +scroll om in te zoomen op de inhoud. U krijgt een goed beeld van de inhoud die buiten de viewport wordt geschaald.
Ten slotte kunt u met uw standby-mogelijkheden voor useragent-spoofing (zowel op verzoekheader- als op window.navigator niveau), geolocatie- en oriëntatie-emulatie de volledige functionaliteit van uw apparaat verkennen.
Apparaatvoorinstellingen
Met de emulatievoorinstellingen kunt u een telefoon of tablet selecteren en de juiste schermgrootte, dPR en UA voor dat apparaat toepassen, samen met full touch-gebeurtenissen en geëmuleerde viewport. U kunt bepaalde voorinstellingen uitproberen of deze kenmerken eenvoudig één voor één aanpassen.
Ga naar devtools.chrome.com voor de volledige documentatie over mobiele emulatie met DevTools
Demo
Om de volledige demo van al deze functies in actie te krijgen, bekijk mijn 23 minuten durende lezing van Chrome Dev Summit op DevTools voor mobiel: