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. Deze preview-kanalen geven u toegang tot de nieuwste DevTools-functies, testen geavanceerde webplatform-API's en ontdekken problemen op uw site voordat uw gebruikers dat doen!

Neem contact op met het Chrome DevTools-team

Gebruik de volgende opties om de nieuwe functies en wijzigingen in het bericht te bespreken, of iets anders gerelateerd aan DevTools.

  • Stuur ons een suggestie of feedback via crbug.com .
  • Rapporteer een DevTools-probleem met behulp van de opties MeerMeer > Help > Rapporteer een DevTools-probleem in DevTools.
  • Tweet op @ChromeDevTools .
  • Laat reacties achter op onze Wat is er nieuw in DevTools YouTube-video's of DevTools Tips YouTube-video's .

Wat is er nieuw in DevTools

Een lijst met alles wat aan bod is gekomen in de serie Wat is er nieuw in DevTools .

,

Sofia Emelianova
Sofia Emelianova
GitHub

Om u te helpen bij het eenvoudiger is van ankerpositioneringsfunctie , koppelt het tabblad Styles nu expliciete anker -identificatiegegevens en impliciete ankers aan hun knooppunten.

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

Bovendien koppelt de popovertarget -kenmerkwaarde nu naar zijn popover in de DOM.

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

Bronnen Paneel Verbeteringen

Deze versie brengt verschillende verbeteringen in het paneel voor bronnen .

Verbeterde 'hier nooit pauzeren'

Met de optie 'Never Pauze Here' kunt u voorkomen dat de debugger steeds opnieuw op dezelfde lijn pauzeert. Dit maakt het gemakkelijker om te werken met irrelevante breekpunten die herhaaldelijk ontslaan. Deze versie verbetert deze mogelijkheden en werkt nu voor:

  • Uitzonderingen of belofte-afwijzingen van ingebouwde functies.
  • "DOM" annuleren "Fetch/XHR en CSP -overtreding.
  • In wasm demontage.

Zie de workflow in actie:

Chromium -probleem: 40924349 .

Nieuwe scroll snap -evenement luisteraars

De bronnen > Evenement Luisteraar Breekpunten > Besturingslijst Krijgt twee scroll -Snap -gerelateerde luisteraars: scrollsnapchange en scrollsnapchanging . Deze gebeurtenissen vuren wanneer u over de scrollcontainer scrolt op een manier waardoor deze naar een nieuw element zou gaan.

De voor en na het toevoegen van scroll-SNAP-gerelateerde gebeurtenisluisteraars.

Chromium -probleem: 40286359 .

Verbeteringen van het netwerkpaneel

Deze versie brengt verschillende verbeteringen in het netwerkpaneel .

Bijgewerkte netwerke throttling presets

Het netwerkpaneel wordt bijgewerkt voorinstellingen voor throttling: nieuwe snelle 4G , snel 3G hernoemd om 4G te vertragen en langzaam 3G omgedoopt tot 3G . Dit komt beter overeen met de presets van Lighthouse .

De voor- en na het bijwerken van netwerk Throttling presets.

Chroomprobleem: 342406608 .

Informatie over servicemedewerker 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 servicemedewerkers, inclusief timing, als aangepaste velden zien (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
}
...

Chroomprobleem: 342406608 .

Websocket -evenementen verzenden en ontvangen in het uitvoeringspaneel

Net als andere Websocket -evenementen, legt het prestatiepaneel nu WebSocket -bericht vast en ontvangt WebSocket -berichtevenementen en toont deze in het prestatietrace. Bijvoorbeeld:

Het evenement 'Websocket Message' Bericht 'In het Performance Trace vastgelegd.

Chroomprobleem: 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 bij het scrollen door het logboek met omhoog en omlaag pijltoetsen ( 344484979 ).
  • Bronnen :
    • Pagina : de optie opslaan als menu -optie slaat nu de WADM -module -bestanden op als geldige wasme binaries in plaats van basis64 -tekst ( 40784130 ).
    • Oproepstapel : verwijderde het achtervoegsel (async) uit async -oproepframe -beschrijvingen, veranderde hun hoogtepunt van cursief in Bold ( 343750870 ).
  • Geheugen : verwijderde de onnodige interne no-size InternalNodes uit de samenvatting van de heap-snapshot ( 340200025 ).
  • Netwerk : een bug opgelost die de preview van streaming -responsinhoud voorstond voor verzoeken die net begonnen, maar nog geen responseReceived gebeurtenis kreeg ( 338340752 ).
  • Prestatie :
    • Selector Statistieken : een verklarende tooltip toegevoegd voor de kolom %-of-Slow-Path-Non-Matches ( 324282954 ).
    • Volg de configuratiemodus : de knop Finish Configuring Tracks Configuring is rechtsonder verplaatst ( 345256274 ).
  • Console : een bug opgelost met meerdere identieke consoleberichten bij het navigeren met 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. Deze preview-kanalen geven u toegang tot de nieuwste DevTools-functies, test geavanceerde webplatform-API's en vinden problemen op uw site voordat uw gebruikers dat doen!

Neem contact op met het Chrome DevTools-team

Gebruik de volgende opties om de nieuwe functies en wijzigingen in het bericht te bespreken, of iets anders gerelateerd aan DevTools.

  • Dien een suggestie of feedback aan ons via CRBUG.com .
  • Rapporteer een DevTools-probleem met behulp van de opties MeerMeer > Help > melden een devTools -problemen in devtools.
  • Tweet op @chromedevtools .
  • Laat reacties achter op onze Wat is er nieuw in DevTools YouTube-video's of DevTools Tips YouTube-video's .

Wat is er nieuw in Devtools

Een lijst van alles wat is behandeld in de serie What's New in Devtools .