Wat is er nieuw in DevTools, Chrome 136,Wat is er nieuw in DevTools, Chrome 136,Wat is er nieuw in DevTools, Chrome 136,Wat is er nieuw in DevTools, Chrome 136

Sofia Emelianova
Sofia Emelianova

Verbeteringen in het prestatiepaneel

Deze versie brengt een aantal verbeteringen aan in het Prestatiepaneel .

Nieuwe prestatie-inzichten

Het tabblad Prestaties > Inzichten krijgt nieuwe inzichten:

  • Moderne HTTP die verzoeken benadrukt die het oude HTTP/1.1-protocol gebruiken.
  • Gebruik efficiënte cachelevensduur die verzoeken benadrukken die baat kunnen hebben bij een langere cachelevensduur en de laadtijd van uw website versnellen.
  • Lettertypeweergave die u de geschatte tijdbesparing laat zien als u font-display optimaliseert.

Drie nieuwe inzichten op het tabblad Inzichten.

Klik om te markeren

U kunt nu op items klikken in de tabellen Summary , Bottom-up , Call tree en Event log om de corresponderende gebeurtenissen in de tracering gemarkeerd te houden en de rest te dimmen terwijl u door de prestatietracering bladert.

Servertijden in Samenvatting van netwerkverzoeken

Op het tabblad Samenvatting in het paneel Prestaties ziet u nu servertimings voor netwerkverzoeken die renderingtechnologieën aan de serverzijde implementeren.

De tabel 'Servertimings' in de Samenvatting van een netwerkverzoek.

Het paneel Prestaties haalt de gegevens uit de header-header van het Server-Timing -antwoord .

Cookies filteren in 'Privacy en beveiliging'

De tabel in de sectie Privacy en beveiliging > Privacy > Cookies van derden krijgt een filter, zodat u sneller de cookies kunt vinden waarin u geïnteresseerd bent.

Het filter in de tabel 'Cookies van derden'.

Maten in kB-eenheden in tabellen over panelen

Om eenheden binnen dezelfde context hetzelfde te houden, tonen tabellen in de panelen Netwerk en Geheugen en de 1p/3p-tabel in Prestaties > Samenvatting nu alle grootten in kB. Hierdoor kunt u getallen in dezelfde kolom en tussen panelen rechtstreeks vergelijken, in plaats van dat u MB versus kB versus B-eenheden in de gaten hoeft te houden.

De voor en na verenigende maateenheden.

Automatisch aanvullen ondersteunt corner-shape en corner-*-shape in Elementen > Stijlen

Automatisch aanvullen in Elementen > Stijlen kan nu de overeenkomstige waarden voor corner-shape en corner-*-shape eigenschappen voorstellen.

De autocomplete-opties voor de eigenschap 'corner-shape'.

Chroomuitgave: 402346406 .

Experimenteel: problemen benadrukken met elementen en attributen in DOM

Met deze nieuwe experimentele functie kan het paneel Elementen nu problemen met DOM-elementen of attributen markeren met een rode kronkelige onderstreping. Beweeg de muis over dergelijke elementen of attributen om tooltip te zien met een link naar de corresponderende fout in het paneel Problemen .

Het voor en na markeren van een DOM-probleem in de DOM-structuur met tooltip en een link naar het paneel Problemen.

Het paneel Elementen markeert momenteel ongeldige afstammelingen van <select> , niet-overeenkomende ARIA-definities en ongeldige ARIA-attributen.

Chroomuitgave: 378738916 .

Vuurtoren 12.5.0

Het Lighthouse- paneel draait nu Lighthouse 12.5.0.

Het meest opvallende is dat legacy-javascript in deze versie nu Baseline gebruikt in plaats van esmodules . Bekijk de volledige lijst met wijzigingen .

Zie Lighthouse: Websitesnelheid optimaliseren voor meer informatie over de basisprincipes van het gebruik van het Lighthouse -paneel in DevTools.

Chroomuitgave: 40543651 .

Diverse hoogtepunten

Dit zijn enkele opmerkelijke oplossingen en verbeteringen in deze release:

  • Prestaties > Inzichten > Netwerkafhankelijkheidsboom : toont nu de tijd voor alle netwerkverzoeken in de netwerkboom ( 400708304 ).
    • Netwerkafhankelijkheidsboom : toont nu de tijd voor alle netwerkverzoeken in de netwerkboom ( 400708304 ).
  • Animaties : Een bug opgelost die ervoor zorgde dat losse elementen in het geheugenpaneel verschenen vanwege vastgelegde animaties 400635410 .
  • Recorder : gebruikt nu hetzelfde bevestigingsvenster als bij het plakken van code wanneer de opname voor de eerste keer wordt uitgevoerd.
  • Lagen : Toont nu het totale aantal lagen en het totale geheugen voor alle zichtbare lagen in de statusbalk onderaan.
  • Geheugen : De initialisatie van heap-snapshots is verbeterd door taken tussen twee werkrollen te parallelliseren in plaats van er één te gebruiken ( 42203857 ).
  • Problemen : rapporteert nu CORS-fouten (Local Network Access (LNA)) ( 395895368 ).
  • Toegankelijkheid :
    • Tooltips : Verschijnt nu bij sneltoetsindrukken in plaats van focus ( 396311936 ).
    • Elementen > Stijlen : De functie var() kan nu via het toetsenbord worden gebruikt, wat betekent dat u --custom-property kunt selecteren en op Enter kunt drukken om naar het linkdoel ervan te gaan ( 401212692 ).

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 .

,

Sofia Emelianova
Sofia Emelianova

Verbeteringen in het prestatiepaneel

Deze versie brengt een aantal verbeteringen aan in het Prestatiepaneel .

Nieuwe prestatie-inzichten

Het tabblad Prestaties > Inzichten krijgt nieuwe inzichten:

  • Moderne HTTP die verzoeken benadrukt die het oude HTTP/1.1-protocol gebruiken.
  • Gebruik efficiënte cachelevensduur die verzoeken benadrukken die baat kunnen hebben bij een langere cachelevensduur en de laadtijd van uw website versnellen.
  • Lettertypeweergave die u de geschatte tijdbesparing laat zien als u font-display optimaliseert.

Drie nieuwe inzichten op het tabblad Inzichten.

Klik om te markeren

U kunt nu op items klikken in de tabellen Summary , Bottom-up , Call tree en Event log om de corresponderende gebeurtenissen in de tracering gemarkeerd te houden en de rest te dimmen terwijl u door de prestatietracering bladert.

Servertijden in Samenvatting van netwerkverzoeken

Op het tabblad Samenvatting in het paneel Prestaties ziet u nu servertimings voor netwerkverzoeken die renderingtechnologieën aan de serverzijde implementeren.

De tabel 'Servertimings' in de Samenvatting van een netwerkverzoek.

Het paneel Prestaties haalt de gegevens uit de header-header van het Server-Timing -antwoord .

Cookies filteren in 'Privacy en beveiliging'

De tabel in de sectie Privacy en beveiliging > Privacy > Cookies van derden krijgt een filter, zodat u sneller de cookies kunt vinden waarin u geïnteresseerd bent.

Het filter in de tabel 'Cookies van derden'.

Maten in kB-eenheden in tabellen over panelen

Om eenheden binnen dezelfde context hetzelfde te houden, tonen tabellen in de panelen Netwerk en Geheugen en de 1p/3p-tabel in Prestaties > Samenvatting nu alle grootten in kB. Hierdoor kunt u getallen in dezelfde kolom en tussen panelen rechtstreeks vergelijken, in plaats van dat u MB versus kB versus B-eenheden in de gaten hoeft te houden.

De voor en na verenigende maateenheden.

Automatisch aanvullen ondersteunt corner-shape en corner-*-shape in Elementen > Stijlen

Automatisch aanvullen in Elementen > Stijlen kan nu de overeenkomstige waarden voor corner-shape en corner-*-shape eigenschappen voorstellen.

De autocomplete-opties voor de eigenschap 'corner-shape'.

Chroomuitgave: 402346406 .

Experimenteel: problemen benadrukken met elementen en attributen in DOM

Met deze nieuwe experimentele functie kan het paneel Elementen nu problemen met DOM-elementen of attributen markeren met een rode kronkelige onderstreping. Beweeg de muis over dergelijke elementen of attributen om tooltip te zien met een link naar de corresponderende fout in het paneel Problemen .

Het voor en na markeren van een DOM-probleem in de DOM-structuur met tooltip en een link naar het paneel Problemen.

Het paneel Elementen markeert momenteel ongeldige afstammelingen van <select> , niet-overeenkomende ARIA-definities en ongeldige ARIA-attributen.

Chroomuitgave: 378738916 .

Vuurtoren 12.5.0

Het Lighthouse- paneel draait nu Lighthouse 12.5.0.

Het meest opvallende is dat legacy-javascript in deze versie nu Baseline gebruikt in plaats van esmodules . Bekijk de volledige lijst met wijzigingen .

Zie Lighthouse: Websitesnelheid optimaliseren voor meer informatie over de basisprincipes van het gebruik van het Lighthouse -paneel in DevTools.

Chroomuitgave: 40543651 .

Diverse hoogtepunten

Dit zijn enkele opmerkelijke oplossingen en verbeteringen in deze release:

  • Prestaties > Inzichten > Netwerkafhankelijkheidsboom : toont nu de tijd voor alle netwerkverzoeken in de netwerkboom ( 400708304 ).
    • Netwerkafhankelijkheidsboom : toont nu de tijd voor alle netwerkverzoeken in de netwerkboom ( 400708304 ).
  • Animaties : Een bug opgelost die ervoor zorgde dat losse elementen in het geheugenpaneel verschenen vanwege vastgelegde animaties 400635410 .
  • Recorder : gebruikt nu hetzelfde bevestigingsvenster als bij het plakken van code wanneer de opname voor de eerste keer wordt uitgevoerd.
  • Lagen : Toont nu het totale aantal lagen en het totale geheugen voor alle zichtbare lagen in de statusbalk onderaan.
  • Geheugen : De initialisatie van heap-snapshots is verbeterd door taken tussen twee werkrollen te parallelliseren in plaats van er één te gebruiken ( 42203857 ).
  • Problemen : rapporteert nu CORS-fouten (Local Network Access (LNA)) ( 395895368 ).
  • Toegankelijkheid :
    • Tooltips : Verschijnt nu bij sneltoetsindrukken in plaats van focus ( 396311936 ).
    • Elementen > Stijlen : De functie var() kan nu via het toetsenbord worden gebruikt, wat betekent dat u --custom-property kunt selecteren en op Enter kunt drukken om naar het linkdoel ervan te gaan ( 401212692 ).

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 .

,

Sofia Emelianova
Sofia Emelianova

Verbeteringen in het prestatiepaneel

Deze versie brengt een aantal verbeteringen aan in het Prestatiepaneel .

Nieuwe prestatie-inzichten

Het tabblad Prestaties > Inzichten krijgt nieuwe inzichten:

  • Moderne HTTP die verzoeken benadrukt die het oude HTTP/1.1-protocol gebruiken.
  • Gebruik efficiënte cachelevensduur die verzoeken benadrukken die baat kunnen hebben bij een langere cachelevensduur en de laadtijd van uw website versnellen.
  • Lettertypeweergave die u de geschatte tijdbesparing laat zien als u font-display optimaliseert.

Drie nieuwe inzichten op het tabblad Inzichten.

Klik om te markeren

U kunt nu op items klikken in de tabellen Summary , Bottom-up , Call tree en Event log om de corresponderende gebeurtenissen in de tracering gemarkeerd te houden en de rest te dimmen terwijl u door de prestatietracering bladert.

Servertijden in Samenvatting van netwerkverzoeken

Op het tabblad Samenvatting in het paneel Prestaties ziet u nu servertimings voor netwerkverzoeken die renderingtechnologieën aan de serverzijde implementeren.

De tabel 'Servertimings' in de Samenvatting van een netwerkverzoek.

Het paneel Prestaties haalt de gegevens uit de header-header van het Server-Timing -antwoord .

Cookies filteren in 'Privacy en beveiliging'

De tabel in de sectie Privacy en beveiliging > Privacy > Cookies van derden krijgt een filter, zodat u sneller de cookies kunt vinden waarin u geïnteresseerd bent.

Het filter in de tabel 'Cookies van derden'.

Maten in kB-eenheden in tabellen over panelen

Om eenheden binnen dezelfde context hetzelfde te houden, tonen tabellen in de panelen Netwerk en Geheugen en de 1p/3p-tabel in Prestaties > Samenvatting nu alle grootten in kB. Hierdoor kunt u getallen in dezelfde kolom en tussen panelen rechtstreeks vergelijken, in plaats van dat u MB versus kB versus B-eenheden in de gaten hoeft te houden.

De voor en na verenigende maateenheden.

Automatisch aanvullen ondersteunt corner-shape en corner-*-shape in Elementen > Stijlen

Automatisch aanvullen in Elementen > Stijlen kan nu de overeenkomstige waarden voor corner-shape en corner-*-shape eigenschappen voorstellen.

De autocomplete-opties voor de eigenschap 'corner-shape'.

Chroomuitgave: 402346406 .

Experimenteel: problemen benadrukken met elementen en attributen in DOM

Met deze nieuwe experimentele functie kan het paneel Elementen nu problemen met DOM-elementen of attributen markeren met een rode kronkelige onderstreping. Beweeg de muis over dergelijke elementen of attributen om tooltip te zien met een link naar de corresponderende fout in het paneel Problemen .

Het voor en na markeren van een DOM-probleem in de DOM-structuur met tooltip en een link naar het paneel Problemen.

Het paneel Elementen markeert momenteel ongeldige afstammelingen van <select> , niet-overeenkomende ARIA-definities en ongeldige ARIA-attributen.

Chroomuitgave: 378738916 .

Vuurtoren 12.5.0

Het Lighthouse- paneel draait nu Lighthouse 12.5.0.

Het meest opvallende is dat legacy-javascript in deze versie nu Baseline gebruikt in plaats van esmodules . Bekijk de volledige lijst met wijzigingen .

Zie Lighthouse: Websitesnelheid optimaliseren voor meer informatie over de basisprincipes van het gebruik van het Lighthouse -paneel in DevTools.

Chroomuitgave: 40543651 .

Diverse hoogtepunten

Dit zijn enkele opmerkelijke oplossingen en verbeteringen in deze release:

  • Prestaties > Inzichten > Netwerkafhankelijkheidsboom : toont nu de tijd voor alle netwerkverzoeken in de netwerkboom ( 400708304 ).
    • Netwerkafhankelijkheidsboom : toont nu de tijd voor alle netwerkverzoeken in de netwerkboom ( 400708304 ).
  • Animaties : Een bug opgelost die ervoor zorgde dat losse elementen in het geheugenpaneel verschenen vanwege vastgelegde animaties 400635410 .
  • Recorder : gebruikt nu hetzelfde bevestigingsvenster als bij het plakken van code wanneer de opname voor de eerste keer wordt uitgevoerd.
  • Lagen : Toont nu het totale aantal lagen en het totale geheugen voor alle zichtbare lagen in de statusbalk onderaan.
  • Geheugen : De initialisatie van heap-snapshots is verbeterd door taken tussen twee werkrollen te parallelliseren in plaats van er één te gebruiken ( 42203857 ).
  • Problemen : rapporteert nu CORS-fouten (Local Network Access (LNA)) ( 395895368 ).
  • Toegankelijkheid :
    • Tooltips : Verschijnt nu bij sneltoetsindrukken in plaats van focus ( 396311936 ).
    • Elementen > Stijlen : De functie var() kan nu via het toetsenbord worden gebruikt, wat betekent dat u --custom-property kunt selecteren en op Enter kunt drukken om naar het linkdoel ervan te gaan ( 401212692 ).

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 .

,

Sofia Emelianova
Sofia Emelianova

Verbeteringen in het prestatiepaneel

Deze versie brengt een aantal verbeteringen aan in het Prestatiepaneel .

Nieuwe prestatie-inzichten

Het tabblad Prestaties > Inzichten krijgt nieuwe inzichten:

  • Moderne HTTP die verzoeken benadrukt die het oude HTTP/1.1-protocol gebruiken.
  • Gebruik efficiënte cachelevensduur die verzoeken benadrukken die baat kunnen hebben bij een langere cachelevensduur en de laadtijd van uw website versnellen.
  • Lettertypeweergave die u de geschatte tijdbesparing laat zien als u font-display optimaliseert.

Drie nieuwe inzichten op het tabblad Inzichten.

Klik om te markeren

U kunt nu op items klikken in de tabellen Summary , Bottom-up , Call tree en Event log om de corresponderende gebeurtenissen in de tracering gemarkeerd te houden en de rest te dimmen terwijl u door de prestatietracering bladert.

Servertijden in Samenvatting van netwerkverzoeken

Op het tabblad Samenvatting in het paneel Prestaties ziet u nu servertimings voor netwerkverzoeken die renderingtechnologieën aan de serverzijde implementeren.

De tabel 'Servertimings' in de Samenvatting van een netwerkverzoek.

Het paneel Prestaties haalt de gegevens uit de header-header van het Server-Timing -antwoord .

Cookies filteren in 'Privacy en beveiliging'

De tabel in de sectie Privacy en beveiliging > Privacy > Cookies van derden krijgt een filter, zodat u sneller de cookies kunt vinden waarin u geïnteresseerd bent.

Het filter in de tabel 'Cookies van derden'.

Maten in kB-eenheden in tabellen over panelen

Om eenheden binnen dezelfde context hetzelfde te houden, tonen tabellen in de panelen Netwerk en Geheugen en de 1p/3p-tabel in Prestaties > Samenvatting nu alle grootten in kB. Hierdoor kunt u getallen in dezelfde kolom en tussen panelen rechtstreeks vergelijken, in plaats van dat u MB versus kB versus B-eenheden in de gaten hoeft te houden.

De voor en na verenigende maateenheden.

Automatisch aanvullen ondersteunt corner-shape en corner-*-shape in Elementen > Stijlen

Automatisch aanvullen in Elementen > Stijlen kan nu de overeenkomstige waarden voor corner-shape en corner-*-shape eigenschappen voorstellen.

De autocomplete-opties voor de eigenschap 'corner-shape'.

Chroomuitgave: 402346406 .

Experimenteel: problemen benadrukken met elementen en attributen in DOM

Met deze nieuwe experimentele functie kan het paneel Elementen nu problemen met DOM-elementen of attributen markeren met een rode kronkelige onderstreping. Beweeg de muis over dergelijke elementen of attributen om tooltip te zien met een link naar de corresponderende fout in het paneel Problemen .

Het voor en na markeren van een DOM-probleem in de DOM-structuur met tooltip en een link naar het paneel Problemen.

Het paneel Elementen markeert momenteel ongeldige afstammelingen van <select> , niet-overeenkomende ARIA-definities en ongeldige ARIA-attributen.

Chroomuitgave: 378738916 .

Vuurtoren 12.5.0

Het Lighthouse- paneel draait nu Lighthouse 12.5.0.

Het meest opvallende is dat legacy-javascript in deze versie nu Baseline gebruikt in plaats van esmodules . Bekijk de volledige lijst met wijzigingen .

Zie Lighthouse: Websitesnelheid optimaliseren voor meer informatie over de basisprincipes van het gebruik van het Lighthouse -paneel in DevTools.

Chroomuitgave: 40543651 .

Diverse hoogtepunten

Dit zijn enkele opmerkelijke oplossingen en verbeteringen in deze release:

  • Prestaties > Inzichten > Netwerkafhankelijkheidsboom : toont nu de tijd voor alle netwerkverzoeken in de netwerkboom ( 400708304 ).
    • Netwerkafhankelijkheidsboom : toont nu de tijd voor alle netwerkverzoeken in de netwerkboom ( 400708304 ).
  • Animaties : Een bug opgelost die ervoor zorgde dat losse elementen in het geheugenpaneel verschenen vanwege vastgelegde animaties 400635410 .
  • Recorder : gebruikt nu hetzelfde bevestigingsvenster als bij het plakken van code wanneer de opname voor de eerste keer wordt uitgevoerd.
  • Lagen : Toont nu het totale aantal lagen en het totale geheugen voor alle zichtbare lagen in de statusbalk onderaan.
  • Geheugen : De initialisatie van heap-snapshots is verbeterd door taken tussen twee werkrollen te parallelliseren in plaats van er één te gebruiken ( 42203857 ).
  • Problemen : rapporteert nu CORS-fouten (Local Network Access (LNA)) ( 395895368 ).
  • Toegankelijkheid :
    • Tooltips : Verschijnt nu bij sneltoetsindrukken in plaats van focus ( 396311936 ).
    • Elementen > Stijlen : De functie var() kan nu via het toetsenbord worden gebruikt, wat betekent dat u --custom-property kunt selecteren en op Enter kunt drukken om naar het linkdoel ervan te gaan ( 401212692 ).

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 .