Wat is er nieuw in DevTools, Chrome 127

Sofia Emelianova
Sofia Emelianova
GitHub

Om u te helpen de functie voor ankerpositionering gemakkelijker te debuggen, koppelt het tabblad Stijlen nu expliciete anker-id's en impliciete ankers aan hun knooppunten.

Voor en na het koppelen van expliciete en impliciete ankers.

Bovendien is de waarde van het kenmerk popovertarget nu gekoppeld aan het bijbehorende popover element in de DOM.

Voor en na het koppelen van popovertarget aan het popover-element.

Verbeteringen aan het bronnenpaneel

Deze versie brengt diverse verbeteringen aan het Bronnenpaneel .

Verbeterde 'Nooit pauzeren hier'

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

  • Uitzonderingen of afwijzingen van beloften van ingebouwde functies.
  • "Annuleren" van DOM-, fetch/XHR- en CSP-schendingsbreekpunten.
  • In Wasm demontage.

Bekijk de workflow in actie:

Chromium-probleem: 40924349 .

Nieuwe scroll snap-gebeurtenisluisteraars

De lijst Bronnen > Event Listener Breakpoints > Control krijgt twee scroll-snap -gerelateerde listeners: scrollsnapchange en scrollsnapchanging . Deze gebeurtenissen worden geactiveerd wanneer u de scrollcontainer zodanig scrolt dat deze aan een nieuw element wordt gekoppeld.

Voor en na het toevoegen van scroll-snap-gerelateerde gebeurtenisluisteraars.

Chromium-probleem: 40286359 .

Verbeteringen aan het netwerkpaneel

Deze versie brengt diverse verbeteringen aan het Netwerkpaneel .

Bijgewerkte netwerkbeperkingsinstellingen

Het Netwerkpaneel krijgt bijgewerkte voorinstellingen voor snelheidsbeperking: nieuw: Snel 4G , Snel 3G hernoemd naar Langzaam 4G en Langzaam 3G hernoemd naar 3G . Dit sluit beter aan bij de voorinstellingen van Lighthouse .

Voor en na het updaten van de netwerkbeperkingsinstellingen.

Chromium-probleem: 342406608 .

Informatie over servicemedewerkers in aangepaste velden van het HAR-formaat

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

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

Chromium-probleem: 342406608 .

WebSocket-gebeurtenissen verzenden en ontvangen in het paneel Prestaties

Net als andere WebSocket-gebeurtenissen registreert het Prestatiepaneel nu de gebeurtenissen WebSocket-bericht verzenden en WebSocket-bericht ontvangen en toont deze in de prestatietracering. Bijvoorbeeld:

De gebeurtenis 'Receive WebSocket Message' 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 inhoud van berichten in de console aan wanneer u met de pijltjestoetsen omhoog en omlaag door het logboek scrolt ( 344484979 ).
  • Bronnen :
    • Pagina : De menuoptie Opslaan als slaat Wasm-modulebestanden nu op als geldige wasm-binaries in plaats van Base64-tekst ( 40784130 ).
    • Call stack : het (async) -achtervoegsel is verwijderd uit de beschrijvingen van async call frames, de markering is gewijzigd van cursief naar vet ( 343750870 ).
  • Geheugen : De onnodige InternalNodes met grootte nul zijn verwijderd uit heap snapshot Samenvatting ( 340200025 ).
  • Netwerk : Er is een bug opgelost waardoor er geen voorvertoning kon worden weergegeven van streaming-responsinhoud voor verzoeken die net waren gestart, maar waarvoor nog geen responseReceived gebeurtenis was ontvangen ( 338340752 ).
  • Prestatie :
    • Selectorstatistieken : Er is een verklarende tooltip toegevoegd voor de kolom %-of-Slow-Path-Non-Matches ( 324282954 ).
    • Trackconfiguratiemodus : de knop Trackconfiguratie voltooien is verplaatst naar de rechteronderkant ( 345256274 ).
  • Console : Er is een bug opgelost waarbij meerdere identieke consoleberichten werden weergegeven bij navigatie met behulp van de back/forward-cache ( 40894153 ).
  • Instellingen : Help-pictogrammen toegevoegd naast alle tabbladen.

Download de previewkanalen

Overweeg Chrome Canary , Dev of Beta als uw standaard ontwikkelbrowser te gebruiken. Deze previewkanalen geven u toegang tot de nieuwste DevTools-functies, laten u geavanceerde webplatform-API's testen en helpen u problemen op uw site te ontdekken voordat uw gebruikers dat doen!

Neem contact op met het Chrome DevTools-team

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

Wat is er nieuw in DevTools

Een lijst met alles dat in de serie Wat is er nieuw in DevTools is behandeld.

,

Sofia Emelianova
Sofia Emelianova
GitHub

Om u te helpen de functie voor ankerpositionering gemakkelijker te debuggen, koppelt het tabblad Stijlen nu expliciete anker-id's en impliciete ankers aan hun knooppunten.

Voor en na het koppelen van expliciete en impliciete ankers.

Bovendien is de waarde van het kenmerk popovertarget nu gekoppeld aan het bijbehorende popover element in de DOM.

Voor en na het koppelen van popovertarget aan het popover-element.

Verbeteringen aan het bronnenpaneel

Deze versie brengt diverse verbeteringen aan het Bronnenpaneel .

Verbeterde 'Nooit pauzeren hier'

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

  • Uitzonderingen of afwijzingen van beloften van ingebouwde functies.
  • "Annuleren" van DOM-, fetch/XHR- en CSP-schendingsbreekpunten.
  • In Wasm demontage.

Bekijk de workflow in actie:

Chromium-probleem: 40924349 .

Nieuwe scroll snap-gebeurtenisluisteraars

De lijst Bronnen > Event Listener Breakpoints > Control krijgt twee scroll-snap -gerelateerde listeners: scrollsnapchange en scrollsnapchanging . Deze gebeurtenissen worden geactiveerd wanneer u de scrollcontainer zodanig scrolt dat deze aan een nieuw element wordt gekoppeld.

Voor en na het toevoegen van scroll-snap-gerelateerde gebeurtenisluisteraars.

Chromium-probleem: 40286359 .

Verbeteringen aan het netwerkpaneel

Deze versie brengt diverse verbeteringen aan het Netwerkpaneel .

Bijgewerkte netwerkbeperkingsinstellingen

Het Netwerkpaneel krijgt bijgewerkte voorinstellingen voor snelheidsbeperking: nieuw: Snel 4G , Snel 3G hernoemd naar Langzaam 4G en Langzaam 3G hernoemd naar 3G . Dit sluit beter aan bij de voorinstellingen van Lighthouse .

Voor en na het updaten van de netwerkbeperkingsinstellingen.

Chromium-probleem: 342406608 .

Informatie over servicemedewerkers in aangepaste velden van het HAR-formaat

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

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

Chromium-probleem: 342406608 .

WebSocket-gebeurtenissen verzenden en ontvangen in het paneel Prestaties

Net als andere WebSocket-gebeurtenissen registreert het Prestatiepaneel nu de gebeurtenissen WebSocket-bericht verzenden en WebSocket-bericht ontvangen en toont deze in de prestatietracering. Bijvoorbeeld:

De gebeurtenis 'Receive WebSocket Message' 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 inhoud van berichten in de console aan wanneer u met de pijltjestoetsen omhoog en omlaag door het logboek scrolt ( 344484979 ).
  • Bronnen :
    • Pagina : De menuoptie Opslaan als slaat Wasm-modulebestanden nu op als geldige wasm-binaries in plaats van Base64-tekst ( 40784130 ).
    • Call stack : het (async) -achtervoegsel is verwijderd uit de beschrijvingen van async call frames, de markering is gewijzigd van cursief naar vet ( 343750870 ).
  • Geheugen : De onnodige InternalNodes met grootte nul zijn verwijderd uit heap snapshot Samenvatting ( 340200025 ).
  • Netwerk : Er is een bug opgelost waardoor er geen voorvertoning kon worden weergegeven van streaming-responsinhoud voor verzoeken die net waren gestart, maar waarvoor nog geen responseReceived gebeurtenis was ontvangen ( 338340752 ).
  • Prestatie :
    • Selectorstatistieken : Er is een verklarende tooltip toegevoegd voor de kolom %-of-Slow-Path-Non-Matches ( 324282954 ).
    • Trackconfiguratiemodus : de knop Trackconfiguratie voltooien is verplaatst naar de rechteronderkant ( 345256274 ).
  • Console : Er is een bug opgelost waarbij meerdere identieke consoleberichten werden weergegeven bij navigatie met behulp van de back/forward-cache ( 40894153 ).
  • Instellingen : Help-pictogrammen toegevoegd naast alle tabbladen.

Download de previewkanalen

Overweeg Chrome Canary , Dev of Beta als uw standaard ontwikkelbrowser te gebruiken. Deze previewkanalen geven u toegang tot de nieuwste DevTools-functies, laten u geavanceerde webplatform-API's testen en helpen u problemen op uw site te ontdekken voordat uw gebruikers dat doen!

Neem contact op met het Chrome DevTools-team

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

Wat is er nieuw in DevTools

Een lijst met alles dat in de serie Wat is er nieuw in DevTools is behandeld.