Wat is er nieuw in DevTools, Chrome 127

Sofia Emelianova
Sofia Emelianova
GitHub

Om u te helpen fouten in de ankerpositioneringsfunctie eenvoudiger op te sporen, koppelt het tabblad Stijlen nu expliciete anker-ID's en impliciete ankers aan hun knooppunten.

Het voor en na het koppelen van expliciete en impliciete ankers.

Bovendien is de attribuutwaarde popovertarget nu gekoppeld aan het popover element in de DOM.

De voor en na het koppelen van popovertarget aan zijn popover-element.

Verbeteringen in het bronnenpaneel

Deze versie brengt verschillende verbeteringen aan in het Bronnenpaneel .

Verbeterd 'Pauzeer hier nooit'

Met de optie 'Hier nooit pauzeren' kunt u voorkomen dat de Debugger steeds opnieuw op dezelfde regel pauzeert. Dit maakt het gemakkelijker om te werken met irrelevante breekpunten die herhaaldelijk worden geactiveerd. Deze versie verbetert deze mogelijkheid en werkt nu voor:

  • Uitzonderingen of afwijzingen van beloften van ingebouwde functies.
  • DOM-, fetch/XHR- en CSP-overtredingsbreekpunten 'annuleren'.
  • In Wasm-demontage.

Bekijk de workflow in actie:

Chroomuitgave: 40924349 .

Nieuwe scroll-snap-gebeurtenislisteners

De lijst Bronnen > Event Listener Breekpunten > Controlelijst krijgt twee scroll-snap -gerelateerde luisteraars: scrollsnapchange en scrollsnapchanging . Deze gebeurtenissen worden geactiveerd wanneer u door de schuifcontainer schuift op een manier die ervoor zorgt dat deze naar een nieuw element springt.

De voor en na het toevoegen van scroll-snap-gerelateerde gebeurtenislisteners.

Chroomuitgave: 40286359 .

Verbeteringen in het netwerkpaneel

Deze versie brengt verschillende verbeteringen aan het netwerkpaneel .

Bijgewerkte voorinstellingen voor netwerkbeperking

Het netwerkpaneel krijgt bijgewerkte throttling-voorinstellingen: nieuwe Fast 4G , Fast 3G hernoemd naar Slow 4G en Slow 3G hernoemd naar 3G . Dit sluit beter aan bij de presets van Lighthouse .

De voor- en na het updaten van de voorinstellingen voor netwerkbeperking.

Chroomuitgave: 342406608 .

Informatie over servicemedewerkers in aangepaste velden van het HAR-formaat

Wanneer u het netwerklogboek naar een HAR-indeling exporteert, kunt u nu de informatie met betrekking tot servicemedewerkers, inclusief tijden, zien als aangepaste velden (voorafgegaan door onderstrepingstekens). U kunt bijvoorbeeld de volgende nieuwe velden in het logboek tegenkomen:

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

Chroomuitgave: 342406608 .

Verzend en ontvang WebSocket-gebeurtenissen in het deelvenster Prestaties

Net als bij andere WebSocket-gebeurtenissen legt het Prestatiepaneel nu de gebeurtenissen WebSocket-bericht verzenden en WebSocket-bericht ontvangen vast en geeft deze weer in de prestatietracering. Bijvoorbeeld:

De gebeurtenis 'Receive WebSocket Message' vastgelegd in de prestatietracering.

Chroomuitgave: 40286129 .

Diverse hoogtepunten

Dit zijn enkele opmerkelijke oplossingen en verbeteringen in deze release:

  • Toegankelijkheid : schermlezers kondigen nu de inhoud van berichten in de console aan wanneer u door het logboek bladert met de pijltoetsen omhoog en omlaag ( 344484979 ).
  • Bronnen :
    • Pagina : De menuoptie Opslaan als slaat nu Wasm-modulebestanden op als geldige wasm-binaire bestanden in plaats van Base64-tekst ( 40784130 ).
    • Oproepstapel : het (async) achtervoegsel verwijderd uit de beschrijvingen van asynchrone oproepframes, de markering ervan is gewijzigd van cursief naar vet ( 343750870 ).
  • Geheugen : de onnodige InternalNodes met nulgrootte verwijderd uit de samenvatting van de heap-snapshot ( 340200025 ).
  • Netwerk : een bug opgelost die de preview van streaming-antwoordinhoud verhinderde voor verzoeken die net waren gestart maar nog geen responseReceived gebeurtenis hadden ontvangen ( 338340752 ).
  • Prestatie :
    • Selectorstatistieken : een verklarende tooltip toegevoegd voor de kolom %-of-Slow-Path-Non-Matches ( 324282954 ).
    • Trackconfiguratiemodus : de knop Configuratie van tracks voltooien is verplaatst naar de rechteronderkant ( 345256274 ).
  • Console : een bug opgelost waarbij meerdere identieke consoleberichten werden weergegeven tijdens het navigeren met behulp van de back/forward-cache ( 40894153 ).
  • Instellingen : Helperpictogrammen toegevoegd naast alle tabbladen.

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 .