Wat is er nieuw in DevTools (Chrome 61)

Kayce Basques

Nieuwe functies en grote veranderingen voor DevTools in Chrome 61 zijn onder meer:

• Simulatie van beperking van mobiel apparaat . Stel tegelijkertijd CPU- en netwerkbeperking in om middelgrote of goedkope mobiele apparaten te simuleren.
• Opslaggebruik . Bekijk hoeveel opslagruimte een origin gebruikt, uitgesplitst naar technologie (IndexedDB, cache, lokaal, sessie, etc.).
• Tijdstempels cachen . Bekijk wanneer een servicemedewerker een antwoord in de cache heeft opgeslagen.
• Schakel de FPS-meter in via het Commandomenu .
• Wijzig het gedrag van het muiswiel en het trackpad in het paneel Prestaties .
• Debug ES6-modules native .

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

Simuleer low-end en mid-tier mobiele apparaten in de apparaatmodus

Het Device Mode Throttling -menu is nu standaard zichtbaar en laat je nu met een paar klikken een low-end of mid-tier mobiel apparaat simuleren.

Figuur 1 . Het throttling-menu

Figuur 2 . Beweeg de muis over het Throttling -menu of open het menu Capture-instellingen om de definities voor mid-tier mobiel en low-end mobiel te bekijken

Opslaggebruik bekijken

De nieuwe sectie Gebruik op het tabblad Opslag wissen van het paneel Applicaties laat zien hoeveel opslagruimte een origin gebruikt, evenals het maximale quotum voor de origin op dit apparaat.

Figuur 3 . Uit het gedeelte Gebruik blijkt dat https://airhorner.com 66,9 KB gebruikt van het oorspronkelijke quotum van 15214 MB

Bekijk wanneer een servicemedewerker antwoorden in de cache heeft opgeslagen

In de nieuwe kolom Tijd in cache op het tabblad Cache-opslag kunt u zien wanneer een servicemedewerker antwoorden in de cache heeft opgeslagen.

Figuur 4 . De kolom Tijd in cache

Schakel de FPS-meter in vanuit het Commandomenu

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

Figuur 5 . De FPS-meter inschakelen via het Commandomenu

Stel het muiswielgedrag in om te zoomen of te scrollen met prestatie-opnamen

Open Instellingen en stel de nieuwe Flamechart-muiswielactie- instelling in om te wijzigen hoe muiswielen 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 het standaardgedrag in- of uitzoomen. Wanneer u de instelling wijzigt in Scrollen , scrolt dit gebaar nu omhoog of omlaag.

Figuur 6 . De actie-instelling van het Flamechart-muiswiel

Ondersteuning voor foutopsporing voor ES6-modules

ES6-modules worden standaard geleverd in Chrome 61. Er is hier niet veel aan de hand met betrekking tot DevTools, behalve dat foutopsporing werkt zoals je zou verwachten. Probeer een aantal breekpunten in te stellen en door Paul Irish's ES6-Module-implementatie van TodoMVC te stappen om het zelf te zien.

Download de voorbeeldkanalen

Overweeg om Chrome Canary , Dev of Beta te gebruiken als uw standaard ontwikkelingsbrowser. Met deze voorbeeldkanalen krijgt u toegang tot de nieuwste DevTools-functies, kunt u geavanceerde webplatform-API's testen en kunt u problemen op uw site opsporen voordat uw gebruikers dat doen!

Neem contact op met het Chrome DevTools-team

Gebruik de volgende opties om de nieuwe functies, updates of iets anders gerelateerd aan DevTools te bespreken.

• Stuur feedback en functieverzoeken naar ons op crbug.com .
• Rapporteer een DevTools-probleem met more_vert Meer opties > Help > Rapporteer een DevTools-probleem in DevTools.
• Tweet op @ChromeDevTools .
• Laat reacties achter op Wat is er nieuw in DevTools YouTube-video's of DevTools Tips YouTube-video's .

Wat is er nieuw in DevTools

Een lijst met alles wat aan bod is gekomen in de serie Wat is er nieuw in DevTools .