Wat is er nieuw in DevTools (Chrome 86)

Jecelyn Yeen

Nieuw mediapanel

DevTools geeft nu informatie over mediaspelers weer in het Media-paneel .

Vóór het nieuwe mediapaneel in DevTools was log- en foutopsporingsinformatie over videospelers te vinden in chrome://media-internals .

Het nieuwe Media-paneel biedt een eenvoudigere manier om gebeurtenissen, logs, eigenschappen en een tijdlijn van framedecoderingen te bekijken in hetzelfde browsertabblad als de videospeler zelf. U kunt live bekijken en sneller mogelijke problemen onderzoeken (bijvoorbeeld waarom frames wegvallen, waarom JavaScript op een onverwachte manier met de speler communiceert).

Chromium-probleem: 1018414

Maak screenshots van knooppunten via het contextmenu van het Elementenpaneel

U kunt nu screenshots van knooppunten maken via het contextmenu in het deelvenster Elementen.

U kunt bijvoorbeeld een schermafbeelding van de inhoudsopgave maken door met de rechtermuisknop op het element te klikken en Capture node screenshot te selecteren.

Chromium-probleem: 1100253

Updates op het tabblad Problemen

De waarschuwingsbalk Problemen op het consolepaneel is nu vervangen door een normaal bericht.

Problemen met cookies van derden worden nu standaard verborgen op het tabblad Problemen. Schakel het nieuwe selectievakje 'Problemen met cookies van derden opnemen' in om ze te bekijken.

Chromium-problemen: 1096481 , 1068116 , 1080589

Ontbrekende lokale lettertypen emuleren

Open het tabblad Rendering en gebruik de nieuwe functie Lokale lettertypen uitschakelen om ontbrekende local() bronnen in @font-face -regels te emuleren.

Wanneer bijvoorbeeld het lettertype 'Rubik' op uw apparaat is geïnstalleerd en de @font-face src regel dit gebruikt als een local() lettertype, gebruikt Chrome het lokale lettertypebestand van uw apparaat.

Wanneer Lokale lettertypen uitschakelen is ingeschakeld, negeert DevTools de local() lettertypen en haalt deze op uit het netwerk.

Vaak gebruiken ontwikkelaars en ontwerpers twee verschillende exemplaren van hetzelfde lettertype tijdens de ontwikkeling:

• Een lokaal lettertype voor uw ontwerptools en
• Een weblettertype voor uw code

Door lokale lettertypen uit te schakelen kunt u gemakkelijker:

• Debug en meet de laadprestaties en optimalisatie van webfonts
• Controleer de juistheid van uw CSS @font-face -regels
• Ontdek eventuele verschillen tussen webfonts en hun lokale versies

Chromium-probleem: 384968

Inactieve gebruikers emuleren

Met de Idle Detection API kunnen ontwikkelaars inactieve gebruikers detecteren en reageren op wijzigingen in de inactieve status. U kunt nu DevTools gebruiken om wijzigingen in de inactieve status te emuleren op het tabblad Sensoren voor zowel de gebruikersstatus als de schermstatus, in plaats van te wachten tot de werkelijke inactieve status verandert. U kunt het tabblad Sensoren openen vanuit de Lade .

Chromium-probleem: 1090802

Emuleren prefers-reduced-data

Met de media query prefers-reduced-data wordt gedetecteerd of de gebruiker liever alternatieve content te zien krijgt die minder data gebruikt voor de weergave van de pagina.

U kunt nu DevTools gebruiken om de media query prefers-reduced-data te emuleren.

Chromium-probleem: 1096068

Ondersteuning voor nieuwe JavaScript-functies

DevTools biedt nu betere ondersteuning voor enkele van de nieuwste JavaScript-taalfuncties:

• Logische toewijzingsoperatoren - DevTools ondersteunt nu logische toewijzing met de nieuwe operatoren &&= , ||= en ??= in de panelen Console en Bronnen.
• Numerieke scheidingstekens mooi afdrukken: DevTools drukt de numerieke scheidingstekens in het paneel Bronnen nu op de juiste manier mooi af.

Chromium-problemen: 1086817 , 1080569

Vuurtoren 6.2 in het Vuurtorenpaneel

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

Nieuwe audits in Lighthouse 6.2:

• Vermijd lange taken in de hoofdthread . Rapporteert de langste taken in de hoofdthread, wat handig is om de grootste bijdragers aan invoervertraging te identificeren.
• Links zijn crawlbaar . Controleer of het href attribuut van ankerelementen naar een geschikte bestemming linkt, zodat de links ontdekt kunnen worden.
• Ongeëvenaarde afbeeldingselementen - Controleer of er een expliciete width en height is ingesteld voor afbeeldingselementen. Expliciete afbeeldingsgrootte kan lay-outverschuivingen verminderen en de CLS verbeteren.
• Vermijd niet-samengestelde animaties . Rapporteert niet-samengestelde animaties die er haperend uitzien en de CLS verminderen.
• Luistert naar de unload -gebeurtenissen . Rapporteert de unload -gebeurtenis. Overweeg in plaats daarvan de pagehide of visibilitychange gebeurtenissen te gebruiken, aangezien de unload -gebeurtenis niet betrouwbaar wordt geactiveerd.

Bijgewerkte audits in Lighthouse 6.2:

• Verwijder ongebruikte JavaScript . Lighthouse verbetert nu de controle als een pagina openbaar toegankelijke JavaScript-bronkaarten heeft.

Chromium-probleem: 772558

Veroudering van de vermelding 'andere oorsprongen' in het deelvenster Service Workers

DevTools biedt nu een koppeling om de volledige lijst met serviceworkers van andere oorsprongen te bekijken in een nieuw browsertabblad: chrome://serviceworker-internals/?devtools .

Voorheen gaf DevTools een lijst weer onder het paneel Toepassing > Deelvenster Serviceworkers .

Chromium-probleem: 807440

Toon dekkingssamenvatting voor gefilterde items

DevTools berekent nu dynamisch een samenvatting van de dekkingsinformatie en geeft deze weer wanneer filters worden toegepast op het tabblad Dekking . Voorheen gaf het tabblad Dekking altijd een samenvatting van alle dekkingsinformatie weer.

In het onderstaande voorbeeld ziet u hoe de samenvatting aanvankelijk zegt dat 446 kB of 2.0 MB (22%) used so far. 1.5 MB unused. Vervolgens zegt de samenvatting dat 57 kB of 604 kB (10%) used so far. 546 kB unused. Dit nadat CSS-filtering is toegepast.

Chromium-probleem: 1061385

Nieuwe weergave van framedetails in het toepassingspaneel

DevTools tonen nu een gedetailleerde weergave voor elk frame. Je kunt deze openen door op een frame te klikken in het menu Frames in het paneel Toepassing .

Chromium-probleem: 1093247

Kozijndetails voor geopende ramen

DevTools geeft nu ook geopende vensters/pop-ups weer onder de framestructuur. De framedetails van de geopende vensters bevatten aanvullende beveiligingsinformatie.

Chromium-probleem: 1107766

Beveiligings- en isolatie-informatie (COEP / COOP)

DevTools geven nu beveiligde context, Cross-Origin-Embedder-Policy (COEP) en Cross-Origin-Opener-Policy (COOP) weer in de framedetails.

Er wordt binnenkort meer beveiligingsinformatie toegevoegd aan de framedetails.

Chromium-probleem: 1051466

Updates voor het Elementen- en Netwerkpaneel

Toegankelijke kleur suggestie in het Stijlen paneel

DevTools biedt nu kleurvoorstellen voor tekst met een laag kleurcontrast.

In het onderstaande voorbeeld heeft h1 tekst met een laag contrast. Om dit te verhelpen, opent u de kleurenkiezer van de color in het deelvenster Stijlen. Nadat u de sectie Contrastverhouding hebt uitgevouwen, biedt DevTools suggesties voor AA- en AAA-kleuren. Klik op de voorgestelde kleur om deze toe te passen.

Chromium-probleem: 1093227

Het deelvenster Eigenschappen herstellen in het deelvenster Elementen

Het Eigenschappen-venster is terug. Het was verouderd in Chrome 84. In een toekomstige versie van DevTools gaan we de workflow voor het inspecteren van eigenschappen van elementen verbeteren.

Chromium-probleem: 1105205 , 1116085

Voor mensen leesbare X-Client-Data headerwaarden in het paneel Netwerk

Bij het inspecteren van een netwerkbron in het deelvenster Netwerk formatteert DevTools nu alle X-Client-Data headerwaarden in het deelvenster Headers als code.

De X-Client-Data HTTP-header bevat een lijst met experiment-ID's en Chrome-vlaggen die in uw browser zijn ingeschakeld. De onbewerkte headerwaarden zien eruit als ondoorzichtige strings, omdat het base-64-gecodeerde, geserialiseerde protocolbuffers zijn. Om de inhoud transparanter te maken voor ontwikkelaars, toont DevTools nu de gedecodeerde waarden.

Chromium-probleem: 1103854

Aangepaste lettertypen automatisch aanvullen in het deelvenster Stijlen

Geïmporteerde lettertypen worden nu toegevoegd aan de lijst met automatische CSS-aanvullingen wanneer u de eigenschap font-family in het deelvenster Stijlen bewerkt.

In dit voorbeeld is 'Noto Sans' een aangepast lettertype dat op de lokale computer is geïnstalleerd. Het wordt weergegeven in de CSS-aanvullingslijst. Voorheen was dit niet het geval.

Chromium-probleem: 1106221

Geef het resourcetype consistent weer in het netwerkpaneel

DevTools geeft nu consequent hetzelfde resourcetype weer als bij de oorspronkelijke netwerkaanvraag en voegt / Redirect toe aan de waarde in de kolom Type wanneer er een omleiding plaatsvindt (status 302).

Voorheen wijzigde DevTools het type soms naar Other .

Chromium-probleem: 997694

Wisknoppen in de panelen Elementen en Netwerk

De filtertekstvakken in het deelvenster Stijlen en het deelvenster Netwerk , evenals het DOM-zoekvak in het deelvenster Elementen , hebben nu Wissen- knoppen. Door op Wissen te klikken, verwijdert u alle ingevoerde tekst.

Chromium-probleem: 1067184

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.