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 weer voor COEP en COOP die zijn ingesteld op report-only .

label voor alleen rapport

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 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 .