Een nieuwe apparaatmodus voor een mobiele eerste generatie
Iets meer dan een jaar geleden hebben we de Apparaatmodus geïntroduceerd, een manier om apparaten te emuleren en met responsieve ontwerpen te werken. Nu is het tijd voor de eerste grote upgrade, beginnend in Chrome 49. Wat is er nieuw?
Mobiel wordt het startpunt in Chrome DevTools. Hoewel we in het verleden manieren aanboden om mobiel te emuleren, was de ontwikkelingsstandaard desktop. Mobiele emulatie moest altijd ingeschakeld zijn. Nu de consumptie van mobiele sites de desktop op veel plaatsen heeft ingehaald, veranderen we ook onze positie in DevTools.
Wat is er nieuw?
Eerst en vooral is de gebruikersinterface gestroomlijnd en gebruikt deze veel minder ruimte. We verwachten dat de nieuwe Apparaatmodus voor de meesten de belangrijkste ontwikkelingsmodus zal worden, dus een strak en eenvoudig ontwerp dat de belangrijkste DevTools-navigatiebalk uitbreidt, was een vereiste.
De nieuwe snelle apparaatliniaal over de mediaquery's.
Daarnaast hebben we de viewport gecentreerd en bovenaan een nieuwe snel-spring-apparaatliniaal toegevoegd, een grote hulp bij responsief ontwerpen, die u een idee geeft van de meest voorkomende apparaatformaten.
En ten slotte zijn veel opties waar mogelijk gebundeld of verborgen achter een schakelaar. Deze nieuwe samengestelde opties maken het een stuk eenvoudiger om tussen modi te schakelen. Om bepaalde bedieningselementen in of uit te schakelen of uw ervaring met de werkbalk aan te passen, klikt u op het kleine menupictogram met drie stippen.
Standaard responsief
De hoofdwerkbalk van DevTools wordt nu uitgebreid naar de linkerkant van het browservenster en bevat de belangrijkste tools om een verscheidenheid aan mobiele en desktopapparaten te emuleren. U kunt kiezen uit twee ontwikkelingsmodi:
- Snel reagerend
- Specifiek apparaat
In beide modi bevindt de viewport zich in een eigen, aanpasbaar venster in Chrome. Dit heeft het belangrijke voordeel dat u uw browservenster en de DevTools kunt maximaliseren zoals u dat wilt, en dat ze niet rondspringen wanneer u meerdere formaten van uw pagina test en heen en weer gaat.
Responsief is de modus waarin u zich tijdens actieve iteratie wilt bevinden om ervoor te zorgen dat uw site op allerlei soorten apparaten werkt, en niet slechts op een paar specifieke apparaten. In deze modus zijn de handvatten naast de viewport vrij aanpasbaar.
Specifiek apparaat verwijst naar wanneer u een specifiek apparaat kiest en de viewport op zijn grootte vergrendelt. Dit wordt handig als je vlak voor de lancering de laatste reparaties en aanpassingen wilt doen voor een paar populaire apparaten. Daarom laten we in de vervolgkeuzelijst niet alleen een enorme lijst met allerlei soorten apparaten zien, maar ook de momenteel populairste apparaten. Als u er een selecteert, doen we ons best om ervoor te zorgen dat deze zich net zo gedraagt als de echte deal: Touch-gebeurtenissen, user-agent, viewport en apparaatchroom en gebruikersinterface (indien beschikbaar) worden allemaal geëmuleerd.
Geïntegreerde foutopsporing op afstand
Emulaties, zelfs de beste die beschikbaar zijn, kunnen je slechts tot nu toe brengen. Er zijn eenvoudigweg dingen die emulaties tegenwoordig niet kunnen doen, zoals:
- Controleer of een knop groot genoeg is voor je duim.
- Test de prestaties van uw site op een langzamere telefoon.
- Debug willekeurige eigenaardigheden en beperkingen van bepaalde apparaten.
Om al deze scenario's voldoende te testen, moet u testen, werken en fouten opsporen met echte fysieke apparaten.
U kunt al een tijdje naar chrome://inspect surfen, uw apparaat via USB aansluiten en een foutopsporingssessie op afstand openen via DevTools. Maar we zijn nu nog een stap verder gegaan en hebben het uiterlijk en gedrag van foutopsporing op afstand opnieuw vormgegeven, door dit in de kern van DevTools te integreren. In plaats van naar een andere pagina te bladeren, kunt u nu Apparaten inspecteren als dialoogvenster rechtstreeks vanuit het nieuwe hoofdmenu openen. Dit maakt het veel eenvoudiger om fysieke foutopsporing in uw workflow op te nemen: sluit gewoon uw telefoon aan, u hoeft uw DevTools niet af te sluiten!
Nieuwe huizen voor de rest van de voormalige emulatiecontroles
Omdat mobiel nu de standaard is in DevTools, zijn functies zoals netwerkbeperking naar hun juiste plek verplaatst, in dit geval het Netwerkpaneel.
Sommige functies, zoals de emulatie van sensoren of weergave-instellingen zoals het emuleren van gedrukte media, zijn verplaatst naar een consistente plek in de lade. Alle extra's vindt u in het nieuwe hoofdmenu onder 'Meer tools'.
We weten dat dit een belangrijke verandering is waaraan we allemaal zullen moeten wennen. Volledige informatie over alles wat erin staat vindt u in de zojuist bijgewerkte documenten over de apparaatmodus . We horen graag van u op Twitter of als u meer dan 140 tekens nodig heeft, op onze bugtracker (ja, zelfs voor functieverzoeken).