Wat is er nieuw in DevTools, Chrome 127

Sofia Emelianova
Sofia Emelianova
GitHub

Om het debuggen van de ankerpositionering te vereenvoudigen, koppelt het tabblad Stijlen nu expliciete anker-ID's en impliciete ankers aan hun respectievelijke knooppunten.

De expliciete en impliciete ankers vóór en na de koppeling.

Bovendien verwijst de waarde van het attribuut popovertarget nu naar het bijbehorende popover element in de DOM.

De situatie vóór en na het koppelen van popovertarget aan het bijbehorende popover-element.

Verbeteringen aan het bronnenpaneel

Deze versie bevat diverse verbeteringen aan het paneel 'Bronnen '.

Verbeterde 'Hier nooit pauzeren'-functie

Met de optie 'Nooit pauzeren' voorkomt u dat de debugger steeds opnieuw op dezelfde regel pauzeert. Dit maakt het gemakkelijker om te werken met irrelevante breakpoints die herhaaldelijk worden geactiveerd. Deze versie verbetert deze functionaliteit en werkt nu voor:

  • Uitzonderingen of afwijzingen van beloftes door ingebouwde functies.
  • Het "annuleren" van breakpoints voor DOM-, fetch/XHR- en CSP-schendingen.
  • Bij het demonteren van Wasm.

Bekijk de workflow in actie:

Chromium-probleem: 40924349 .

Nieuwe scroll snap event listeners

De lijst met bronnen > gebeurtenisluisteraars > besturingselementen bevat twee luisteraars die te maken hebben met scroll-snap : scrollsnapchange en scrollsnapchanging . Deze gebeurtenissen worden geactiveerd wanneer u de scrollcontainer op een manier scrollt waardoor deze naar een nieuw element springt.

De situatie vóór en na het toevoegen van gebeurtenislisteners die verband houden met scroll-snap.

Chromium-probleem: 40286359 .

Verbeteringen aan het netwerkpaneel

Deze versie bevat diverse verbeteringen aan het netwerkpaneel .

Bijgewerkte voorinstellingen voor netwerkbeperking

Het netwerkpaneel krijgt bijgewerkte bandbreedtebeperkingsinstellingen: een nieuwe optie voor Snel 4G , Snel 3G hernoemd naar Langzaam 4G en Langzaam 3G hernoemd naar 3G . Dit sluit beter aan bij de instellingen van Lighthouse .

De netwerkbeperkingsinstellingen vóór en na de update.

Chromium-probleem: 342406608 .

Informatie over servicemedewerkers in aangepaste velden van het HAR-formaat.

Bij het exporteren van het netwerklogboek naar een HAR-formaat kunt u nu de informatie met betrekking tot service workers, inclusief timings, als aangepaste velden (voorzien van een underscore) bekijken. U kunt bijvoorbeeld de volgende nieuwe velden in het logboek aantreffen:

...
"response": {
  ...
  "_fetchedViaServiceWorker": true,
  "_responseCacheStorageCacheName": "V1",
  "_serviceWorkerResponseSource": "cache-storage"
}
...
"timings": {
  ...
  "_workerStart": -1,
  "_workerReady": -1,
  "_workerFetchStart": -1,
  "_workerRespondWithSettled": -1
}
...

Chromium-probleem: 342406608 .

Verzend en ontvang WebSocket-gebeurtenissen in het Prestatiepaneel

Net als bij andere WebSocket-gebeurtenissen registreert het prestatiepaneel nu de gebeurtenissen 'WebSocket-bericht verzenden' en 'WebSocket-bericht ontvangen' en toont deze in de prestatietrace. Bijvoorbeeld:

De gebeurtenis 'WebSocket-bericht ontvangen' is vastgelegd in de prestatietrace.

Chromium-probleem: 40286129 .

Diverse hoogtepunten

Dit zijn enkele noemenswaardige verbeteringen en bugfixes in deze release:

  • Toegankelijkheid : Schermlezers kondigen nu de inhoud van berichten in de console aan wanneer er met de pijltoetsen omhoog en omlaag door het logboek wordt gescrold ( 344484979 ).
  • Bronnen :
    • Pagina : De menuoptie 'Opslaan als ' slaat Wasm-modulebestanden nu op als geldige Wasm-binaire bestanden in plaats van Base64-tekst ( 40784130 ).
    • Oproepstapel : Het achtervoegsel (async) is verwijderd uit de beschrijvingen van asynchrone oproepframes, de markering ervan is gewijzigd van cursief naar vetgedrukt ( 343750870 ).
  • Geheugen : De onnodige InternalNodes met grootte nul zijn verwijderd uit het overzicht van de heapsnapshot ( 340200025 ).
  • Netwerk : Er is een bug verholpen die het voorvertonen van de inhoud van streamingreacties verhinderde voor verzoeken die net waren gestart maar nog geen responseReceived gebeurtenis hadden ontvangen ( 338340752 ).
  • Prestatie :
    • Selectorstatistieken : Er is een verklarende tooltip toegevoegd voor de kolom %-of-Slow-Path-Non-Matches ( 324282954 ).
    • Trackconfiguratiemodus : De knop 'Configuratie van tracks voltooien' is verplaatst naar de rechteronderhoek ( 345256274 ).
  • Console : Er is een bug verholpen die meerdere identieke consoleberichten weergaf bij het navigeren met behulp van de back/forward-cache ( 40894153 ).
  • Instellingen : Er zijn hulppictogrammen toegevoegd naast alle tabbladen.

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