Wat is er nieuw in DevTools (Chrome 61)

Kayce Basques

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

• Simulatie van beperking van de prestaties van mobiele apparaten . Stel gelijktijdige beperking van de CPU en het netwerk in om de prestaties van 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.).
• Cache-tijdstempels . Bekijk wanneer een service worker een reactie in de cache heeft opgeslagen.
• Schakel de FPS-meter in via het opdrachtmenu .
• Wijzig het gedrag van het muiswiel en het trackpad 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 goedkope en middeldure mobiele apparaten in de apparaatmodus.

Het menu 'Apparaatmodusbeperking ' is nu standaard zichtbaar en stelt je in staat om met een paar klikken een mobiel apparaat uit het lagere of middensegment te simuleren.

Afbeelding 1. Het menu voor het regelen van het vermogen.

Afbeelding 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 het opslaggebruik

In het nieuwe gedeelte 'Gebruik' op het tabblad 'Opslag wissen ' in het toepassingspaneel ziet u hoeveel opslagruimte een bron gebruikt, evenals het maximale quotum voor die bron op dit apparaat.

Figuur 3. In het gedeelte 'Gebruik' wordt getoond dat https://airhorner.com 66,9 KB gebruikt van het quotum van 15214 MB van de oorspronkelijke website.

Bekijk wanneer een service worker reacties in de cache heeft opgeslagen

De nieuwe kolom 'Tijd in cache' op het tabblad 'Cacheopslag' laat zien wanneer een service worker reacties in de cache heeft opgeslagen.

Figuur 4. De kolom ' Tijd in cache' .

Schakel de FPS-meter in via het opdrachtmenu.

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

Afbeelding 5. De FPS-meter inschakelen via het opdrachtmenu.

Stel het gedrag van het muiswiel in voor zoomen of scrollen met behulp van prestatieopnames.

Open Instellingen en stel de nieuwe Flamechart-muiswielactie in om het gedrag van het muiswiel in het Prestatiepaneel te wijzigen.

Als je bijvoorbeeld het muiswiel gebruikt in het hoofdgedeelte van een opname, of met twee vingers over een trackpad veegt, is de standaardactie in- of uitzoomen. Wanneer je de instelling wijzigt naar 'Scrollen' , scrollt deze beweging nu omhoog of omlaag.

Afbeelding 6. De instelling van het muiswiel van Flamechart

Debugging-ondersteuning voor ES6-modules

ES6-modules worden standaard meegeleverd in Chrome 61. Wat de ontwikkelaarstools betreft, is er niet veel bijzonders te melden, behalve dat debuggen werkt zoals je zou verwachten. Probeer eens breakpoints in te stellen en stap voor stap door Paul Irish's ES6-module-implementatie van TodoMVC te lopen om het zelf te ervaren.

Download de previewkanalen

Overweeg om Chrome Canary , Dev of Beta als standaard ontwikkelbrowser te gebruiken. Deze preview-versies geven je toegang tot de nieuwste DevTools-functies, stellen je in staat om geavanceerde API's van webplatformen te testen en helpen je problemen op je site te vinden voordat je gebruikers ze tegenkomen!

Neem contact op met het Chrome DevTools-team.

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

• Stuur feedback en suggesties voor nieuwe functies naar crbug.com .
• Meld een probleem met DevTools via de optie ' Meer opties ' > 'Help' > 'Een probleem met DevTools melden' in DevTools.
• Tweet naar @ChromeDevTools .
• Laat reacties achter op de YouTube-video's 'Wat is er nieuw in DevTools' of 'DevTools-tips' .

Wat is er nieuw in DevTools?

Een lijst van alles wat is behandeld in de serie 'Wat is nieuw in DevTools' .