Wat is er nieuw in DevTools (Chrome 87)

Nieuwe foutopsporingstools voor CSS-rasters

DevTools heeft nu betere ondersteuning voor foutopsporing in CSS-rasters!

Foutopsporing in CSS-rasters

Wanneer op een HTML-element op uw pagina display: grid of display: inline-grid is toegepast, ziet u ernaast een grid in het paneel Elementen . Klik op de badge om de weergave van een rasteroverlay op de pagina in of uit te schakelen.

Het nieuwe lay- outvenster heeft een rastersectie die u een aantal opties biedt voor het bekijken van de rasters.

Bekijk de documentatie voor meer informatie.

Chroomuitgave: 1047356

Nieuw WebAuthn-tabblad

U kunt nu authenticators emuleren en fouten opsporen in de Web Authentication API met het nieuwe tabblad WebAuthn .

Selecteer Meer opties > Meer hulpmiddelen > WebAuthn om het tabblad WebAuthn te openen.

Tabblad WebAuthn

Vóór het nieuwe WebAuthn- tabblad was er geen native WebAuthn-foutopsporingsondersteuning in Chrome. Ontwikkelaars hadden fysieke authenticators nodig om hun webapplicatie te testen met de Web Authentication API.

Met het nieuwe WebAuthn- tabblad kunnen webontwikkelaars deze authenticators nu emuleren, hun mogelijkheden aanpassen en hun status inspecteren, zonder dat er fysieke authenticators nodig zijn. Dit maakt de foutopsporingservaring veel eenvoudiger.

Bekijk onze documentatie voor meer informatie over de WebAuthn-functie.

Chroomuitgave: 1034663

Verplaats gereedschappen tussen het boven- en onderpaneel

DevTools ondersteunen nu het verplaatsen van gereedschappen in DevTools tussen het boven- en onderpaneel. Op deze manier kunt u twee tools tegelijk bekijken.

Als u bijvoorbeeld het paneel Elementen en Bronnen tegelijk wilt bekijken, kunt u met de rechtermuisknop op het paneel Bronnen klikken en Naar beneden verplaatsen selecteren om het naar beneden te verplaatsen.

Verplaats naar beneden

Op dezelfde manier kunt u elk onderste tabblad naar boven verplaatsen door met de rechtermuisknop op een tabblad te klikken en Verplaatsen naar boven te selecteren.

Ga naar boven

Chroomuitgave: 1075732

Updates van het Elementenpaneel

Bekijk het deelvenster Berekende zijbalk in het deelvenster Stijlen

U kunt nu het deelvenster Berekende zijbalk in het deelvenster Stijlen omschakelen.

Het deelvenster Berekende zijbalk in het deelvenster Stijlen is standaard samengevouwen. Klik op de knop om deze te schakelen.

Berekend zijbalkvenster

Chroomuitgave: 1073899

CSS-eigenschappen groeperen in het deelvenster Berekend

U kunt nu de CSS-eigenschappen per categorie groeperen in het deelvenster Berekend .

Met deze nieuwe groeperingsfunctie wordt het gemakkelijker om in het berekende venster te navigeren (minder scrollen) en selectief te focussen op een reeks gerelateerde eigenschappen voor CSS-inspectie.

Selecteer een element in het paneel Elementen . Schakel het selectievakje Groeperen in om de CSS-eigenschappen te groeperen/degroeperen.

CSS-eigenschappen groeperen

Chroomuitgaves: 1096230 , 1084673 , 1106251

Vuurtoren 6.4 in het Vuurtorenpaneel

Het Lighthouse- paneel draait nu Lighthouse 6.4. Bekijk de releaseopmerkingen voor een volledige lijst met wijzigingen.

Vuurtoren

Nieuwe audits in Lighthouse 6.4:

  • Lettertypen vooraf laden . Valideert of alle lettertypen die font-display: optional gebruiken, vooraf zijn geladen.
  • Geldige bronkaarten . Controleert of een pagina geldige bronkaarten heeft voor grote, first-party JavaScript.
  • [Experimenteel] Grote JavaScript-bibliotheek . Grote JavaScript-bibliotheken kunnen tot slechte prestaties leiden. Deze audit suggereert goedkopere alternatieven voor gewone, grote JavaScript-bibliotheken zoals moment.js .

Chroomuitgave: 772558

performance.mark() gebeurtenissen in de sectie Timings

De sectie Timings van een performance-opname markeert nu performance.mark() -gebeurtenissen.

Performance.mark-evenementen

Nieuwe resource-type en url filters in het netwerkpaneel

Gebruik de nieuwe trefwoorden resource-type en url in het paneel Netwerk om netwerkverzoeken te filteren.

Gebruik bijvoorbeeld resource-type:image om u te concentreren op de netwerkverzoeken die afbeeldingen zijn.

filter op resourcetype

Bekijk filterverzoeken op eigenschappen om meer speciale trefwoorden te ontdekken, zoals resource-type en url .

Chroomafgiften: 1121141 , 1104188

Framedetails bekijken updates

Geef COEP- en COOP- reporting to het eindpunt

U kunt nu de Cross-Origin Embedder Policy (COEP) en Cross-Origin Opener Policy (COOP) reporting to het eindpunt bekijken onder de sectie Beveiliging en isolatie .

De Reporting API definieert een nieuwe HTTP-header, Report-To , waarmee webontwikkelaars servereindpunten kunnen specificeren waar de browser waarschuwingen en fouten naartoe kan sturen.

rapporteren aan het eindpunt

Lees dit artikel voor meer informatie over hoe u COEP en COOP kunt inschakelen en uw website "cross-origin geïsoleerd" kunt maken.

Chroomuitgave: 1051466

Geef de COEP- en COOP report-only weer

DevTools geeft nu report-only rapportlabel weer voor COEP en COOP die zijn ingesteld op report-only .

alleen-rapportlabel

Bekijk deze video om te leren hoe u informatielekken kunt voorkomen en COOP en COEP op uw website kunt inschakelen.

Chroomuitgave: 1051466

Beëindiging van Settings in het menu Meer tools

De Settings in het menu Meer tools zijn verouderd. Open in plaats daarvan de Instellingen vanuit het hoofdpaneel.

Instellingen in het hoofdpaneel

Chroomuitgave: 1121312

Experimentele kenmerken

Bekijk en los kleurcontrastproblemen op in het deelvenster CSS-overzicht

Het CSS-overzichtspaneel toont nu een lijst met teksten met laag kleurcontrast van uw pagina.

In dit voorbeeld heeft de demopagina een probleem met een laag kleurcontrast. Klik op het probleem. U kunt een lijst bekijken met elementen die het probleem hebben.

Problemen met laag kleurcontrast

Klik op een element in de lijst om het element in het paneel Elementen te openen. DevTools biedt automatische kleursuggesties om u te helpen de tekst met laag contrast te corrigeren.

Chroomuitgave: 1120316

Pas sneltoetsen aan in DevTools

U kunt nu de sneltoetsen voor uw favoriete opdrachten in DevTools aanpassen.

Ga naar Instellingen > Snelkoppelingen , plaats de muisaanwijzer op een opdracht en klik op de knop Bewerken (penpictogram) om de sneltoets aan te passen.

Pas sneltoetsen aan

Om alle snelkoppelingen te resetten, klikt u op Standaardsnelkoppelingen herstellen .

Chroomuitgave: 174309

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