Wat is er nieuw in DevTools (Chrome 86)

Jecelyn Yeen

Nieuw mediapaneel

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

Nieuw mediapaneel

Vóór het nieuwe mediapaneel in DevTools kon informatie over logboekregistratie en foutopsporing over videospelers worden gevonden in chrome://media-internals .

Het nieuwe Media-paneel biedt een eenvoudigere manier om gebeurtenissen, logs, eigenschappen en een tijdlijn met framedecoderingen te bekijken op hetzelfde browsertabblad als de videospeler zelf. U kunt potentiële problemen sneller live bekijken en inspecteren (bijvoorbeeld waarom er verloren frames optreden, waarom JavaScript op een onverwachte manier met de speler communiceert).

Chroomuitgave: 1018414

Maak knooppuntscreenshots via het contextmenu van het paneel Elementen

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

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

Maak knooppuntscreenshots

Chroomuitgave: 1100253

Updates van het tabblad Problemen

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

Problemen in consolebericht

Problemen met cookies van derden worden nu standaard verborgen op het tabblad Problemen. Schakel het nieuwe selectievakje Inclusief problemen met cookies van derden in om deze te bekijken.

selectievakje voor problemen met cookies van derden

Chroomuitgaves: 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 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 van het netwerk.

Emuleer ontbrekende lokale lettertypen

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

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

Als u lokale lettertypen uitschakelt, kunt u gemakkelijker:

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

Chroomuitgave: 384968

Emuleer inactieve gebruikers

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 op het tabblad Sensoren te emuleren voor zowel de gebruikersstatus als de schermstatus, in plaats van te wachten tot de daadwerkelijke inactieve status verandert. U kunt het tabblad Sensoren openen vanuit de Lade .

Emuleer inactieve gebruikers

Chroomuitgave: 1090802

Emuleer prefers-reduced-data

De mediaquery prefers-reduced-data detecteert of de gebruiker er de voorkeur aan geeft alternatieve inhoud te zien die minder gegevens gebruikt voor de pagina die moet worden weergegeven.

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

Emuleer voorkeuren-gereduceerde gegevens

Chroomuitgave: 1096068

Ondersteuning voor nieuwe JavaScript-functies

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

Chroomuitgaves: 1086817 , 1080569

Vuurtoren 6.2 in het Vuurtorenpaneel

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

Afbeelding niet groter

Nieuwe audits in Lighthouse 6.2:

  • Vermijd lange hoofdlijnentaken . Rapporteert de langste taken in de hoofdthread, handig voor het identificeren van de ergste bijdragers aan invoervertraging.
  • Links zijn crawlbaar . Controleer of het href attribuut van ankerelementen naar een geschikte bestemming linkt, zodat de links ontdekt kunnen worden.
  • Afbeeldingselementen zonder formaat - Controleer of er expliciet een width en height is ingesteld op afbeeldingselementen. Expliciete afbeeldingsgrootte kan lay-outverschuivingen verminderen en CLS verbeteren.
  • Vermijd niet-gecomponeerde animaties . Rapporteert niet-samengestelde animaties die janky lijken en de CLS verminderen.
  • Luistert naar de unload . Rapporteert de unload . Overweeg in plaats daarvan de gebeurtenissen pagehide of visibilitychange te gebruiken, omdat de unload -gebeurtenis niet betrouwbaar wordt geactiveerd.

Bijgewerkte audits in Lighthouse 6.2:

  • Verwijder ongebruikt JavaScript . Lighthouse zal de audit nu verbeteren als een pagina openbaar toegankelijke JavaScript-bronkaarten heeft.

Chroomuitgave: 772558

Beëindiging van de vermelding 'andere oorsprong' in het deelvenster Servicewerkers

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

Voorheen gaf DevTools een lijst weer die genest was onder het paneel Toepassingen > deelvenster Servicemedewerkers .

Link naar andere oorsprong

Chroomuitgave: 807440

Toon dekkingsoverzicht voor gefilterde artikelen

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

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

Dekkingsoverzicht voor gefilterde artikelen

Chroomuitgave: 1061385

Nieuwe framedetailsweergave in het toepassingspaneel

DevTools toont nu een gedetailleerd overzicht voor elk frame. U kunt deze openen door op een frame te klikken onder het menu Frames in het paneel Toepassingen .

Nieuwe framedetailsweergave in het toepassingspaneel

Chroomuitgave: 1093247

Framedetails voor geopende ramen

DevTools geeft nu ook geopende vensters/pop-ups weer onder de frameboom. De framedetailsweergave van de geopende vensters bevat aanvullende beveiligingsinformatie.

Geopende raamkozijndetails

Chroomuitgave: 1107766

Beveiligings- en isolatie-informatie (COEP / COOP)

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

Beveiligings- en isolatie-informatie

Binnenkort wordt er meer beveiligingsinformatie toegevoegd aan de framedetailsweergave.

Chroomuitgave: 1051466

Elementen en netwerkpaneelupdates

Toegankelijke kleursuggestie in het deelvenster Stijlen

DevTools biedt nu kleursuggesties voor tekst met een laag kleurcontrast.

In het onderstaande voorbeeld heeft h1 tekst met laag contrast. Om dit probleem op te lossen, opent u de kleurkiezer van de color in het deelvenster Stijlen. Nadat u het gedeelte Contrastverhouding hebt uitgevouwen, biedt DevTools AA- en AAA-kleursuggesties. Klik op de voorgestelde kleur om de kleur toe te passen.

Chroomuitgave: 1093227

Herstel het deelvenster Eigenschappen in het deelvenster Elementen

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

Eigenschappenvenster in het paneel Elementen

Chroomuitgave: 1105205 ​​, 1116085

Voor mensen leesbare X-Client-Data headerwaarden in het netwerkpaneel

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

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

Voor mensen leesbare 'X-Client-Data'-headerwaarden

Chroomuitgave: 1103854

Aangepaste lettertypen automatisch aanvullen in het deelvenster Stijlen

Geïmporteerde lettertypen worden nu toegevoegd aan de lijst met automatische CSS-aanvullingen bij het bewerken van de eigenschap font-family in het deelvenster Stijlen .

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

Aangepaste lettertypen automatisch aanvullen

Chroomuitgave: 1106221

Geef het brontype consistent weer in het netwerkpaneel

DevTools geeft nu consistent hetzelfde brontype weer als het oorspronkelijke netwerkverzoek en voegt / Redirect toe aan de kolomwaarde Type wanneer omleiding (status 302) plaatsvindt.

Voorheen veranderde DevTools het type soms in Other .

Geef het omleidingsbrontype weer

Chroomuitgave: 997694

Duidelijke knoppen in de panelen Elementen en Netwerk

De filtertekstvakken in het deelvenster Stijlen en het paneel Netwerk , evenals het DOM-zoektekstvak in het paneel Elementen , hebben nu knoppen Wis . Als u op Wissen klikt, wordt alle tekst verwijderd die u hebt ingevoerd.

Duidelijke knoppen in de panelen Elementen en Netwerk

Chroomuitgave: 1067184

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 .