Wat is er nieuw in DevTools (Chrome 89)

Jecelyn Yeen

Ondersteuning voor het debuggen van schendingen van vertrouwde typen.

Breekpunt bij schendingen van vertrouwde typen

Je kunt nu breakpoints instellen en uitzonderingen opvangen voor Trusted Type Violations in het Sources- paneel.

De Trusted Types API helpt u DOM-gebaseerde cross-site scripting-kwetsbaarheden te voorkomen. Leer hier hoe u met Trusted Types applicaties kunt schrijven, beoordelen en onderhouden die vrij zijn van DOM XSS-kwetsbaarheden.

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 uitzonderingen. Probeer het zelf met deze demopagina .

Chromium-probleem: 1142804

Koppel het probleem in het paneel Bronnen aan het tabblad Problemen.

In het paneel 'Bronnen ' wordt nu een waarschuwingspictogram weergegeven naast de regel die niet voldoet aan het criterium 'Vertrouwd type'. Beweeg de muis eroverheen 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 instructies voor het oplossen ervan.

Chromium-probleem: 1150883

Maak een schermafbeelding van een knooppunt buiten het zichtbare gebied.

Je kunt nu schermafbeeldingen maken van een volledige pagina, inclusief de inhoud die niet zichtbaar is in het scherm. Voorheen werd de schermafbeelding afgesneden voor inhoud die niet zichtbaar was in het weergavegebied. Ook de schermafbeeldingen van een volledige pagina zijn nu nauwkeurig.

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

Chromium-probleem: 1003629

Nieuw tabblad 'Vertrouwenstokens' voor netwerkverzoeken

Bekijk de netwerkverzoeken voor vertrouwenstokens met het nieuwe tabblad Vertrouwenstokens .

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

In de volgende releases komt er meer ondersteuning voor het debuggen.

Chromium-probleem: 1126824

Vuurtoren 7 in het Vuurtorenpaneel

Het Lighthouse- paneel draait nu op Lighthouse 7. Bekijk de release-opmerkingen voor een volledig overzicht van de wijzigingen.

Nieuwe controles in Lighthouse 7:

• Laad de Largest Contentful Paint (LCP)-afbeelding vooraf . Controleert of de afbeelding die door het LCP-element wordt gebruikt, vooraf is geladen om de LCP-tijd te verbeteren.
• Problemen die zijn vastgelegd in het paneel Issues . Geeft een lijst weer van onopgeloste problemen in het paneel Issues .
• Progressive Web Apps (PWA) . De PWA-categorie is behoorlijk veranderd.

• De groep 'Installeerbaar' wordt nu volledig aangestuurd door de mogelijkheidscontroles die de installatiecriteria van Chrome mogelijk maken. Dit zijn dezelfde signalen die in het Manifest-venster worden weergegeven.

  • De audit "Registreert een service worker..." wordt verplaatst naar de PWA Optimized- groep, 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 'Installeerbaarheidseisen' ook de offline-functionaliteit controleert, 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 afdwingen van de CSS :target status

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

Selecteer in het paneel Elementen een element en schakel de elementstatus in of uit. Schakel het selectievakje :target om de stijlen af ​​te dwingen 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 uit te proberen. Met deze nieuwe functie van DevTools kun je dergelijke stijlen testen zonder steeds handmatig de URL te hoeven wijzigen.

Chromium-probleem: 1156628

Nieuwe sneltoets om een ​​element te dupliceren

Gebruik de nieuwe sneltoets '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 het geselecteerde element aangemaakt.

Als alternatief kunt u elementen dupliceren met behulp van sneltoetsen:

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

Chromium-problemen: 1150797 , 1150797

Kleurenpickers voor aangepaste CSS-eigenschappen

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

Daarnaast kunt u de Shift toets ingedrukt houden en op de kleurenkiezer klikken om te schakelen tussen de RGBA-, HSLA- en Hex-weergaven van de kleurwaarde.

Chromium-probleem: 1147016

Nieuwe sneltoetsen om CSS-eigenschappen te kopiëren

Met een paar nieuwe sneltoetsen kun je CSS-eigenschappen nu sneller kopiëren.

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

Kopieeropties voor CSS-klasse:

• Kopieer selector . 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 van een voorvoegsel voorziene eigenschappen.

Kopieeropties voor CSS-eigenschappen:

• Kopieer de 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

Je kunt er nu voor kiezen om de URL-gedecodeerde cookie-waarde te bekijken in het paneel Cookies .

Ga naar het paneel Toepassingen en selecteer het paneel 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 cookiepaneel is nu vervangen door de knop 'Gefilterde cookies wissen '.

In het paneel Toepassing > paneel Cookies kunt u tekst invoeren in het tekstvak 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. Als u de filtertekst wist, ziet u dat de overige cookies in de lijst blijven staan. Eerder had u alleen de optie om alle cookies te wissen.

Chromium-probleem: 978059

Nieuwe optie om cookies van derden te verwijderen in het deelvenster Opslag.

Bij het wissen van de sitegegevens in het deelvenster Opslag verwijdert DevTools nu standaard alleen first-party cookies. Schakel de optie ' Inclusief third-party cookies' in om ook third-party cookies te verwijderen.

Chromium-probleem: 1012337

Bewerk de clienthints voor de gebruikersagent voor aangepaste apparaten.

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

Ga naar Instellingen > Apparaten en klik op ' Aangepast apparaat toevoegen...' . Vouw het gedeelte 'Clienthints voor gebruikersagent' uit om de clienthints te bewerken.

Clienthints op basis van de User-Agent-string zijn een alternatief voor de User-Agent-string waarmee ontwikkelaars op een privacyvriendelijke en gebruiksvriendelijke manier toegang krijgen tot informatie over de browser van een gebruiker. Lees meer over clienthints op basis van de User-Agent-string op web.dev/user-agent-client-hints/ .

Chromium-probleem: 1073909

Updates van het netwerkpaneel

De instelling "netwerklogboek vastleggen" behouden

DevTools bewaart nu de instelling "Netwerklogboek vastleggen". Voorheen werd de keuze van de gebruiker gereset telkens wanneer een pagina opnieuw werd geladen.

Chromium-probleem: 1122580

Bekijk WebTransport-verbindingen in het netwerkpaneel.

In het netwerkpaneel worden nu WebTransport-verbindingen weergegeven.

WebTransport is een nieuwe API die bidirectionele client-servercommunicatie met lage latentie biedt. Lees meer over de toepassingsmogelijkheden en hoe u feedback kunt geven over de toekomstige implementatie op web.dev/webtransport/ .

Chromium-probleem: 1152290

"Online" is hernoemd naar "Geen snelheidsbeperking".

De netwerkemulatieoptie "Online" is nu hernoemd naar "Geen beperking".

Chromium-probleem: 1028078

Nieuwe kopieeropties in de console, het paneel Bronnen en het paneel Stijlen.

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

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

Chromium-problemen: 1149859 , 1148353

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

Je kunt de bestandsnaam nu kopiëren door met de rechtermuisknop op het bestand te klikken:

• een bestand in het paneel Bronnen , 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

Details van het frame bekijken updates

Nieuwe informatie over servicemedewerkers in de Frame-detailsweergave.

DevTools toont nu de specifieke service workers onder het frame waarin ze zijn aangemaakt.

Vouw in het paneel Toepassing een frame met serviceworkers uit en selecteer vervolgens een serviceworker in de boomstructuur van serviceworkers om de details te bekijken.

Chromium-probleem: 1122507

Meet de geheugeninformatie in de detailweergave van het frame.

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

De nieuwe performance.measureMemory() API schat het geheugengebruik van de gehele webpagina. Lees 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 je een probleemmelding wilt verbeteren, ga dan naar het tabblad Problemen in de console of via Meer instellingen > Meer tools > Problemen om het tabblad Problemen te openen. Vouw een probleemmelding uit en klik op ' Is de probleemmelding nuttig voor u?' . Je kunt dan feedback geven in het pop-upvenster.

Verloren frames in het prestatiepaneel

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

Chromium-probleem: 1075865

Simuleer opvouwbare apparaten en apparaten met twee schermen in de apparaatmodus.

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

Nadat je de apparaatwerkbalk hebt ingeschakeld , selecteer je een van deze apparaten: Surface Duo of Samsung Galaxy Fold .

Klik op het nieuwe pictogram om te schakelen tussen de weergave met één scherm (ingeklapt) en de weergave met twee schermen (uitgeklapt).

Je kunt ook de experimentele webplatformfuncties inschakelen om toegang te krijgen tot de nieuwe CSS-functie screen-spanning media en de JavaScript getWindowSegments API. Het experimentele pictogram geeft de status van de vlag voor experimentele webplatformfuncties 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 het automatiseren van browsertests eenvoudiger wordt. 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 'Opname' in het linkerpaneel. Voeg een nieuwe opname toe en geef het bestand een naam (bijvoorbeeld test01.js).

Klik op de knop 'Opnemen ' onderaan om de interactie op te nemen. Probeer het formulier op het scherm in te vullen. Let op hoe de Puppeteer-commando's dienovereenkomstig aan het bestand worden toegevoegd. Klik nogmaals op de knop 'Opnemen ' om de opname te stoppen.

Om het script uit te voeren, volg je de handleiding 'Aan de slag' op de officiële Puppeteer-website.

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 der tijd te verbeteren en uit te breiden.

Chromium-probleem: 1144127

Lettertype-editor in het deelvenster Stijlen

De nieuwe lettertype-editor is een pop-upeditor 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 typografie dynamisch kan worden aangepast met een reeks intuïtieve invoertypen.

Chromium-probleem: 1093229

CSS flexbox debugtools

Sinds de laatste release biedt DevTools experimentele ondersteuning voor flexbox-debugging .

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

Chromium-probleem: 1139949

Nieuw tabblad CSP-schendingen

Bekijk in één oogopslag alle schendingen van het Content Security Policy (CSP) op het nieuwe tabblad 'CSP-schendingen' . Dit nieuwe tabblad is een experiment dat het werken met webpagina's met veel CSP- en Trusted Type-schendingen moet vereenvoudigen.

Chromium-probleem: 1137837

Nieuwe berekening van kleurcontrast - Geavanceerd perceptueel contrastalgoritme (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. In vergelijking 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), de kleur (waargenomen helderheidsverschil tussen tekst en achtergrond) en de context (omgevingslicht, omgeving, beoogd doel van de tekst).

Het voorbeeld laat zien dat de APCA-drempelwaarde 38% is. De contrastverhouding moet aan deze waarde voldoen of deze overtreffen. Deze waarde wordt berekend op basis van het lettertypegewicht en de -grootte, aan de hand van deze APCA-opzoektabel .

Chromium-probleem: 1121900

Download de previewkanalen

Overweeg om Chrome Canary , Dev of Beta als standaard ontwikkelbrowser te gebruiken. Deze preview-versies geven je toegang tot de nieuwste DevTools-functies, stellen je in staat om geavanceerde API's van webplatformen te testen en helpen je problemen op je site te vinden voordat je gebruikers ze tegenkomen!

Neem contact op met het Chrome DevTools-team.

Gebruik de volgende opties om de nieuwe functies, updates of andere zaken met betrekking tot DevTools te bespreken.

• Stuur feedback en suggesties voor nieuwe functies naar crbug.com .
• Meld een probleem met DevTools via de optie ' Meer opties ' > 'Help' > 'Een probleem met DevTools melden' in DevTools.
• Tweet naar @ChromeDevTools .
• Laat reacties achter op de YouTube-video's 'Wat is er nieuw in DevTools' of 'DevTools-tips' .

Wat is er nieuw in DevTools?

Een lijst van alles wat is behandeld in de serie 'Wat is nieuw in DevTools' .