Wat is er nieuw in DevTools (Chrome 74)

Kayce Basken
Kayce Basques
X GitHub

Welkom terug! Dit is wat er nieuw is.

Videoversie van deze pagina

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

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

Als je de muis over een marge-eigenschap beweegt, worden alle knooppunten gemarkeerd die door die declaratie worden beïnvloed.

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

Lighthouse v4 in het Auditpaneel

De nieuwe Tap-targets hebben niet de juiste afmetingen. Een audit controleert of interactieve elementen zoals knoppen en links op mobiele apparaten de juiste grootte en onderlinge afstand hebben.

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

Het nieuwe puntensysteem voor badges in de PWA-categorie.

Figuur 3. Het nieuwe puntensysteem voor badges in de PWA-categorie.

WebSocket binaire berichtviewer

Om de inhoud van een binair WebSocket-bericht te bekijken:

  1. Open het paneel Netwerk . Raadpleeg Netwerkactiviteit inspecteren om de basisprincipes van het analyseren van netwerkactiviteit te leren.

    Het netwerkpanel

    Afbeelding 4. Het netwerkpaneel

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

    Na het klikken op WS worden alleen WebSocket-verbindingen weergegeven.

    Afbeelding 5. Na het klikken op WS worden alleen WebSocket-verbindingen weergegeven.

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

    Een WebSocket-verbinding inspecteren

    Afbeelding 6. Een WebSocket-verbinding inspecteren.

  4. Klik op het tabblad Berichten .

    Het tabblad Berichten

    Afbeelding 7. Het tabblad Berichten

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

    Een binair bericht inspecteren

    Figuur 8. Een binair bericht inspecteren.

Gebruik het keuzemenu onderaan de viewer om het bericht naar Base64 of UTF-8 te converteren. Klik op 'Kopiëren naar klembord'. Kopiëren naar het klembord om het binaire bericht naar je klembord te kopiëren.

Een binair bericht weergeven als Base64.

Afbeelding 9. Een binair bericht bekijken als Base64.

Maak een schermafbeelding van het gebied dat u vastlegt in het opdrachtmenu.

Met gebiedsscreenshots kunt u een screenshot maken van een gedeelte van het weergavegebied. Deze functie bestaat al een tijdje, maar de manier om er toegang toe te krijgen was nogal verborgen. Gebiedsscreenshots zijn nu beschikbaar via het opdrachtmenu.

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

    Het opdrachtmenu

    Afbeelding 10. Het commandomenu

  2. Begin met het typen area , selecteer 'Schermafbeeldingen van het gebied maken' en druk vervolgens op Enter .

  3. Beweeg uw muis over het gedeelte van het scherm dat u wilt vastleggen.

    Het gedeelte van het scherm selecteren dat u wilt vastleggen

    Afbeelding 11. Het gedeelte van het weergavegebied selecteren om een ​​screenshot van te maken.

Filters voor serviceworkers in het netwerkpaneel

Typ is:service-worker-initiated of is:service-worker-intercepted in het filtertekstvak van het netwerkpaneel om verzoeken te bekijken die zijn veroorzaakt ( initiated ) of mogelijk gewijzigd ( intercepted ) door een service worker.

Filteren op is:service-worker-geïnitieerd

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

Filteren op is:service-worker-onderschept

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

Zie Filterbronnen voor meer informatie over het filteren van netwerklogboeken.

Updates van het prestatiepaneel

Prestatieopnames markeren nu lange taken en First Paint.

Bekijk het voorbeeld 'Minder werk op de hoofdthread uitvoeren' voor een uitleg over hoe u het paneel 'Prestaties' kunt gebruiken om de laadprestaties van een pagina te analyseren.

Lange taken in Performance-opnames

Uit prestatieopnames blijkt nu dat taken langer duren.

De muiscursor boven een lange taak in een Performance-opname houden.

Afbeelding 14. De muiscursor boven een lange taak in een Performance-opname plaatsen.

Eerste verfbeurt in het gedeelte 'Tijden'

Het gedeelte 'Timing' van een Performance-opname markeert nu 'First Paint'.

Eerste verfbeurt in het gedeelte 'Tijden'

Figuur 15. Eerste verfbeurt in het gedeelte 'Tijden'.

Nieuwe DOM-handleiding

Bekijk de handleiding 'Aan de slag met het bekijken en wijzigen van de DOM' voor een praktische kennismaking met DOM-gerelateerde functies.

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.

Wat is er nieuw in DevTools?

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