Wat is er nieuw in DevTools (Chrome 74)

Kayce Basques

Welkom terug! Dit is het nieuws.

Videoversie van deze pagina

Markeer alle knooppunten die worden beïnvloed door CSS-eigenschappen

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

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

Lighthouse v4 in het Audits-paneel

De nieuwe Tap-doelen hebben niet het juiste formaat. Er wordt gecontroleerd of interactieve elementen, zoals knoppen en links, de juiste grootte hebben en voldoende ruimte tussen de doelen hebben op mobiele apparaten.

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

Figuur 3. Het nieuwe badge-scoresysteem voor de PWA-categorie

WebSocket binaire berichtenviewer

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

1. Open het paneel Netwerk . Zie Netwerkactiviteit inspecteren voor de basisbeginselen van het analyseren van netwerkactiviteit.

   

   Figuur 4. Het netwerkpaneel

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

   

   Figuur 5. Na het klikken op WS worden alleen WebSockety-verbindingen weergegeven

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

   

   Figuur 6. Een WebSocket-verbinding inspecteren

4. Klik op het tabblad Berichten .

   

   Figuur 7. Het tabblad Berichten

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

   

   Figuur 8. Een binair bericht inspecteren

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

Figuur 9. Een binair bericht bekijken als Base64

Schermafbeelding van het gebied vastleggen in het opdrachtmenu

Met schermafbeeldingen van een bepaald gebied kunt u een schermafbeelding maken van een deel van de viewport. Deze functie bestaat al een tijdje, maar de workflow om deze te gebruiken was behoorlijk verborgen. Schermafbeeldingen van een bepaald gebied zijn nu beschikbaar via het menu Opdrachten.

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

   

   Figuur 10. Het opdrachtmenu

2. Begin met typen van area , selecteer Schermafbeeldingen van gebied vastleggen en druk op Enter .

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

   

   Figuur 11. Het selecteren van het deel van de viewport dat u als schermafbeelding wilt gebruiken

Service worker-filters in het paneel Netwerk

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

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

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

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

Updates van het prestatiepaneel

Prestatie-opnames markeren nu lange taken en First Paint.

Bekijk Minder hoofdthreadwerk doen voor een voorbeeld van hoe u het paneel Prestaties kunt gebruiken om de laadprestaties van een pagina te analyseren.

Lange taken in prestatie-opnames

Prestatie-opnames tonen nu lange taken .

Figuur 14. Met de muis over een lange taak in een prestatie-opname bewegen

Eerste verf in het Timings-gedeelte

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

Figuur 15. Eerste verf in het gedeelte Timings

Nieuwe DOM-tutorial

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

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.