Wat is er nieuw in DevTools (Chrome 61)

Kayce Basques

Nieuwe functies en belangrijke wijzigingen voor DevTools in Chrome 61 zijn onder andere:

• Simulatie van throttling van mobiele apparaten . Stel CPU- en netwerkthrottling gelijktijdig in om mobiele apparaten uit het midden- of lagere segment te simuleren.
• Opslaggebruik . Bekijk hoeveel opslagruimte een bron gebruikt, uitgesplitst per technologie (IndexedDB, cache, lokaal, sessie, enz.).
• Cachetijdstempels . Bekijk wanneer een serviceworker een reactie heeft gecached.
• Schakel de FPS-meter in via het opdrachtmenu .
• U kunt het gedrag van het muiswiel en het trackpad wijzigen in het paneel Prestaties .
• Debug ES6-modules op een native manier .

Bekijk hieronder de videoversie van deze release-opmerkingen of lees verder voor meer informatie.

Simuleer mobiele apparaten van het laagste en middensegment in de apparaatmodus

Het menu Apparaatmodusbeperking is nu standaard zichtbaar en hiermee kunt u met een paar klikken een mobiel apparaat uit het lagere of middensegment simuleren.

Figuur 1. Het menu voor gashendel

Figuur 2. Beweeg de muis over het menu 'Throttling' of open het menu 'Capture Settings' om de definities voor 'Mid-tier mobile' en 'Low-end mobile' te bekijken.

Bekijk opslaggebruik

In het nieuwe gedeelte Gebruik op het tabblad Opslag wissen van het paneel Toepassing ziet u hoeveel opslagruimte een oorsprong gebruikt, evenals de maximale quota voor de oorsprong op dit apparaat.

Figuur 3. De sectie Gebruik laat zien dat https://airhorner.com 66,9 KB gebruikt van het oorspronkelijke quotum van 15214 MB.

Bekijk wanneer een servicemedewerker reacties in de cache heeft opgeslagen

De nieuwe kolom Tijd in cache op het tabblad Cacheopslag geeft aan wanneer een serviceworker reacties in de cache heeft opgeslagen.

Figuur 4. De kolom Tijd in cache

Schakel de FPS-meter in via het opdrachtmenu

U kunt de FPS-meter nu inschakelen via het opdrachtmenu .

Figuur 5. De FPS-meter inschakelen via het opdrachtmenu

Stel het muiswielgedrag in op zoomen of scrollen met prestatie-opnamen

Open Instellingen en stel de nieuwe instelling voor muiswielacties van Flamechart in om te wijzigen hoe muiswieltjes zich gedragen in het paneel Prestaties .

Wanneer u bijvoorbeeld een muiswiel gebruikt in het hoofdgedeelte van een opname, of wanneer u met twee vingers over een trackpad veegt, is de standaardinstelling in- of uitzoomen. Wanneer u de instelling wijzigt naar Scrollen , scrolt u nu omhoog of omlaag.

Figuur 6. De Flamechart-muiswielactie- instelling

Debugondersteuning voor ES6-modules

ES6-modules worden standaard meegeleverd in Chrome 61. Er gebeurt hier niet veel met betrekking tot DevTools, behalve dat debuggen werkt zoals je zou verwachten. Probeer eens wat breakpoints in te stellen en de ES6-Module-implementatie van TodoMVC van Paul Irish te doorlopen om het zelf te zien.

Download de previewkanalen

Overweeg Chrome Canary , Dev of Beta als uw standaard ontwikkelbrowser te gebruiken. Deze previewkanalen geven u toegang tot de nieuwste DevTools-functies, laten u geavanceerde webplatform-API's testen en helpen u problemen op uw site te ontdekken voordat uw gebruikers dat doen!

Neem contact op met het Chrome DevTools-team

Gebruik de volgende opties om nieuwe functies, updates of iets anders met betrekking tot DevTools te bespreken.

• Geef uw feedback en verzoeken voor nieuwe functies door aan crbug.com .
• Meld een DevTools-probleem met more_vert Meer opties > Help > Meld een DevTools-probleem in DevTools.
• Tweet naar @ChromeDevTools .
• Laat een reactie achter in de YouTube-video's 'Wat is er nieuw in DevTools' of in de YouTube-video's 'DevTools Tips' .

Wat is er nieuw in DevTools

Een lijst met alles dat in de serie Wat is er nieuw in DevTools is behandeld.