Wat is er nieuw in DevTools (Chrome 89)

Jecelyn Yeen

Ondersteuning voor foutopsporing bij schendingen van vertrouwde typen

Breekpunt bij schendingen van vertrouwde typen

U kunt nu breekpunten instellen en uitzonderingen op vertrouwde typeovertredingen detecteren in het deelvenster Bronnen.

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

Open in het paneel Bronnen het zijpaneel van de debugger . Vouw de sectie CSP-schendingsbreekpunten uit en schakel het selectievakje Vertrouwde typeschendingen in om te pauzeren bij de uitzonderingen. Probeer het zelf met deze demopagina .

Chromium-probleem: 1142804

Koppel het probleem in het paneel Bronnen aan het tabblad Problemen

Het paneel Bronnen toont nu een waarschuwingspictogram naast de regel die het vertrouwde type schendt. Beweeg de muis erover om een ​​voorbeeld van de uitzondering te bekijken. Klik erop om het tabblad Problemen uit te vouwen. Daar vindt u meer informatie over de uitzonderingen en richtlijnen voor het oplossen ervan.

Chromium-probleem: 1150883

Maak een screenshot van een knooppunt buiten het kijkvenster

U kunt nu screenshots maken van een volledige node, inclusief de content onder de vouw. Voorheen werd de screenshot afgesneden voor content die niet zichtbaar was in de viewport. De screenshots van de volledige pagina zijn nu ook nauwkeurig.

Klik in het deelvenster Elementen met de rechtermuisknop op een element en selecteer Schermafbeelding van knooppunt vastleggen .

Chromium-probleem: 1003629

Nieuw tabblad Trust Tokens voor netwerkverzoeken

Controleer de Trust Token-netwerkaanvragen met het nieuwe tabblad Trust Tokens .

Trust Token is een nieuwe API die fraude helpt bestrijden en bots van echte mensen onderscheidt, zonder passieve tracking. Leer hoe u aan de slag kunt met Trust Tokens .

Uitgebreidere ondersteuning voor foutopsporing wordt in de volgende releases toegevoegd.

Chromium-probleem: 1126824

Vuurtoren 7 in het Vuurtorenpaneel

Het Lighthouse- paneel draait nu op Lighthouse 7. Bekijk de release notes voor een volledige lijst met wijzigingen.

Nieuwe audits in Lighthouse 7:

• Preload Largest Contentful Paint (LCP)-afbeelding . Controleert of de afbeelding die door het LCP-element wordt gebruikt, vooraf is geladen om uw LCP-tijd te verbeteren.
• Problemen die in het paneel Issues zijn geregistreerd . Geeft een lijst met onopgeloste problemen in het paneel Issues aan.
• Progressieve web-apps (PWA's) . De PWA-categorie is aanzienlijk veranderd.

• De groep Installeerbaar wordt nu volledig aangestuurd door de capaciteitscontroles die de installeerbare criteria van Chrome activeren. Dit zijn dezelfde signalen die in het deelvenster Manifest te zien zijn.

  • De audit 'Registreert een service worker…' wordt verplaatst naar de groep PWA geoptimaliseerd en de audit 'Gebruikt HTTPS' is nu opgenomen als onderdeel van de belangrijkste audit 'installeerbaarheidsvereisten'.
  • De groep Snel en betrouwbaar is verwijderd. Omdat de vernieuwde audit 'installeerbaarheidsvereisten' ook offline-capaciteitscontroles omvat, is de audit 'huidige pagina en start_url reageren met 200 wanneer offline' verwijderd. De audit 'Pagina laadt snel genoeg op mobiel netwerk' is eveneens verwijderd.

Chromium-probleem: 772558

Updates van het elementenpaneel

Ondersteuning voor het forceren van de CSS :target status

U kunt nu DevTools gebruiken om de CSS :target status af te dwingen en te inspecteren.

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

Gebruik de pseudo-klasse :target om een ​​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 de URL steeds handmatig te hoeven wijzigen.

Chromium-probleem: 1156628

Nieuwe snelkoppeling om elementen te dupliceren

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

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

U kunt het element ook dupliceren met sneltoetsen:

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

Chromium-problemen: 1150797 , 1150797

Kleurkiezers voor aangepaste CSS-eigenschappen

In het deelvenster Stijlen worden nu kleurkiezers voor aangepaste CSS-eigenschappen weergegeven.

U kunt ook de Shift toets ingedrukt houden en op de kleurenkiezer klikken om door de RGBA-, HSLA- en Hex-weergaven van de kleurwaarde te bladeren.

Chromium-probleem: 1147016

Nieuwe snelkoppelingen om CSS-eigenschappen te kopiëren

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

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

Kopieeropties voor CSS-klasse:

• Selector kopiëren . 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 voorafgeplaatste eigenschappen.

Kopieeropties voor CSS-eigenschap:

• Kopieer declaratie . 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.

Chromium-probleem: 1152391

Cookie-updates

Nieuwe optie om URL-gedecodeerde cookies weer te geven

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

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

Chromium-probleem: 997625

Alleen zichtbare cookies wissen

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

Voer in het paneel 'Toepassing ' > 'Cookies' tekst in het tekstvak in om de cookies te filteren. In ons voorbeeld filteren we de lijst op 'PREF'. Klik op de knop 'Gefilterde cookies wissen' om de zichtbare cookies te verwijderen. Wis de filtertekst en u ziet dat de overige cookies in de lijst blijven staan. Voorheen had u alleen de mogelijkheid om alle cookies te wissen.

Chromium-probleem: 978059

Nieuwe optie om cookies van derden te wissen in het opslagpaneel

Bij het wissen van de sitegegevens in het deelvenster Opslag wist DevTools nu standaard alleen cookies van derden. Schakel ' Inclusief cookies van derden' in om ook de cookies van derden te wissen.

Chromium-probleem: 1012337

Bewerk User-Agent Client Hints 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 het gedeelte Hints voor gebruikersagentclient uit om de hints voor de client te bewerken.

User-Agent Client Hints zijn een alternatief voor User-Agent strings waarmee ontwikkelaars op een privacybeschermende en gebruiksvriendelijke manier toegang 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/ .

Chromium-probleem: 1073909

Updates van het netwerkpaneel

De instelling "netwerklogboek opnemen" behouden

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

Chromium-probleem: 1122580

Bekijk WebTransport-verbindingen in het paneel Netwerk

Het netwerkpaneel geeft nu WebTransport-verbindingen weer.

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

Chromium-probleem: 1152290

"Online" hernoemd naar "Geen beperking"

De netwerk-emulatieoptie 'Online' is nu hernoemd naar 'Geen beperking'.

Chromium-probleem: 1028078

Nieuwe kopieeropties in de console, het bronpaneel en het stijlpaneel

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

U kunt nu objectwaarden kopiëren met de nieuwe sneltoetsen in de console- en bronpanelen. Dit is vooral handig wanneer u een groot object (bijvoorbeeld een lange array) wilt kopiëren.

Chromium-problemen: 1149859 , 1148353

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

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

• een bestand in het Bronnenpaneel , of
• de bestandsnaam in het deelvenster Stijlen in het deelvenster Elementen

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

Chromium-probleem: 1155120

Updates voor het weergeven van framedetails

Informatie over nieuwe servicemedewerkers in het detailoverzicht van het frame

DevTools geeft nu speciale serviceworkers weer onder het frame waarmee ze worden aangemaakt.

Vouw in het paneel Toepassing een kader met serviceworkers uit en selecteer vervolgens een serviceworkers onder de boomstructuur Serviceworkers om de details te bekijken.

Chromium-probleem: 1122507

Meetgeheugeninformatie in het framedetailsoverzicht

De API-status performance.measureMemory() wordt nu weergegeven onder het gedeelte API-beschikbaarheid .

De nieuwe performance.measureMemory() API schat het geheugengebruik van de hele webpagina. Leer in dit artikel hoe u het totale geheugengebruik van uw webpagina kunt monitoren met deze nieuwe API.

Chromium-probleem: 1139899

Geef feedback via het tabblad Problemen

Als u een probleemmelding wilt verbeteren, gaat u naar het tabblad Problemen in de console of naar Meer instellingen > Meer hulpmiddelen > Problemen > om het tabblad Problemen te openen. Vouw een probleemmelding uit en klik op ' Is de probleemmelding nuttig voor u?' . Vervolgens kunt u feedback geven in de pop-up.

Gedropte frames in het Prestatiepaneel

Bij het analyseren van de laadprestaties in het paneel Prestaties worden verloren frames nu rood gemarkeerd in het gedeelte Frames . Beweeg de muis erover om de framesnelheid te bekijken.

Chromium-probleem: 1075865

Opvouwbaar en dubbel scherm emuleren in de 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 spanpictogram om te wisselen tussen de houdingen met één scherm of ingeklapt, en twee schermen of uitgeklapt.

U kunt ook de functies van het experimentele webplatform inschakelen om toegang te krijgen tot de nieuwe CSS- screen-spanning en de JavaScript getWindowSegments API. Het experimentele pictogram geeft de status van de vlag van het experimentele webplatform weer. Het pictogram is gemarkeerd wanneer de vlag is ingeschakeld. Ga naar chrome://flags en schakel de vlag in of uit.

Chromium-probleem: 1054281

Experimentele kenmerken

Automatiseer browsertesten met Puppeteer Recorder

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

Ga naar deze demopagina . Open het paneel Bronnen in DevTools. Selecteer het tabblad Opname in het linkerdeelvenster. Voeg een nieuwe opname toe en geef het bestand een naam (bijv. 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 de opdrachten van Puppeteer 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 website van Puppeteer.

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

Chromium-probleem: 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 waarmee u dynamisch typografie kunt bewerken met een reeks intuïtieve invoertypen.

Chromium-probleem: 1093229

CSS Flexbox-foutopsporingshulpmiddelen

DevTools heeft sinds de laatste release experimentele ondersteuning voor flexbox-foutopsporing toegevoegd.

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

Chromium-probleem: 1139949

Nieuw tabblad CSP-overtredingen

Bekijk alle schendingen van het Content Security Policy (CSP) in één oogopslag op het nieuwe tabblad CSP-schendingen . Dit nieuwe tabblad is een experiment dat het werken met webpagina's met een groot aantal schendingen van het CSP en vertrouwde typen moet vergemakkelijken.

Chromium-probleem: 1137837

Nieuwe berekening van kleurcontrast - Geavanceerd Perceptueel Contrast Algoritme (APCA)

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

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

In het voorbeeld is de APCA-drempelwaarde 38% . De contrastverhouding moet aan de vermelde waarde voldoen of deze overschrijden. Deze waarde wordt berekend op basis van lettergewicht en -grootte, met verwijzing naar deze APCA-opzoektabel .

Chromium-probleem: 1121900

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 wat in de serie Wat is er nieuw in DevTools is behandeld.