Wat is er nieuw in DevTools (Chrome 86)

Jecelyn Yeen

Nieuw media panel

DevTools toont nu informatie over mediaspelers in het paneel Media .

Voordat het nieuwe mediapaneel in DevTools werd toegevoegd, was logboekregistratie en foutopsporingsinformatie over videospelers te vinden op chrome://media-internals .

Het nieuwe Media-paneel biedt een eenvoudigere manier om gebeurtenissen, logboeken, eigenschappen en een tijdlijn van frame-decoderingen te bekijken in hetzelfde browsertabblad als de videospeler zelf. U kunt live zien en potentiële problemen sneller opsporen (bijvoorbeeld waarom frames worden overgeslagen, waarom JavaScript op een onverwachte manier met de speler communiceert).

Chromium-probleem: 1018414

Maak schermafbeeldingen van knooppunten via het contextmenu van het Elementen-paneel.

Je kunt nu schermafbeeldingen van knooppunten maken via het contextmenu in het paneel Elementen.

Je kunt bijvoorbeeld een schermafbeelding maken van de inhoudsopgave door met de rechtermuisknop op het element te klikken en 'Schermafbeelding van knooppunt vastleggen' te selecteren.

Chromium-probleem: 1100253

Updates van het tabblad Problemen

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

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

Chromium-problemen: 1096481 , 1068116 , 1080589

Emuleer ontbrekende lokale lettertypen

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

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

Wanneer 'Lokale lettertypen uitschakelen' is ingeschakeld, negeert DevTools de local() lettertypen en haalt ze op van het netwerk.

Ontwikkelaars en ontwerpers gebruiken tijdens de ontwikkeling vaak twee verschillende versies van hetzelfde lettertype:

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

Door lokale lettertypen uit te schakelen, wordt het voor u gemakkelijker om:

• Fouten opsporen en de laadprestaties en optimalisatie van webfonts meten
• Controleer of uw CSS @font-face -regels correct zijn.
• Ontdek de verschillen tussen webfonts en hun lokale versies.

Chromium-probleem: 384968

Simuleer inactieve gebruikers

Met de Idle Detection API kunnen ontwikkelaars inactieve gebruikers detecteren en reageren op wijzigingen in hun inactiviteitsstatus. Je kunt nu DevTools gebruiken om wijzigingen in de inactiviteitsstatus te simuleren in het tabblad Sensoren , zowel voor de gebruikersstatus als voor de schermstatus, in plaats van te wachten tot de daadwerkelijke inactiviteitsstatus verandert. Je kunt het tabblad Sensoren openen vanuit het zijmenu .

Chromium-probleem: 1090802

Emulate prefers-reduced-data

De mediaquery prefers-reduced-data detecteert of de gebruiker de voorkeur geeft aan alternatieve content die minder data verbruikt voor het weergeven van de pagina.

Je kunt nu DevTools gebruiken om de mediaquery prefers-reduced-data te emuleren.

Chromium-probleem: 1096068

Ondersteuning voor nieuwe JavaScript-functies

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

• Logische toewijzingsoperatoren - DevTools ondersteunt nu logische toewijzing met de nieuwe operatoren &&= , ||= , en ??= in de panelen Console en Bronnen.
• Numerieke scheidingstekens netjes opmaken - DevTools maakt nu een correcte opmaak van de numerieke scheidingstekens in het paneel Bronnen.

Chromium-problemen: 1086817 , 1080569

Lighthouse 6.2 in het Lighthouse-paneel

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

Nieuwe audits in Lighthouse 6.2:

• Vermijd lange taken op de hoofdthread . Rapporteert de langste taken op de hoofdthread, wat handig is om de grootste veroorzakers van invoervertraging te identificeren.
• Links zijn door zoekmachines te crawlen . Controleer of het href attribuut van anker-elementen naar een geschikte bestemming verwijst, zodat de links gevonden kunnen worden.
• Afbeeldingselementen zonder afmetingen - Controleer of er een expliciete width en height is ingesteld voor afbeeldingselementen. Een expliciete afmeting voor afbeeldingen kan verschuivingen in de lay-out verminderen en de CLS (Content Layout Shift) verbeteren.
• Vermijd niet-samengestelde animaties . Rapporteert niet-samengestelde animaties die er schokkerig uitzien en de CLS verlagen.
• Luistert naar de unload -gebeurtenissen . Rapporteert de unload -gebeurtenis. Overweeg om 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 zal de audit nu verbeteren als een pagina openbaar toegankelijke JavaScript-broncodebestanden bevat.

Chromium-probleem: 772558

De vermelding "andere oorsprong" in het paneel Service Workers wordt afgeschaft.

DevTools biedt nu een link om de volledige lijst met service workers van andere oorsprong in een nieuw browsertabblad te bekijken: chrome://serviceworker-internals/?devtools .

Voorheen toonde DevTools een lijst die was genest onder het paneel Toepassing > paneel Serviceworkers .

Chromium-probleem: 807440

Toon een dekkingsoverzicht voor gefilterde items

DevTools berekent en toont nu dynamisch een samenvatting van de dekkingsinformatie wanneer filters worden toegepast in het tabblad Dekking . Voorheen toonde het tabblad Dekking altijd een samenvatting van alle dekkingsinformatie.

In het onderstaande voorbeeld ziet u hoe de samenvatting aanvankelijk aangeeft dat 446 kB of 2.0 MB (22%) used so far. 1.5 MB unused. Na het toepassen van CSS-filtering staat er vervolgens: 57 kB of 604 kB (10%) used so far. 546 kB unused.

Chromium-probleem: 1061385

Nieuwe weergave van framedetails in het toepassingspaneel

De ontwikkelaarstools tonen nu een gedetailleerde weergave voor elk frame. U kunt deze openen door op een frame te klikken in het menu ' Frames' in het toepassingspaneel .

Chromium-probleem: 1093247

Details van het frame voor geopende ramen

DevTools toont nu ook geopende vensters/pop-ups onder de framestructuur. De detailweergave van de geopende vensters bevat aanvullende beveiligingsinformatie.

Chromium-probleem: 1107766

Beveiligings- en isolatie-informatie (COEP / COOP)

DevTools toont nu de beveiligde context, het Cross-Origin-Embedder-Policy (COEP) en het Cross-Origin-Opener-Policy (COOP) in de framegegevens.

Binnenkort wordt er meer beveiligingsinformatie toegevoegd aan de weergave met framegegevens.

Chromium-probleem: 1051466

Updates voor de panelen Elementen en Netwerk

Toegankelijke kleursuggestie in het deelvenster Stijlen

DevTools biedt nu kleursuggesties voor tekst met een laag kleurcontrast.

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

Chromium-probleem: 1093227

Herstel het deelvenster Eigenschappen in het paneel Elementen

Het eigenschappenvenster is terug, het was verwijderd in Chrome 84. In een toekomstige versie van DevTools gaan we de workflow voor het inspecteren van elementeigenschappen verbeteren.

Chromium-probleem: 1105205 , 1116085

Mensen leesbare X-Client-Data headerwaarden in het netwerkpaneel

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

De HTTP-header X-Client-Data bevat een lijst met experiment-ID's en Chrome-vlaggen die in uw browser zijn ingeschakeld. De onbewerkte headerwaarden zien eruit als ondoorzichtige tekenreeksen, 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

Automatisch aangepaste lettertypen aanvullen in het deelvenster Stijlen

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

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

Chromium-probleem: 1106221

Toon het resourcetype consistent in het netwerkpaneel.

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

Voorheen veranderde DevTools het type soms naar Other .

Chromium-probleem: 997694

Wis de knoppen in de panelen Elementen en Netwerk.

De filtertekstvakken in het deelvenster Stijlen en het deelvenster Netwerk , evenals het DOM-zoektekstvak in het deelvenster Elementen , hebben nu een knop 'Wissen' . Door op 'Wissen' te klikken, wordt alle ingevoerde tekst verwijderd.

Chromium-probleem: 1067184

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