Wat is er nieuw in DevTools (Chrome 84)

Kayce Basken
Kayce Basques
X GitHub

Los siteproblemen op met het nieuwe tabblad 'Problemen'.

Het nieuwe tabblad 'Problemen' in het zijmenu is bedoeld om de overvloed aan meldingen en de rommel in de Console te verminderen. Momenteel is de Console de centrale plek voor websiteontwikkelaars, bibliotheken, frameworks en Chrome zelf om berichten, waarschuwingen en fouten te loggen. Het tabblad 'Problemen' presenteert waarschuwingen van de browser op een gestructureerde, geaggregeerde en bruikbare manier, linkt naar de betreffende bronnen in DevTools en biedt richtlijnen voor het oplossen van de problemen. Na verloop van tijd zullen steeds meer waarschuwingen van Chrome in het tabblad 'Problemen' verschijnen in plaats van in de Console, wat de Console hopelijk overzichtelijker zal maken.

Bekijk het tabblad Problemen vinden en oplossen in de Chrome DevTools om aan de slag te gaan.

Het tabblad Problemen.

Chromium-bug: #1068116

Bekijk toegankelijkheidsinformatie in de tooltip van de inspectiemodus.

De tooltip in de inspectiemodus geeft nu aan of het element een toegankelijke naam en rol heeft en of het met het toetsenbord kan worden geselecteerd .

De tooltip van de inspectiemodus met toegankelijkheidsinformatie.

Chromium-bug: #1040025

Updates van het prestatiepaneel

Bekijk de informatie over de totale blokkeertijd (TBT) in de voettekst.

Na het vastleggen van de laadprestaties toont het paneel Prestaties nu informatie over de totale blokkeringstijd (TBT) in de voettekst. TBT is een prestatiemaatstaf voor laadtijden die helpt kwantificeren hoe lang het duurt voordat een pagina bruikbaar wordt. Het meet in feite hoe lang een pagina bruikbaar lijkt (omdat de inhoud op het scherm is weergegeven), maar in werkelijkheid niet bruikbaar is omdat JavaScript de hoofdthread blokkeert en de pagina daardoor niet kan reageren op gebruikersinvoer. TBT is de belangrijkste labmaatstaf voor het benaderen van de eerste invoervertraging (First Input Delay), een van Google's nieuwe Core Web Vitals .

Om informatie over de totale blokkeringstijd te verkrijgen, dient u de pagina niet opnieuw te laden. Pagina opnieuw laden Werkstroom voor het vastleggen van de laadprestaties van pagina's. Klik in plaats daarvan op 'Opnemen'. Dossier Vernieuw de pagina handmatig, wacht tot de pagina is geladen en stop vervolgens met opnemen. Als je Total Blocking Time: Unavailable ziet, betekent dit dat DevTools de benodigde informatie niet heeft kunnen verkrijgen uit de interne profileringsgegevens van Chrome.

De totale blokkeertijd wordt weergegeven in de voettekst van een Performance-opname.

Chromium-bug: #1054381

Lay-outwijzigingsevenementen in het nieuwe Experience-gedeelte

Het nieuwe gedeelte 'Ervaring' in het paneel 'Prestaties' kan u helpen bij het detecteren van lay-outverschuivingen . Cumulatieve lay-outverschuiving (CLS) is een meetwaarde waarmee u ongewenste visuele instabiliteit kunt kwantificeren en is een van Google's nieuwe Core Web Vitals .

Klik op een Layout Shift -gebeurtenis om de details van de lay-outwijziging te bekijken in het tabblad Samenvatting . Beweeg de muis over de velden 'Verplaatst van' en 'Verplaatst naar' om te zien waar de lay-outwijziging heeft plaatsgevonden.

De details van een lay-outwijziging.

Nauwkeurigere terminologie voor beloftes in de console

Bij het loggen van een Promise beschreef de console de status van de Promise voorheen onjuist als resolved :

Een voorbeeld van de console die de oude 'opgeloste' terminologie gebruikt.

De console gebruikt nu de term fulfilled , wat overeenkomt met de Promise specificatie :

Een voorbeeld van de console waarin de nieuwe terminologie 'voltooid' wordt gebruikt.

V8-bug: #6751

Updates van het deelvenster Stijlen

Ondersteuning voor het trefwoord revert

De automatische aanvulfunctie van het deelvenster Stijlen detecteert nu het CSS-trefwoord ' revert , waarmee de trapsgewijze waarde van een eigenschap wordt teruggezet naar de waarde die deze zou hebben gehad als er geen wijzigingen in de styling van het element waren aangebracht.

De waarde van een eigenschap terugzetten naar de oorspronkelijke waarde.

Chromium-bug: #1075437

Afbeeldingsvoorbeelden

Beweeg de muis over een background-image in het deelvenster Stijlen om een ​​voorbeeld van de afbeelding in een tooltip te bekijken.

Als je met de muis over een achtergrondafbeelding beweegt.

Chromium-bug: #1040019

Kleurenkiezer gebruikt nu functionele kleurnotatie met spaties als scheidingstekens.

De CSS Color Module Level 4 specificeert dat kleurfuncties zoals rgb() argumenten moeten ondersteunen die door spaties gescheiden zijn. Bijvoorbeeld, rgb(0, 0, 0) is gelijk aan rgb(0 0 0) .

Wanneer u kleuren selecteert met de kleurenkiezer of wisselt tussen kleurweergaven in het deelvenster Stijlen door Shift ingedrukt te houden en vervolgens op de kleurwaarde te klikken, ziet u nu de argumentstructuur met spaties als scheidingstekens.

Argumenten met spaties als scheidingstekens gebruiken in het deelvenster Stijlen.

Je ziet de syntaxis ook in het deelvenster 'Berekend' en in de tooltip van de inspectiemodus.

DevTools gebruikt de nieuwe syntax omdat aankomende CSS-functies zoals color() de verouderde syntax met door komma's gescheiden argumenten niet ondersteunen .

De syntaxis met spaties als scheidingstekens voor argumenten wordt al een tijdje door de meeste browsers ondersteund. Zie Kan ik functionele kleurnotaties met spaties als scheidingstekens gebruiken?

Chromium-bug: #1072952

Het deelvenster Eigenschappen in het paneel Elementen wordt afgeschaft.

Het deelvenster Eigenschappen in het deelvenster Elementen is verouderd. Gebruik in plaats daarvan de opdracht console.dir($0) in de console .

Het verouderde eigenschappenvenster.

Referenties:

Ondersteuning voor app-snelkoppelingen in het manifestvenster.

App-snelkoppelingen helpen gebruikers om snel veelgebruikte of aanbevolen taken binnen een webapp te starten. Het menu met app-snelkoppelingen wordt alleen weergegeven voor Progressive Web Apps die op de desktop of het mobiele apparaat van de gebruiker zijn geïnstalleerd.

Bekijk ' Snel dingen voor elkaar krijgen met app-snelkoppelingen' voor meer informatie.

App-snelkoppelingen in het Manifest-venster.

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.

Wat is er nieuw in DevTools?

Een lijst van alles wat is behandeld in de serie 'Wat is nieuw in DevTools' .