Wat is er nieuw in DevTools (Chrome 96)

Jecelyn Yeen

Preview-functie: Nieuw CSS-overzichtpaneel

Gebruik het nieuwe CSS-overzichtpaneel om potentiële CSS-verbeteringen op uw pagina te identificeren. Open het paneel CSS-overzicht en klik vervolgens op Overzicht vastleggen om een ​​rapport van de CSS van uw pagina te genereren.

U kunt de informatie verder uitdiepen. Klik bijvoorbeeld op een kleur in het gedeelte Kleuren om de lijst met elementen te bekijken die dezelfde kleur toepassen. Klik op een element om het element in het paneel Elementen te openen.

Het CSS-overzichtpaneel is een voorbeeldfunctie. Ons team werkt er nog steeds actief aan en we zijn op zoek naar uw feedback voor verdere verbeteringen.

Lees dit artikel voor meer informatie over het CSS-overzichtspaneel .

Paneel CSS-overzicht

Chroomuitgave: 1254557

Herstelde en verbeterde bewerkings- en kopieerervaring met CSS-lengte

De ervaring voor het kopiëren van CSS en bewerken als tekst wordt hersteld voor CSS-eigenschappen met lengte. Deze ervaringen zijn verbroken in de laatste release.

Bovendien kunt u slepen om de eenheidswaarde aan te passen en het eenheidstype via de vervolgkeuzelijst bij te werken. Deze schrijffunctie met extra lengte zou geen invloed moeten hebben op de primaire bewerking als tekstervaring.

Meld het via goo.gle/length-feedback als u problemen heeft aangetroffen.

U kunt dit uitschakelen via Instellingen > Experimenten > Auteurstools voor CSS-lengte inschakelen in het selectievakje Stijlen .

Chroomuitgaves: 1259088 , 1172993

Tabbladupdates weergeven

Emuleer de CSS-voorkeur-contrast-mediafunctie

Emuleer de CSS-voorkeur-contrast-mediafunctie

De mediafunctie Voorkeur voor contrast wordt gebruikt om te detecteren of de gebruiker meer of minder contrast op de pagina heeft aangevraagd.

Open het Commandomenu , voer de opdracht Rendering weergeven uit en stel vervolgens de vervolgkeuzelijst CSS-mediafunctie emuleren voorkeuren-contrast in.

Chroomuitgave: 1139777

Emuleer de Auto Dark Theme-functie van Chrome

Gebruik DevTools om het automatische donkere thema te emuleren, zodat u eenvoudig kunt zien hoe uw pagina eruitziet wanneer het Automatische donkere thema van Chrome is ingeschakeld.

Chrome 96 introduceert een Origin-proefversie voor Auto Dark Theme op Android. Met deze functie past de browser een automatisch gegenereerd donker thema toe op sites met een licht thema, wanneer de gebruiker zich heeft aangemeld voor donkere thema's in het besturingssysteem.

Open het Commandomenu , voer de opdracht Rendering weergeven uit en stel vervolgens de vervolgkeuzelijst Automatische donkere modus emuleren in.

Emuleer de Auto Dark Theme-functie van Chrome

Chroomuitgave: 1243309

Kopieer declaraties als JavaScript in het deelvenster Stijlen

Er zijn twee nieuwe opties toegevoegd in het contextmenu waarmee u eenvoudig CSS-regels als JavaScript-eigenschappen kunt kopiëren. Deze snelkoppelingsopties zijn vooral handig voor ontwikkelaars die werken met CSS-in-JS -bibliotheken.

Klik in het deelvenster Stijlen met de rechtermuisknop op een CSS-regel. U kunt declaratie kopiëren als JS selecteren om één regel te kopiëren of alle declaraties kopiëren als JS om alle regels te kopiëren.

In het onderstaande voorbeeld wordt bijvoorbeeld paddingLeft: '1.5rem' naar het klembord gekopieerd.

Kopieer declaratie als JavaScript

Chroomuitgave: 1253635

Nieuw tabblad Payload in het netwerkpaneel

Gebruik het nieuwe tabblad Payload in het netwerkpaneel wanneer u een netwerkverzoek met payload inspecteert. Voorheen was de payload-informatie beschikbaar op het tabblad Headers .

Tabblad Payload in het netwerkpaneel

Chroomuitgave: 1214030

Verbeterde weergave van eigenschappen in het deelvenster Eigenschappen

Het deelvenster Eigenschappen toont nu alleen relevante eigenschappen in plaats van alle eigenschappen van de instantie. DOM-prototypes en -methoden zijn nu verwijderd.

Samen met de verbeteringen in het deelvenster Eigenschappen in Chrome 95 kunt u de relevante eigenschappen nu gemakkelijker vinden.

De weergave van eigenschappen in het venster Eigenschappen

Chroomuitgave: 1226262

Console-updates

Optie om CORS-fouten in de console te verbergen

U kunt CORS-fouten verbergen in de console . Omdat de CORS-fouten nu worden gerapporteerd op het tabblad Problemen, kan het verbergen van CORS-fouten in de console de rommel helpen verminderen.

Klik in de console op het pictogram Instellingen en schakel het selectievakje CORS-fouten weergeven in console uit.

Optie om CORS-fouten in de console te verbergen

Chroomuitgave: 1251176

Juiste preview en evaluatie Intl objecten in de console

De Intl- objecten hebben nu de juiste preview en worden gretig geëvalueerd in de console. Voorheen werden de Intl objecten niet gretig geëvalueerd.

Intl-objecten in de console

Chroomuitgave: 1073804

Consistente asynchrone stacktraces

De console rapporteert nu async stacktraceringen voor async functies, zodat deze consistent zijn met andere asynchrone taken en consistent zijn met wat wordt weergegeven in de call-stack.

asynchrone stapelsporen

Chroomuitgave: 1254259

Bewaar de consolezijbalk

De Console-zijbalk is een blijvertje. In Chrome 94 hebben we de aanstaande beëindiging van de Console-zijbalk aangekondigd en hebben we ontwikkelaars om feedback en zorgen gevraagd.

We hebben nu voldoende feedback gekregen over het beëindigingsbericht en we zullen werken aan het verbeteren van de zijbalk in plaats van deze te verwijderen.

Consolezijbalk

Chroomuitgaves: 1232937 , 1255586

Verouderd applicatiecachevenster in het applicatiepaneel

Het applicatiecachepaneel in het applicatiepaneel is nu verwijderd omdat de ondersteuning voor AppCache is verwijderd uit Chrome en andere Chromium-gebaseerde browsers.

Chroomuitgave: 1084190

[Experimenteel] Nieuw deelvenster Rapportage-API in het toepassingspaneel

De Reporting API is ontworpen om u te helpen beveiligingsschendingen van uw pagina, verouderde API-aanroepen en meer te monitoren.

Als dit experiment is ingeschakeld, kunt u nu de rapportstatus bekijken in het nieuwe deelvenster Reporting API in het toepassingspaneel .

Houd er rekening mee dat de sectie Eindpunten momenteel nog in actieve ontwikkeling is (er worden voorlopig geen rapportage-eindpunten weergegeven).

Lees meer over de Reporting API in dit artikel .

Deelvenster Rapportage-API in het paneel Applicaties

Chroomuitgave: 1205856

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 .