Nieuw in DevTools, Chrome 127

Sofia Emelianova
Sofia Emelianova
GitHub

Het tabblad Stijlen koppelt nu expliciete anker-ID's en impliciete ankers aan hun nodes, zodat je de functie ankerpositionering makkelijker kunt debuggen.

De expliciete en impliciete ankers voor en na de koppeling.

Daarnaast linkt de kenmerkwaarde popovertarget nu naar het element popover in het DOM.

De situatie voor en na de koppeling van popovertarget aan het popover-element.

Verbeteringen in het deelvenster Bronnen

Deze versie bevat verschillende verbeteringen in het deelvenster Bronnen.

Verbeterde functie Nooit pauzeren hier

Met de optie Nooit onderbreken hier kun je voorkomen dat de Debugger steeds opnieuw op dezelfde regel wordt onderbroken. Zo kun je makkelijker werken met irrelevante breekpunten die herhaaldelijk worden geactiveerd. In deze versie is deze functie verbeterd en werkt deze nu voor:

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

Zo werkt de workflow:

Chromium-probleem: 40924349.

Nieuwe event-listeners voor scrolluitlijning

De lijst Bronnen > Event-listener-breakpoints > Beheer krijgt 2 listeners die gerelateerd zijn aan scrolluitlijning: scrollsnapchange en scrollsnapchanging. Deze gebeurtenissen worden geactiveerd als u de scrollcontainer zo scrollt dat deze wordt uitgelijnd met een nieuw element.

De gebeurtenislisteners voor en na het toevoegen van scrolluitlijning.

Chromium-probleem: 40286359.

Verbeteringen in het deelvenster Netwerk

Deze versie bevat verschillende verbeteringen in het deelvenster Netwerk.

Voorinstellingen voor netwerkbeperking geüpdatet

Het deelvenster Netwerk krijgt geüpdatete voorinstellingen voor beperking: nieuw Snel 4G, Snel 3G is hernoemd naar Langzaam 4G en Langzaam 3G is hernoemd naar 3G. Dit komt beter overeen met de voorinstellingen van Lighthouse.

De voor- en na-update van voorinstellingen voor netwerkbeperking.

Chromium-probleem: 342406608.

Informatie over servicemedewerkers in aangepaste velden van de HAR-indeling

Als je het netwerklogboek exporteert naar een HAR-indeling, kun je nu de informatie over servicemedewerkers, waaronder timings, bekijken als aangepaste velden (met een underscore als voorvoegsel). U vindt bijvoorbeeld de volgende nieuwe velden in het logboek:

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

Chromium-probleem: 342406608.

WebSocket-gebeurtenissen sturen en krijgen in het deelvenster Prestaties

Net als andere WebSocket-gebeurtenissen legt het deelvenster Prestaties nu de gebeurtenissen WebSocket-bericht sturen en WebSocket-bericht ontvangen vast en toont deze in de prestatietracering. Voorbeeld:

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

Chromium-probleem: 40286129.

Diverse hoogtepunten

Dit zijn enkele opmerkelijke oplossingen en verbeteringen in deze release:

  • Toegankelijkheid: Schermlezers kondigen nu de content van berichten in de Console aan als je door het logboek scrollt met de pijl-omhoog en pijl-omlaag (344484979).
  • Bronnen:
    • Pagina: De menuoptie Opslaan als slaat Wasm-modulebestanden nu op als geldige wasm-binaire bestanden in plaats van Base64-tekst (40784130).
    • Aanroepstack: Het achtervoegsel (async) is verwijderd uit de beschrijvingen van asynchrone aanroepframes en de markering is gewijzigd van cursief in vet (343750870).
  • Geheugen: De onnodige InternalNodes met grootte nul is verwijderd uit het Overzicht van de momentopname van de heap (340200025).
  • Netwerk: Er is een bug opgelost waardoor het voorbeeld van content van streamingreacties niet werd getoond voor verzoeken die net waren gestart, maar nog geen responseReceived-gebeurtenis hadden gekregen (338340752).
  • Prestaties:
    • Selector Stats: Er is een verklarende tooltip toegevoegd voor de kolom %-of-Slow-Path-Non-Matches (324282954).
    • Modus voor trackconfiguratie: De knop Instellen van tracks afronden is verplaatst naar rechtsonder (345256274).
  • Console: Er is een bug opgelost waardoor meerdere identieke consoleberichten werden getoond als je navigeerde met de cache voor terug/vooruit (40894153).
  • Instellingen: Er zijn helpericonen toegevoegd naast alle tabbladen.

De voorbeeldkanalen downloaden

Overweeg Chrome Canary, Dev of Bèta te gebruiken als je standaardbrowser voor ontwikkeling. Deze previewkanalen geven je toegang tot de nieuwste DevTools-functies, laten je geavanceerde webplatform-API's testen en helpen je problemen op je site te vinden voordat je gebruikers dat doen.

Contact opnemen met het Chrome DevTools-team

Gebruik de volgende opties om de nieuwe functies, updates of iets anders over DevTools te bespreken.

Nieuw in DevTools

Een lijst van alles wat is behandeld in de serie Wat is er nieuw in DevTools.