Wat is er nieuw in DevTools (Chrome 89)

Ondersteuning voor foutopsporing voor schendingen van vertrouwde typen

Breekpunt voor schendingen van het vertrouwde type

U kunt nu breekpunten instellen en uitzonderingen opvangen voor schendingen van vertrouwde typen in het paneel Bronnen .

Trusted Types API helpt u DOM-gebaseerde cross-site scripting-kwetsbaarheden te voorkomen. Leer hier hoe u applicaties schrijft, beoordeelt en onderhoudt die vrij zijn van DOM XSS-kwetsbaarheden met Trusted Types.

Open in het deelvenster Bronnen het zijbalkvenster voor foutopsporing . Vouw de sectie CSP-overtredingsbreekpunten uit en schakel het selectievakje Vertrouwde type-overtredingen in om de uitzonderingen te onderbreken. Probeer het zelf met deze demopagina .

Breekpunt voor schendingen van het vertrouwde type

Chroomuitgave: 1142804

In het Bronnenpaneel wordt nu een waarschuwingspictogram weergegeven naast de regel die het Vertrouwde type schendt. Beweeg erop om een ​​voorbeeld van de uitzondering te bekijken. Klik erop om het tabblad Problemen uit te vouwen. Het biedt meer details over de uitzonderingen en richtlijnen voor het oplossen ervan.

Koppel het probleem in het paneel Bronnen aan het tabblad Problemen

Chroomuitgave: 1150883

Leg een knooppuntscreenshot buiten de viewport vast

U kunt nu knooppuntscreenshots maken voor een volledig knooppunt, inclusief inhoud onder de vouw. Voorheen werd de schermafbeelding afgesneden voor inhoud die niet zichtbaar was in de viewport. De schermafbeeldingen op de volledige pagina zijn nu ook nauwkeurig.

Klik in het paneel Elementen met de rechtermuisknop op een element en selecteer Capture node screenshot .

Leg een knooppuntscreenshot buiten de viewport vast

Chroomuitgave: 1003629

Nieuw tabblad Trust Tokens voor netwerkverzoeken

Inspecteer de Trust Token-netwerkverzoeken met het nieuwe tabblad Trust Tokens .

Trust Token is een nieuwe API om fraude te bestrijden en bots van echte mensen te onderscheiden, zonder passieve tracking. Leer hoe u aan de slag kunt gaan met Trust Tokens .

Verdere ondersteuning voor foutopsporing zal beschikbaar zijn in de volgende releases.

Nieuw tabblad Trust Token voor netwerkverzoeken

Chroomuitgave: 1126824

Vuurtoren 7 in het Vuurtorenpaneel

In het Lighthouse -paneel wordt nu Lighthouse 7 uitgevoerd. Bekijk de releaseopmerkingen voor een volledige lijst met wijzigingen.

Vuurtoren 7 in het Vuurtorenpaneel

Nieuwe audits in Lighthouse 7:

  • Grootste Contentful Paint-afbeelding (LCP) vooraf laden . Controleert of de afbeelding die door het LCP-element wordt gebruikt, vooraf is geladen om uw LCP-tijd te verbeteren.
  • Problemen geregistreerd in het paneel Issues . Geeft een lijst met onopgeloste problemen aan in het paneel Issues .
  • Progressieve webapps (PWA) . De PWA-categorie veranderde behoorlijk aanzienlijk.
  • De groep Installeerbaar wordt nu volledig aangedreven door de capaciteitscontroles die de installeerbare criteria van Chrome mogelijk maken. Dit zijn dezelfde signalen als in het paneel Manifest .

    • De audit 'Registreert een servicemedewerker...' wordt verplaatst naar de PWA-geoptimaliseerde groep en de audit 'Gebruikt HTTPS' is nu opgenomen als onderdeel van de belangrijkste audit van 'installeerbaarheidsvereisten'.
    • De groep Snel en betrouwbaar wordt verwijderd. Omdat de vernieuwde audit van de "installeerbaarheidsvereisten" ook een controle op offline mogelijkheden omvat, werd de audit "huidige pagina en start_url met 200 wanneer offline" verwijderd. De audit 'Pagina laden is snel genoeg op mobiel netwerk' is ook verwijderd.

Chroomuitgave: 772558

Updates van het Elementenpaneel

Ondersteuning voor het forceren van de CSS :target status

U kunt nu DevTools gebruiken om de CSS :target -status te forceren en te inspecteren.

Selecteer in het paneel Elementen een element en schakel de elementstatus in. Schakel het selectievakje :target in om de stijlen te forceren en te inspecteren.

Gebruik de :target pseudo-klasse om het element te stylen wanneer de hash in de URL en de id van een element hetzelfde zijn. Bekijk deze demo om het zelf te proberen. Met deze nieuwe DevTools-functie kunt u dergelijke stijlen testen zonder dat u de URL voortdurend handmatig hoeft te wijzigen.

waardoor de CSS `:target` status wordt geforceerd

Chroomuitgave: 1156628

Nieuwe snelkoppeling om element te dupliceren

Gebruik de nieuwe snelkoppeling Element dupliceren om een ​​element direct te klonen.

Klik met de rechtermuisknop op een element in het paneel Elementen en selecteer Element dupliceren . Er wordt een nieuw element onder gemaakt.

Als alternatief kunt u het element dupliceren met sneltoetsen:

  • Mac: Shift + Option + ⬇️
  • Venster/Linux: Shift + Alt + ⬇️

Dubbel element

Chroomafgiften: 1150797 , 1150797

Kleurkiezers voor aangepaste CSS-eigenschappen

Het deelvenster Stijlen toont nu kleurkiezers voor aangepaste CSS-eigenschappen.

Bovendien kunt u de Shift toets ingedrukt houden en op de kleurkiezer klikken om door de RGBA-, HSLA- en Hex-weergaven van de kleurwaarde te bladeren.

Kleurkiezers voor aangepaste CSS-eigenschappen

Chroomuitgave: 1147016

Nieuwe snelkoppelingen om CSS-eigenschappen te kopiëren

U kunt nu CSS-eigenschappen sneller kopiëren met een paar nieuwe snelkoppelingen.

Selecteer een element in het paneel Elementen . Klik vervolgens met de rechtermuisknop op een CSS-klasse of een CSS-eigenschap in het deelvenster Stijlen om de waarde te kopiëren.

Nieuwe snelkoppelingen om CSS-eigenschappen te kopiëren

Kopieeropties voor CSS-klasse:

  • Kopieerselector . Kopieer de huidige selectornaam.
  • Kopieer regel . Kopieer de regel van de huidige selector.
  • Kopieer alle declaraties : Kopieer alle declaraties onder de huidige regel, inclusief ongeldige en vooraf ingestelde eigenschappen.

Kopieeropties voor CSS-eigenschap:

  • Kopieer aangifte . Kopieer de declaratie van de huidige regel.
  • Eigenschap kopiëren . Kopieer de eigenschap van de huidige regel.
  • Waarde kopiëren : Kopieer de waarde van de huidige regel.

Chroomuitgave: 1152391

Cookie-updates

Nieuwe optie om URL-gedecodeerde cookies weer te geven

U kunt er nu voor kiezen om de URL-gedecodeerde cookieswaarde in het deelvenster Cookies te bekijken.

Ga naar het Applicatiepaneel en selecteer het Cookies- paneel. Selecteer een cookie in de lijst. Schakel het nieuwe selectievakje URL-gedecodeerd weergeven in om de gedecodeerde cookie te bekijken.

Optie om URL-gedecodeerde cookies weer te geven

Chroomuitgave: 997625

Wis alleen zichtbare cookies

De knop Alle cookies wissen in het deelvenster Cookies is nu vervangen door de knop Gefilterde cookies wissen .

Voer in het paneel Toepassingen > Cookies- paneel tekst in het tekstvak in om de cookies te filteren. In ons voorbeeld hier filteren we de lijst op "PREF". Klik op de knop Gefilterde cookies wissen om de zichtbare cookies te verwijderen. Wis de filtertekst en je zult zien dat de andere cookies in de lijst blijven staan. Voorheen had u alleen de mogelijkheid om alle cookies te wissen.

Wis alleen zichtbare cookies

Chroomuitgave: 978059

Nieuwe optie om cookies van derden te wissen in het opslagvenster

Bij het wissen van de sitegegevens in het opslagvenster wist DevTools nu standaard alleen cookies van de eerste partij. Schakel het opnemen van cookies van derden in om ook de cookies van derden te wissen.

Optie om cookies van derden te wissen

Chroomuitgave: 1012337

Bewerk User-Agent Client-tips voor aangepaste apparaten

U kunt nu User-Agent Client Hints voor aangepaste apparaten bewerken.

Ga naar Instellingen > Apparaten en klik op Aangepast apparaat toevoegen... . Vouw de sectie Gebruikersagentclienthints uit om de clienthints te bewerken.

Client-hints voor user-agent bewerken

User-Agent Client Hints zijn een alternatief voor de User-Agent-reeks waarmee ontwikkelaars op een privacybehoudende en ergonomische manier toegang kunnen krijgen tot informatie over de browser van een gebruiker. Meer informatie over User-Agent Client Hints vindt u in web.dev/user-agent-client-hints/ .

Chroomuitgave: 1073909

Updates van het netwerkpaneel

Houd de instelling "Netwerklogboek opnemen" aan

DevTools behoudt nu de instelling "Netwerklogboek opnemen". Voorheen reset DevTools de keuze van de gebruiker telkens wanneer een pagina opnieuw wordt geladen.

Netwerklogboek opnemen

Chroomuitgave: 1122580

Bekijk WebTransport-verbindingen in het netwerkpaneel

Netwerkpaneel toont nu WebTransport-verbindingen.

WebTransport-verbindingen

WebTransport is een nieuwe API die bidirectionele client-server-berichten met lage latentie biedt. Lees meer over de gebruiksscenario's en hoe u feedback kunt geven over de toekomst van de implementatie in web.dev/webtransport/ .

Chroomuitgave: 1152290

De naam 'Online' is gewijzigd in 'Geen beperking'

De netwerkemulatieoptie "Online" is nu hernoemd naar "No Throttling".

Netwerklogboek opnemen

Chroomuitgave: 1028078

Nieuwe kopieeropties in de Console, het Bronnenpaneel en het Stijlenpaneel

Nieuwe snelkoppelingen om objecten te kopiëren in het paneel Console en Bronnen

U kunt nu objectwaarden kopiëren met de nieuwe snelkoppelingen in het paneel Console en Bronnen. Dit is vooral handig als u een groot object (bijvoorbeeld een lange array) wilt kopiëren.

Kopieer object in de console

Kopieer het object in het deelvenster Bronnen

Chroomuitgaves: 1149859 , 1148353

Nieuwe snelkoppelingen om de bestandsnaam te kopiëren in het deelvenster Bronnen en Stijlen

U kunt nu de bestandsnaam kopiëren door met de rechtermuisknop te klikken op:

  • een bestand in het paneel Bronnen , of
  • de bestandsnaam in het deelvenster Stijlen van het deelvenster Elementen

Selecteer Bestandsnaam kopiëren in het contextmenu om de bestandsnaam te kopiëren.

Kopieer de bestandsnaam in het paneel Bronnen

Kopieer de bestandsnaam in het deelvenster Stijlen

Chroomuitgave: 1155120

Framedetails bekijken updates

Nieuwe informatie over servicemedewerkers in de weergave Framedetails

DevTools toont nu toegewijde servicemedewerkers onder het kader waarin ze zijn gemaakt.

Vouw in het paneel Toepassingen een frame met servicemedewerkers uit en selecteer vervolgens een servicemedewerker onder de servicemedewerkersstructuur om de details te bekijken.

Informatie over servicemedewerkers in de weergave Framedetails

Chroomuitgave: 1122507

Meet geheugeninformatie in de weergave Framedetails

De performance.measureMemory() API-status wordt nu weergegeven onder de sectie API-beschikbaarheid .

De nieuwe performance.measureMemory() API schat het geheugengebruik van de gehele webpagina. In dit artikel leest u hoe u het totale geheugengebruik van uw webpagina kunt controleren met deze nieuwe API.

Meet het geheugen

Chroomuitgave: 1139899

Geef feedback via het tabblad Problemen

Als u ooit een probleembericht wilt verbeteren, gaat u naar het tabblad Problemen vanuit de Console of naar Meer instellingen > Meer tools > Problemen > om het tabblad Problemen te openen. Vouw een probleembericht uit en klik op Is het probleembericht nuttig voor u? , dan kunt u feedback geven in de pop-up.

Geef een feedbacklink uit

Frames verwijderd in het deelvenster Prestaties

Bij het analyseren van de belastingsprestaties in het paneel Prestaties markeert de sectie Frames nu gevallen frames als rood. Beweeg erop om de framesnelheid te achterhalen.

Gevallen kaders

Chroomuitgave: 1075865

Emuleer opvouwbaar scherm en dubbel scherm in apparaatmodus

U kunt nu apparaten met twee schermen en opvouwbare apparaten emuleren in DevTools.

Nadat u de Apparaatwerkbalk hebt ingeschakeld , selecteert u een van deze apparaten: Surface Duo of Samsung Galaxy Fold .

Klik op het nieuwe span-pictogram om te schakelen tussen houdingen op één scherm of gevouwen en op twee schermen of uitgevouwen.

U kunt ook de Experimental Web Platform-functies inschakelen om toegang te krijgen tot de nieuwe CSS screen-spanning functie en JavaScript getWindowSegments API. Het experimentele pictogram geeft de status van de vlag met experimentele webplatformfuncties weer. Het pictogram wordt gemarkeerd wanneer de vlag is ingeschakeld. Navigeer naar chrome://flags en schakel de vlag in.

Dubbel scherm emuleren

Chroomuitgave: 1054281

Experimentele kenmerken

Automatiseer browsertests met Puppeteer Recorder

DevTools kan nu Puppeteer- scripts genereren op basis van uw interactie met de browser, waardoor u gemakkelijker browsertests kunt automatiseren. Puppeteer is een Node.js-bibliotheek die een API op hoog niveau biedt om Chrome of Chromium te besturen via het DevTools Protocol .

Ga naar deze demopagina . Open het paneel Bronnen in DevTools. Selecteer het tabblad Opnemen in het linkerdeelvenster. Voeg een nieuwe opname toe en geef het bestand een naam (bijvoorbeeld test01.js).

Klik onderaan op de knop Opnemen om de interactie op te nemen. Probeer het formulier op het scherm in te vullen. Merk op dat poppenspelercommando's dienovereenkomstig aan het bestand worden toegevoegd. Klik nogmaals op de knop Opnemen om de opname te stoppen.

Om het script uit te voeren, volgt u de handleiding Aan de slag op de officiële site van Puppeteer.

Houd er rekening mee dat dit een experiment in een vroeg stadium is. We zijn van plan de Recorder-functionaliteit in de loop van de tijd te verbeteren en uit te breiden.

Poppenspeler-recorder

Chroomuitgave: 1144127

Lettertype-editor in het deelvenster Stijlen

De nieuwe Lettertype-editor is een popover-editor in het deelvenster Stijlen voor lettertype-gerelateerde eigenschappen, waarmee u de perfecte typografie voor uw webpagina kunt vinden.

De popover biedt een overzichtelijke gebruikersinterface om typografie dynamisch te manipuleren met een reeks intuïtieve invoertypen.

Lettertype-editor in het deelvenster Stijlen

Chroomuitgave: 1093229

CSS-flexbox-foutopsporingstools

DevTools heeft sinds de laatste release experimentele ondersteuning voor het debuggen van flexbox toegevoegd.

DevTools tekent nu een richtlijn om u te helpen de CSS-eigenschap align-items beter te visualiseren. De CSS gap eigenschap wordt ook ondersteund. In ons voorbeeld hier hebben we CSS- gap: 12px; . Let op het arceringspatroon voor elke opening.

Flexbox

Chroomuitgave: 1139949

Nieuw tabblad CSP-overtredingen

Bekijk alle schendingen van het Content Security Policy (CSP) in één oogopslag op het nieuwe tabblad CSP-overtredingen . Dit nieuwe tabblad is een experiment dat het gemakkelijker moet maken om te werken met webpagina's met een groot aantal CSP- en Trusted Type-schendingen.

Tabblad CSP-overtredingen

Chroomuitgave: 1137837

Nieuwe kleurcontrastberekening - Advanced Perceptual Contrast Algorithm (APCA)

Het Advanced Perceptual Contrast Algorithm (APCA) vervangt de contrastverhouding van de AA / AAA -richtlijnen in de Kleurkiezer .

APCA is een nieuwe manier om contrast te berekenen, gebaseerd op modern onderzoek naar kleurperceptie. Vergeleken met AA/AAA-richtlijnen is APCA meer contextafhankelijk. Het contrast wordt berekend op basis van de ruimtelijke eigenschappen van de tekst (lettergrootte en -grootte), kleur (waargenomen lichtheidsverschil tussen tekst en achtergrond) en context (omgevingslicht, omgeving, beoogde doel van de tekst).

APCA in Kleurkiezer

Het voorbeeld laat zien dat de APCA-drempel 38% is. De contrastverhouding moet voldoen aan de vermelde waarde of deze overschrijden. Deze waarde wordt berekend op basis van de lettergrootte en -grootte, waarbij wordt verwezen naar deze APCA-opzoektabel .

Chroomuitgave: 1121900

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 .