Wat is er nieuw in DevTools (Chrome 119)

Sofia Emelianova
Sofia Emelianova

Verbeterde @property sectie in Elementen > Stijlen

Bewerkbare @property

Je kunt de CSS-at-regel @property nu bewerken in het bijbehorende gedeelte in het paneel Elementen > Stijlen .

Het verschil tussen voor en na het bewerkbaar maken van de eigenschapsregel.

Chromium-probleem: 1471123 .

Er worden problemen gemeld met ongeldige @property regels.

Het tabblad 'Problemen ' meldt nu problemen met ongeldige declaraties in @property regels.

Er is een probleem met de eigendomsregel gemeld in het tabblad Problemen.

Chromium-probleem: 1473283 .

Bijgewerkte lijst met apparaten die geëmuleerd kunnen worden.

De user agent-strings in Instellingen. De instellingen onder ' Apparaten' zijn bijgewerkt om het gemiddelde gebruik van browsers en besturingssystemen weer te geven. Je kunt nu meer van de meest recente apparaten emuleren in de apparaatmodus .

De apparatenlijst vóór en na het bijwerken.

Chromium-probleem: 1479733 .

Netjes opmaken van inline JSON in scripttags in Sources

Het paneel 'Bronnen' ondersteunt nu het mooi opmaken van inline JSON in <script> HTML-tags voor eenvoudiger debuggen.

De JSON-gegevens vóór en na het netjes opmaken van de tekst in de scripttag.

Chromium-problemen: 406900 , 1473875 .

Automatisch aanvullen van privévelden in de console

Je kunt nu privéklassevelden automatisch aanvullen wanneer je ze buiten de klassescope in de console evalueert.

De voor- en na-ondersteuning voor automatisch aanvullen van privéklassevelden buiten het bereik van de klasse.

Chromium-problemen: 1483848 , 1381806 .

Lighthouse 11.1.0

Het Lighthouse- paneel draait nu op Lighthouse 11.1.0. Bekijk de volledige lijst met wijzigingen .

Om de basisprincipes van het gebruik van het Lighthouse- paneel in DevTools te leren, raadpleegt u Lighthouse: Websitesnelheid optimaliseren .

Chromium-problemen: 772558 .

Toegankelijkheidsverbeteringen

Schermlezers zullen nu het volgende voorlezen:

  • Waarschuwingen en fouten in de console .
  • De tekst in het dialoogvenster 'Vertrouwt u deze code?' wanneer u code plakt in de console of in de broncode .

Daarnaast zijn in het toepassingspaneel contrastproblemen met links in de modus met hoog contrast verholpen.

Chromium-problemen: 1485257 , 1486643 , 1485263 .

WebSQL wordt uitgefaseerd

Het gedeelte 'Applicatie > Web SQL' wordt verwijderd in Chrome 123 omdat de Web SQL Database API niet langer wordt onderhouden . Deze versie voegt een waarschuwing toe aan het gedeelte over de aanstaande verwijdering.

De waarschuwing over het afschaffen van Web SQL.

Zie voor meer informatie: Web SQL afschaffen en verwijderen .

Chromium-problemen: 1485966 .

Validatie van de beeldverhouding van schermafbeeldingen in Toepassing > Manifest

In het gedeelte Applicatie > Manifest wordt nu gecontroleerd of de schermafbeeldingen van uw webapp met dezelfde vormfactor ( wide of narrow ) dezelfde beeldverhouding hebben.

Een waarschuwing over de onjuiste beeldverhouding van screenshots met dezelfde vormfactor.

Zie voor meer informatie Debug Progressive Web Apps en Add a web app manifest .

Het DevTools-team is Alexey Rodionov zeer dankbaar voor het doorvoeren van deze wijziging en andere verbeteringen aan manifestwaarschuwingen in de vorige versie.

Chromium-probleem: 1476656 .

Diverse hoogtepunten

Dit zijn enkele noemenswaardige verbeteringen en bugfixes in deze release:

  • Elementen :
    • De kleurstalen voor de animatietimingfunctie worden niet weergegeven voor CSS-eigenschappen in de lange notatie onder de uitbreidbare eigenschappen in de korte notatie ( 1149182 ).
    • De automatische aanvulling voor contain-intrinsic-* geeft nu niet langer de onjuiste enkele auto waarde weer, omdat het auto <length> zou moeten zijn ( 1480415 ).
    • Ondersteuning voor verouderde en ongeldige -webkit-* eigenschappen is verwijderd ( 1086089 , 1030765 ).
  • Breakpoints : De bug waarbij het dialoogvenster voor het bewerken van breakpoints verdween wanneer het breakpointtype werd gewijzigd, is verholpen ( 1485782 ).
  • Prestatie :
    • De fout bij het parseren van kleuren tijdens de uitvoeringsopname is verholpen ( 1480205 ).
    • De bug waarbij LCP niet werd weergegeven in het tijdschema is verholpen ( 1487136 ).
  • Netwerk : De kolom 'Ingestelde cookies' toont nu het juiste aantal ingestelde cookies, exclusief geblokkeerde cookies ( 1486903 ).
  • DevTools-extensies worden nu geladen na navigatie naar een niet-geblokkeerde host ( 1476264 ).
  • De bug met de onjuiste scriptuitvoeringscontext voor extensies is verholpen ( 1275331 ).

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