Wat is er nieuw in DevTools (Chrome 74)

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 Kopieer 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 van 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 het gebruik van Chrome Canary , Dev of Beta als uw standaard ontwikkelingsbrowser. Deze preview-kanalen geven u toegang tot de nieuwste DevTools-functies, testen geavanceerde webplatform-API's en ontdekken problemen op uw site voordat uw gebruikers dat doen!

Neem contact op met het Chrome DevTools-team

Gebruik de volgende opties om de nieuwe functies en wijzigingen in het bericht te bespreken, of iets anders gerelateerd aan DevTools.

  • Stuur ons een suggestie of feedback via crbug.com .
  • Rapporteer een DevTools-probleem met behulp van de opties MeerMeer > Help > Rapporteer een DevTools-probleem in DevTools.
  • Tweet op @ChromeDevTools .
  • Laat reacties achter op onze 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 is behandeld in de What's New In DevTools- serie.

Chroom 123

Chroom 122

Chroom 121

Chroom 120

Chroom 119

Chroom 118

Chroom 117

Chroom 116

Chroom 115

Chroom 114

Chroom 113

Chroom 112

Chroom 111

Chroom 110

Chroom 109

Chroom 108

Chroom 107

Chroom 106

Chroom 105

Chroom 104

Chroom 103

Chroom 102

Chroom 101

Chroom 100

Chroom 99

Chroom 98

Chroom 97

Chroom 96

Chroom 95

Chroom 94

Chroom 93

Chroom 92

Chroom 91

Chroom 90

Chroom 89

Chroom 88

Chroom 87

Chroom 86

Chroom 85

Chroom 84

Chroom 83

Chroom 82

Chrome 82 is geannuleerd .

Chroom 81

Chroom 80

Chroom 79

Chroom 78

Chroom 77

Chroom 76

Chroom 75

Chroom 74

Chroom 73

Chroom 72

Chroom 71

Chroom 70

Chroom 68

Chroom 67

Chroom 66

Chroom 65

Chroom 64

Chroom 63

Chroom 62

Chroom 61

Chroom 60

Chroom 59