Wat is er nieuw in DevTools (Chrome 96)

Jecelyn Yeen

Voorbeeldfunctie: Nieuw CSS-overzichtpaneel

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

U kunt de informatie verder verfijnen. 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 te openen in het paneel ' Elementen' .

Het CSS-overzichtpaneel is een previewfunctie. Ons team werkt er nog steeds actief aan en we horen graag uw feedback voor verdere verbeteringen.

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

Chromium-probleem: 1254557

Herstelde en verbeterde CSS-lengtebewerking en kopieerervaring

De CSS kopiëren en bewerken als tekst- ervaring is hersteld voor CSS-eigenschappen met lengte. Deze ervaring was in de laatste release niet meer beschikbaar.

Bovendien kunt u de eenheidswaarde slepen en het eenheidstype bijwerken via de dropdown. Deze extra functie voor het aanpassen van de lengte zou geen invloed moeten hebben op de primaire bewerkingservaring als tekst.

Als u problemen ondervindt, meldt u dit via goo.gle/length-feedback .

U kunt dit uitschakelen via Instellingen > Experimenten > CSS-lengte-authoringtools inschakelen in het deelvenster Stijlen .

Chromium-problemen: 1259088 , 1172993

Updates op het tabblad Rendering

De CSS-preferenties-contrast media-functie emuleren

Met de functie prefers-contrast media kunt u vaststellen of de gebruiker meer of minder contrast op de pagina heeft aangevraagd.

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

Chromium-probleem: 1139777

De automatische donkere themafunctie van Chrome emuleren

Gebruik DevTools om het automatische donkere thema na te bootsen, 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 automatisch donker thema op Android. Met deze functie past de browser een automatisch gegenereerd donker thema toe op websites met een licht thema, wanneer de gebruiker hiervoor heeft gekozen in het besturingssysteem.

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

Chromium-probleem: 1243309

Kopieer declaraties als JavaScript in het deelvenster Stijlen

Er zijn twee nieuwe opties toegevoegd aan het contextmenu waarmee u CSS-regels eenvoudig kunt kopiëren als JavaScript-eigenschappen. Deze snelkoppelingen 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.

Het onderstaande voorbeeld kopieert bijvoorbeeld paddingLeft: '1.5rem' naar het klembord.

Chromium-probleem: 1253635

Nieuw tabblad Payload in het paneel Netwerk

Gebruik het nieuwe tabblad Payload in het paneel Netwerk wanneer u een netwerkaanvraag met payload inspecteert. Voorheen was de payloadinformatie beschikbaar onder het tabblad Headers .

Chromium-probleem: 1214030

De weergave van eigenschappen in het deelvenster Eigenschappen is verbeterd

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

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

Chromium-probleem: 1226262

Console-updates

Optie om CORS-fouten in de console te verbergen

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

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

Chromium-probleem: 1251176

Correcte preview en evaluatie van Intl -objecten in de console

De Intl- objecten hebben nu een goede preview en worden direct in de console geëvalueerd. Voorheen werden de Intl objecten niet direct geëvalueerd.

Chromium-probleem: 1073804

Consistente asynchrone stack traces

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

Chromium-probleem: 1254259

De consolezijbalk behouden

De consolezijbalk blijft. In Chrome 94 hebben we de aanstaande afschaffing van de consolezijbalk aangekondigd en we vragen ontwikkelaars om feedback en opmerkingen.

We hebben nu voldoende feedback ontvangen op de kennisgeving van veroudering en we gaan aan de slag met het verbeteren van de zijbalk in plaats van deze te verwijderen.

Chromium-problemen: 1232937 , 1255586

Verouderd toepassingscachevenster in het toepassingspaneel

Het toepassingscachevenster in het toepassingspaneel is nu verwijderd, omdat de ondersteuning voor AppCache is verwijderd uit Chrome en andere op Chromium gebaseerde browsers.

Chromium-probleem: 1084190

[Experimenteel] Nieuw rapport-API-paneel in het toepassingspaneel

Met de Reporting API kunt u beveiligingsschendingen op uw pagina, verouderde API-aanroepen en meer in de gaten houden.

Als dit experiment is ingeschakeld, kunt u de status van rapporten bekijken in het nieuwe deelvenster Rapportage-API in het paneel Toepassing .

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

Meer informatie over de Reporting API vindt u in dit artikel .

Chromium-probleem: 1205856

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 dat in de serie Wat is er nieuw in DevTools is behandeld.