Wat is er nieuw in DevTools (Chrome 84)

Kayce Basques

Los siteproblemen op met het nieuwe tabblad Problemen

Het nieuwe tabblad 'Problemen' in de Lade is bedoeld om de meldingsmoeheid en rommeligheid van 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 uitvoerbare manier, linkt naar de betreffende bronnen binnen DevTools en biedt richtlijnen voor het oplossen van de problemen. Na verloop van tijd zullen steeds meer waarschuwingen van Chrome op het tabblad 'Problemen' worden weergegeven in plaats van in de Console, wat de rommeligheid van de Console zou moeten verminderen.

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

Chromium-bug: #1068116

Bekijk toegankelijkheidsinformatie in de tooltip van de inspectiemodus

De tooltips in de inspectiemodus geven nu aan of het element een toegankelijke naam en rol heeft en of de focus via het toetsenbord kan worden weergegeven.

Chromium-bug: #1040025

Updates van het prestatiepaneel

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

Nadat u uw laadprestaties hebt geregistreerd, toont het Prestatiepaneel nu informatie over de Total Blocking Time (TBT) in de voettekst. TBT is een laadprestatiestatistiek die helpt kwantificeren hoe lang het duurt voordat een pagina bruikbaar wordt. Het meet in feite hoe lang een pagina bruikbaar lijkt (omdat de content 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 labstatistiek voor het schatten van First Input Delay, een van Google's nieuwe Core Web Vitals .

Om informatie over de totale blokkeringstijd te verkrijgen, mag u de pagina niet opnieuw laden workflow voor het vastleggen van de laadprestaties van pagina's. Klik in plaats daarvan op Opnemen , laad de pagina handmatig opnieuw, wacht tot de pagina geladen is en stop dan met opnemen. Als u de melding Total Blocking Time: Unavailable ziet, betekent dit dat DevTools niet de benodigde informatie uit de interne profileringsgegevens van Chrome heeft gehaald.

Chromium-bug: #1054381

Layout Shift-gebeurtenissen in de nieuwe sectie Ervaring

De nieuwe sectie 'Ervaring' van het paneel 'Prestaties' helpt u bij het detecteren van lay-outverschuivingen . Cumulatieve lay-outverschuiving (CLS) is een statistiek waarmee u ongewenste visuele instabiliteit kunt kwantificeren en is een van Google's nieuwe Core Web Vitals .

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

Nauwkeurigere belofteterminologie in de console

Bij het loggen van een Promise beschreef de Console de status van de Promise onterecht als resolved :

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

V8-bug: #6751

Updates van het stijlenvenster

Ondersteuning voor het revert -trefwoord

De gebruikersinterface voor automatisch aanvullen van het deelvenster Stijlen detecteert nu het CSS-trefwoord revert , waarmee de getrapte waarde van een eigenschap wordt teruggezet naar de waarde die deze zou hebben gehad als er geen wijzigingen waren aangebracht in de stijl van het element.

Chromium-bug: #1075437

Voorvertoningen van afbeeldingen

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

Chromium-bug: #1040019

Color Picker gebruikt nu spatiegescheiden functionele kleurnotatie

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

Wanneer u kleuren kiest 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 spatiegescheiden argumentsyntaxis.

U ziet de syntaxis ook in het deelvenster Berekend en in de tooltips van de inspectiemodus.

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

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

Chromium-bug: #1072952

Veroudering 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 .

Referenties:

• console.dir()
• $0

Ondersteuning voor app-snelkoppelingen in het Manifest-paneel

App-snelkoppelingen helpen gebruikers om snel veelgebruikte of aanbevolen taken binnen een webapp te starten. Het app-snelkoppelingenmenu 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.

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.

Kayce Basques

Los siteproblemen op met het nieuwe tabblad Problemen

Het nieuwe tabblad 'Problemen' in de Lade is bedoeld om de meldingsmoeheid en rommeligheid van 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 uitvoerbare manier, linkt naar de betreffende bronnen binnen DevTools en biedt richtlijnen voor het oplossen van de problemen. Na verloop van tijd zullen steeds meer waarschuwingen van Chrome op het tabblad 'Problemen' worden weergegeven in plaats van in de Console, wat de rommeligheid van de Console zou moeten verminderen.

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

Chromium-bug: #1068116

Bekijk toegankelijkheidsinformatie in de tooltip van de inspectiemodus

De tooltips in de inspectiemodus geven nu aan of het element een toegankelijke naam en rol heeft en of de focus via het toetsenbord kan worden weergegeven.

Chromium-bug: #1040025

Updates van het prestatiepaneel

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

Nadat u uw laadprestaties hebt geregistreerd, toont het Prestatiepaneel nu informatie over de Total Blocking Time (TBT) in de voettekst. TBT is een laadprestatiestatistiek die helpt kwantificeren hoe lang het duurt voordat een pagina bruikbaar wordt. Het meet in feite hoe lang een pagina bruikbaar lijkt (omdat de content 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 labstatistiek voor het schatten van First Input Delay, een van Google's nieuwe Core Web Vitals .

Om informatie over de totale blokkeringstijd te verkrijgen, mag u de pagina niet opnieuw laden workflow voor het vastleggen van de laadprestaties van pagina's. Klik in plaats daarvan op Opnemen , laad de pagina handmatig opnieuw, wacht tot de pagina geladen is en stop dan met opnemen. Als u de melding Total Blocking Time: Unavailable ziet, betekent dit dat DevTools niet de benodigde informatie uit de interne profileringsgegevens van Chrome heeft gehaald.

Chromium-bug: #1054381

Layout Shift-gebeurtenissen in de nieuwe sectie Ervaring

De nieuwe sectie 'Ervaring' van het paneel 'Prestaties' helpt u bij het detecteren van lay-outverschuivingen . Cumulatieve lay-outverschuiving (CLS) is een statistiek waarmee u ongewenste visuele instabiliteit kunt kwantificeren en is een van Google's nieuwe Core Web Vitals .

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

Nauwkeurigere belofteterminologie in de console

Bij het loggen van een Promise beschreef de Console de status van de Promise onterecht als resolved :

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

V8-bug: #6751

Updates van het stijlenvenster

Ondersteuning voor het revert -trefwoord

De gebruikersinterface voor automatisch aanvullen van het deelvenster Stijlen detecteert nu het CSS-trefwoord revert , waarmee de getrapte waarde van een eigenschap wordt teruggezet naar de waarde die deze zou hebben gehad als er geen wijzigingen waren aangebracht in de stijl van het element.

Chromium-bug: #1075437

Voorvertoningen van afbeeldingen

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

Chromium-bug: #1040019

Color Picker gebruikt nu spatiegescheiden functionele kleurnotatie

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

Wanneer u kleuren kiest 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 spatiegescheiden argumentsyntaxis.

U ziet de syntaxis ook in het deelvenster Berekend en in de tooltips van de inspectiemodus.

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

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

Chromium-bug: #1072952

Veroudering 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 .

Referenties:

• console.dir()
• $0

Ondersteuning voor app-snelkoppelingen in het Manifest-paneel

App-snelkoppelingen helpen gebruikers om snel veelgebruikte of aanbevolen taken binnen een webapp te starten. Het app-snelkoppelingenmenu 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.

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.