Wat is er nieuw in DevTools (Chrome 84)

Kayce Basken

Los siteproblemen op met het nieuwe tabblad Problemen

Het nieuwe tabblad Problemen in de Lade is bedoeld om de meldingsmoeheid en de rommeligheid van de console te helpen verminderen. Momenteel is de console de centrale plek voor website-ontwikkelaars, bibliotheken, frameworks en Chrome zelf om berichten, waarschuwingen en fouten vast te leggen. Het tabblad Problemen presenteert waarschuwingen van de browser op een gestructureerde, geaggregeerde en bruikbare manier, links naar getroffen bronnen binnen DevTools, en biedt richtlijnen voor het oplossen van de problemen. In de loop van de tijd zullen steeds meer waarschuwingen van Chrome op het tabblad Problemen verschijnen in plaats van op de console, wat de rommel van de console zou moeten helpen verminderen.

Ga naar Problemen met Chrome DevTools-problemen zoeken en oplossen om aan de slag te gaan.

Het tabblad Problemen.

Chroombug: #1068116

Bekijk toegankelijkheidsinformatie in de tooltip Inspecteermodus

De tooltip Inspecteermodus geeft nu aan of het element een toegankelijke naam en rol heeft en via het toetsenbord kan worden gefocust .

De tooltip Inspecteermodus met toegankelijkheidsinformatie.

Chroombug: #1040025

Updates van het prestatiepaneel

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

Nadat u uw laadprestaties hebt geregistreerd, toont het Prestatiepaneel nu informatie over de Totale Blokkeertijd (TBT) in de voettekst. TBT is een laadprestatiestatistiek die helpt te kwantificeren hoe lang het duurt voordat een pagina bruikbaar wordt. Het meet in wezen hoe lang een pagina bruikbaar lijkt (omdat de inhoud ervan op het scherm is weergegeven), maar in werkelijkheid niet bruikbaar is omdat JavaScript de hoofdthread blokkeert en de pagina daarom niet kan reageren op gebruikersinvoer. TBT is de belangrijkste laboratoriumstatistiek voor het benaderen van de eerste invoervertraging, een van de nieuwe Core Web Vitals van Google.

Gebruik de herlaadpagina niet om informatie over de totale blokkeertijd te krijgen Pagina opnieuw laden workflow voor het registreren van de laadprestaties van pagina's. Klik in plaats daarvan op Opnemen Dossier , laad de pagina handmatig opnieuw, wacht tot de pagina is geladen en stop vervolgens met opnemen. Als u Total Blocking Time: Unavailable ziet, betekent dit dat DevTools niet de benodigde informatie heeft verkregen uit de interne profileringsgegevens van Chrome.

Informatie over de totale blokkeertijd in de voettekst van een opname op het prestatiepaneel.

Chroombug: #1054381

Layout Shift-gebeurtenissen in de nieuwe Experience-sectie

De nieuwe sectie Ervaring van het paneel Prestaties kan u helpen lay-outverschuivingen te detecteren. Cumulative Layout Shift (CLS) is een statistiek die u kan helpen ongewenste visuele instabiliteit te kwantificeren en is een van de nieuwe Core Web Vitals van Google.

Klik op een lay-outverschuivingsgebeurtenis om de details van de lay-outverschuiving op het tabblad Samenvatting te bekijken. Beweeg over de velden Verplaatst van en Verplaatst naar om te visualiseren waar de lay-outverschuiving heeft plaatsgevonden.

De details van een lay-outverschuiving.

Nauwkeurigere belofteterminologie in de console

Bij het loggen van een Promise beschreef de console de status van de Promise ten onrechte als resolved :

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

De console gebruikt nu de term fulfilled , die aansluit bij de Promise specificatie :

Een voorbeeld van de console die de nieuwe 'vervulde' terminologie gebruikt.

V8-bug: #6751

Updates van het deelvenster Stijlen

Ondersteuning voor het revert

De autocomplete gebruikersinterface van het deelvenster Stijlen detecteert nu het revert CSS-trefwoord, dat de trapsgewijze waarde van een eigenschap terugzet naar wat de waarde zou zijn geweest als er geen wijzigingen waren aangebracht in de stijl van het element.

Instellen van de waarde van een eigenschap die moet worden teruggezet.

Chroombug: #1075437

Voorvertoningen van afbeeldingen

Beweeg de muis over een waarde voor een background-image in het deelvenster Stijlen om een ​​voorbeeld van de afbeelding in knopinfo te zien.

Beweeg over een achtergrondafbeeldingswaarde.

Chroombug: #1040019

Kleurkiezer gebruikt nu door spaties gescheiden functionele kleurnotatie

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

Wanneer u kleuren kiest met de Kleurkiezer of afwisselt tussen kleurrepresentaties in het deelvenster Stijlen door Shift ingedrukt te houden en vervolgens op de kleurwaarde te klikken, ziet u nu de door spaties gescheiden argumentsyntaxis.

Door spaties gescheiden argumenten gebruiken in het deelvenster Stijlen.

U ziet de syntaxis ook in het venster Berekend en in de tooltip Inspecteermodus.

DevTools gebruikt de nieuwe syntaxis omdat aankomende CSS-functies zoals color() de verouderde, door komma's gescheiden argumentsyntaxis niet ondersteunen .

De door spaties gescheiden argumentsyntaxis wordt al een tijdje in de meeste browsers ondersteund. Zie Kan ik door spaties gescheiden functionele kleurnotaties gebruiken?

Chroombug: #1072952

Beëindiging van het deelvenster Eigenschappen in het deelvenster Elementen

Het deelvenster Eigenschappen in het paneel Elementen is verouderd. Voer in plaats daarvan console.dir($0) uit in de console .

Het verouderde deelvenster Eigenschappen.

Referenties:

Ondersteuning voor app-snelkoppelingen in het manifestvenster

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

Bekijk Krijg dingen snel gedaan met app-snelkoppelingen voor meer informatie.

App-snelkoppelingen in het manifestvenster.

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 .