Wat is er nieuw in DevTools, Chrome 126

Sofia Emelianova
Sofia Emelianova

Prestatieverbeteringen

Deze versie bevat diverse verbeteringen aan het prestatiepaneel .

Tracks verplaatsen en verbergen met de bijgewerkte trackconfiguratiemodus.

Je kunt nu de trackconfiguratiemodus openen door met de rechtermuisknop op de tracknaam te klikken en 'Tracks configureren' te selecteren. De bewerkingsknop, die extra ruimte in beslag nam, is verwijderd.

De situatie vóór en na het vervangen van de bewerkingsknop door een menuoptie.

In de configuratiemodus voor sporen kunt u de volgorde van sporen wijzigen en ze verbergen. Klik op de pijl omhoog omhoog) of omlaag omlaag) om het spoor te verplaatsen, of klik op uit om het te verbergen. Om de configuratiemodus te verlaten, klikt u onderaan op 'Sporen configureren voltooien' . Deze configuratie blijft behouden voor nieuwe sporen, maar niet voor volgende DevTools-sessies.

Chromium-probleem: 336266699 .

Negeer scripts in het flame chart.

Het flame chart in het hoofdgedeelte biedt nu ondersteuning voor negeerlijsten. Je kunt nu met de rechtermuisknop op een script in het chart klikken en 'Script toevoegen aan negeerlijst' selecteren.

De menuoptie om het script toe te voegen aan de negeerlijst, scripts die als genegeerd zijn gemarkeerd en de bijbehorende regels in de instellingen.

De grafiek vouwt genegeerde scripts samen, markeert ze als 'Op negeerlijst' en voegt ze toe aan de aangepaste uitsluitingsregels in de instellingen Negeerlijst . Genegeerde scripts worden bewaard totdat u ze verwijdert uit de trace of uit de aangepaste uitsluitingsregels .

Chromium-probleem: 336266714 .

Verlaag de CPU-snelheid met een factor 20.

Het menu voor CPU -throttling in de opname-instellingen van het prestatiepaneel krijgt een nieuwe optie voor een vertraging van 20x . Hierdoor kunt u nu prestatieproblemen uit de praktijk nauwkeuriger reproduceren en analyseren, zelfs op krachtige computers.

De situatie vóór en na het toevoegen van de optie '20x slowdown' aan de 'Opname-instellingen'.

Chromium-probleem: 324978881 .

Het paneel met prestatie-inzichten wordt uitgefaseerd.

Het experimentele paneel 'Prestatie-inzichten ' wordt in 2024 uitgefaseerd. Het DevTools-team werkt eraan om de meest nuttige functies ervan te integreren in het paneel 'Prestatie- inzichten'. Het paneel 'Prestatie-inzichten' toont nu een banner bovenaan die u informeert over de aanstaande uitfasering.

De waarschuwingsbanner voor verouderde functies in het paneel 'Prestatie-inzichten'.

Voor meer informatie, zie Prestatietools in 2024 en daarna .

Als u feedback heeft over wat goed werkt, wat niet goed werkt en wat er volgens u beter kan, horen we dat graag .

Plak de volledige koptekststrings om ze te overschrijven.

Bij het overschrijven van headers kunt u nu een volledige headerstring plakken ( HEADER_NAME : VALUE ) en DevTools splitst de string bij : in een headernaam en de bijbehorende waarde.

Bekijk dit in actie in de volgende video.

Bij het bewerken van headers waarschuwt het netwerkpaneel u nu als u andere tekens dan alfanumerieke tekens, koppeltekens en underscores hebt ingevoerd.

De waarschuwing naast een kopnaam met niet-ondersteunde tekens.

Bovendien zijn de overschrijfmenu-opties en de bewerkingsknoppen uitgeschakeld voor chrome:// -URL's, wat overeenkomt met het beoogde gedrag.

Chromium-problemen: 330967147 , 337012362 , 328210785 .

Detecteer overmatig geheugengebruik met nieuwe filters in heap-snapshots.

Heap-snapshots in het geheugenpaneel krijgen nieuwe filters waarmee u veelvoorkomende gevallen van inefficiënt geheugengebruik kunt vinden, zoals dubbele tekenreeksen, objecten die worden vastgehouden door losgekoppelde DOM-knooppunten en de DevTools- console .

De filteropties voor en na het toevoegen van filters voor veelvoorkomende gevallen van inefficiënt geheugengebruik.

Chromium-probleem: 337094903 .

Inspecteer de opslagbuckets in Toepassing > Opslag

U kunt nu opslagbuckets inspecteren in een speciale structuur in het gedeelte Toepassing > Opslag . Deze structuur, die voorheen experimenteel was, is nu standaard ingeschakeld.

De situatie vóór en na het inschakelen van de opslagbucketstructuur in het gedeelte Opslag.

Chromium-probleem: 338094915 .

Schakel waarschuwingen voor zelf-XSS uit met een opdrachtregelparameter.

Als je het gebruik van Chrome automatiseert of DevTools op een andere manier via de commandoregel opent om te debuggen, wil je vaak de self-XSS-waarschuwing uitschakelen die bij elke nieuwe DevTools-sessie verschijnt.

Het self-xss waarschuwingsvenster in de console.

Je kunt dit dialoogvenster nu uitschakelen door de opdrachtregelparameter --unsafely-disable-devtools-self-xss-warnings aan Chrome mee te geven.

Chromium-probleem: 41491762 .

Lighthouse 12.0.0

Het Lighthouse- paneel draait nu op Lighthouse 12.0.0.

Deze update brengt een aantal wijzigingen met zich mee, waaronder het verwijderen van de PWA-categorie, een reorganisatie van de SEO-categorie, het afschaffen van de algemene besparingen, nieuwe audits en wijzigingen in de auditprocedures. 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-probleem: 772558 .

Diverse hoogtepunten

Dit zijn enkele noemenswaardige verbeteringen en bugfixes in deze release:

  • Prestatie :
    • De instellingen voor langzame vastlegging ( Geavanceerde tekeninstrumentatie inschakelen en CSS-selectorstatistieken inschakelen ) worden nu automatisch gewist in de volgende DevTools-sessie.
    • Het tabblad Selector Stats scrollt nu niet meer automatisch naar beneden wanneer u inzoomt op de vlamgrafiek en de gegevens veranderen ( 337999939 ).
  • Console : De sneltoets Ctrl + ` sluit de console in het ladevenster nu alleen als deze actief is ( 40875466 , 328210785 ).
  • Autofill : Adresparsing is gecorrigeerd ( 335409093 , 335409707 ).
  • Toegankelijkheid : Schermlezer-aankondigingen voor gelokaliseerde strings zijn gecorrigeerd ( 324930007 ).

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