Wat is er nieuw in DevTools (Chrome 74)

Kayce Basken

Welkom terug! Dit is wat er nieuw is.

Videoversie van deze pagina

Markeer alle knooppunten die worden beïnvloed door de CSS-eigenschap

Beweeg de muis over een CSS-eigenschap die van invloed is op het doosmodel van een knooppunt, zoals padding of margin , om alle knooppunten te markeren die door die declaratie worden beïnvloed.

Als u over een marge-eigenschap beweegt, worden alle knooppunten gemarkeerd die door die verklaring worden beïnvloed

Figuur 1 . Als u over een margin eigenschap beweegt, worden de marges van alle knooppunten gemarkeerd die door die declaratie worden beïnvloed

Lighthouse v4 in het deelvenster Audits

De nieuwe Tap-doelen hebben niet de juiste afmetingen; auditcontroles zorgen ervoor dat interactieve elementen zoals knoppen en links voldoende groot zijn en op voldoende afstand van elkaar staan ​​op mobiele apparaten.

De PWA-categorie van een rapport maakt nu gebruik van een badgescoresysteem.

Het nieuwe badgescoresysteem voor de PWA-categorie

Figuur 3 . Het nieuwe badgescoresysteem voor de PWA-categorie

WebSocket-viewer voor binaire berichten

De inhoud van een binair WebSocket-bericht bekijken:

  1. Open het netwerkpaneel . Zie Netwerkactiviteit inspecteren voor meer informatie over de basisprincipes van het analyseren van netwerkactiviteit.

    Het netwerkpaneel

    Figuur 4 . Het netwerkpaneel

  2. Klik op WS om alle bronnen eruit te filteren die geen WebSocket-verbindingen zijn.

    Nadat u op WS heeft geklikt, worden alleen WebSockety-verbindingen weergegeven

    Figuur 5 . Nadat u op WS heeft geklikt, worden alleen WebSockety-verbindingen weergegeven

  3. Klik op de naam van een WebSocket-verbinding om deze te inspecteren.

    Een WebSocket-verbinding inspecteren

    Figuur 6 . Een WebSocket-verbinding inspecteren

  4. Klik op het tabblad Berichten .

    Het tabblad Berichten

    Figuur 7 . Het tabblad Berichten

  5. Klik op een van de binaire berichten om deze te inspecteren.

    Een binair bericht inspecteren

    Figuur 8 . Een binair bericht inspecteren

Gebruik het vervolgkeuzemenu onderaan de viewer om het bericht om te zetten naar Base64 of UTF-8. Klik op Kopiëren naar klembord Kopiëren naar klembord om het binaire bericht naar uw klembord te kopiëren.

Een binair bericht bekijken als Base64

Figuur 9 . Een binair bericht bekijken als Base64

Schermafbeelding van gebied vastleggen in het Commandomenu

Met gebiedsscreenshots kunt u een screenshot maken van een deel van de viewport. Deze functie bestaat al een tijdje, maar de workflow om er toegang toe te krijgen was behoorlijk verborgen. Schermafbeeldingen van gebieden zijn nu beschikbaar via het Commandomenu.

  1. Focus DevTools en druk vervolgens op Control + Shift + P of Command + Shift + P (Mac) om het Commandomenu te openen.

    Het Commandomenu

    Figuur 10 . Het Commandomenu

  2. Begin met het typen area , selecteer Gebiedsscreenshots vastleggen en druk vervolgens op Enter .

  3. Sleep uw muis over het gedeelte van de viewport waarvan u een screenshot wilt maken.

    Het gedeelte van de viewport naar screenshot selecteren

    Figuur 11 . Het gedeelte van de viewport naar screenshot selecteren

Servicemedewerkerfilters in het netwerkpaneel

Type is:service-worker-initiated of is:service-worker-intercepted in het tekstvak Netwerkpaneelfilter om verzoeken te bekijken die zijn veroorzaakt ( initiated ) of mogelijk gewijzigd ( intercepted ) door een servicemedewerker.

Filteren op is:servicemedewerker-geïnitieerd

Figuur 12 . Filteren op is:service-worker-initiated

Filteren op is:servicemedewerker-onderschept

Figuur 13 . Filteren op is:service-worker-intercepted

Zie Bronnen filteren voor meer informatie over het filteren van netwerklogboeken.

Updates van het prestatiepaneel

Opnames van optredens markeren nu lange taken en First Paint.

Bekijk Minder hoofdthreadwerk doen voor een voorbeeld van het gebruik van het prestatiepaneel om de laadprestaties van pagina's te analyseren.

Lange taken in prestatie-opnames

Opnames van optredens tonen nu lange taken .

Bewegen over een lange taak in een prestatie-opname

Figuur 14 . Bewegen over een lange taak in een prestatie-opname

Eerste verf in de sectie Timings

Het gedeelte Timings van een performance-opname markeert nu First Paint.

Eerste verf in de sectie Timings

Figuur 15 . Eerste verf in de sectie Timings

Nieuwe DOM-tutorial

Bekijk Aan de slag met het bekijken en wijzigen van de DOM voor een praktische rondleiding door DOM-gerelateerde functies.

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.

Wat is er nieuw in DevTools

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