Wat is er nieuw in DevTools, Chrome 133

Sofia Emelianova
Sofia Emelianova
GitHub

Aanhoudende AI-chatgeschiedenis

Het AI-assistentiepaneel bewaart nu lokaal uw chatgeschiedenis tijdens sessies, zodat u uw eerdere gesprekken met Gemini kunt bekijken, zelfs nadat u DevTools of Chrome opnieuw hebt geladen.

Verbeteringen in het prestatiepaneel

Deze versie brengt een aantal verbeteringen aan in het Prestatiepaneel .

Inzicht in beeldlevering

Het tabblad Prestaties > Inzichten kan nu afbeeldingen markeren waarvan u de bestandsgrootte kunt optimaliseren. Klik op een afbeelding in het inzicht om deze gemarkeerd te zien in de netwerktrack .

Het prestatiepaneel met het inzicht in de beeldlevering gemarkeerd.

Zie Afbeeldingen efficiënt coderen voor meer informatie over het optimaliseren van de levering van afbeeldingen.

Klassieke en moderne toetsenbordnavigatie

In het paneel Prestaties kunt u nu de gewenste stijl van toetsenbordnavigatie kiezen, met de volgende belangrijkste verschillen:

  • Klassiek : zoomen met muiswiel (touchpad omhoog of omlaag) en verticaal scrollen met Shift + muiswiel.
  • Modern : Verticaal scrollen met muiswiel, horizontaal scrollen met Shift + muiswiel en zoomen met Command/Control + muiswiel.

Om de stijl van uw voorkeur te kiezen, klikt u in de rechterbovenhoek van het paneel op Snelkoppelingen weergeven en selecteert u Klassiek of Modern . Het dialoogvenster met snelkoppelingen biedt u ook een spiekbriefje met de beschikbare snelkoppelingen.

Het dialoogvenster met snelkoppelingen met de beschikbare snelkoppelingen voor het paneel Prestaties.

Negeer irrelevante scripts in het vlamdiagram

Om u beter op uw code te kunnen concentreren, kunt u nu irrelevante scripts toevoegen aan de negeerlijst, rechtstreeks in het prestatiepaneel . Het paneel zal bij overmatig nesten automatisch instorten.

Om scripts aan de negeerlijst toe te voegen, klikt u op Dialoogvenster Negeerlijstinstellingen weergeven in de bovenste actiebalk en typt u een reguliere expressie in het invoerveld. Het vlammendiagram past de nieuwe regel toe terwijl u typt.

DevTools slaat de regels voor de negeerlijst op die u toevoegt in Instellingen > Negeerlijst en u kunt ze naar wens in- en uitschakelen in het dialoogvenster.

Tijdlijnmarkering en bereikmarkering bij zweven

Om u te helpen de prestatietracering beter te begrijpen, doet het Prestatiepaneel nu het volgende:

  • Toont u een verticale markering die het gehele prestatietracé omspant wanneer u over de tijdlijn zweeft.
  • Markeert een bereik in de tijdlijn wanneer u over items in de hoofdtrack beweegt.

Aanbevolen throttling-instellingen

Het Prestatiepaneel beveelt nu de beperkingsinstellingen aan, zowel in de live statistieken als in de relevante vervolgkeuzemenu's voor instellingen voor het vastleggen van .

De voor en na het toevoegen van throttling-aanbevelingen aan de instellingsmenu's.

De aanbevolen CPU-beperking is (voorlopig) de meest gebruikte 4x slowdown en de netwerkaanbeveling is gebaseerd op Chrome UX Report- gegevens, als deze is ingeschakeld in live statistieken .

Bovendien herinnert het prestatiepaneel u nu de beperkingsinstellingen die u hebt gebruikt naast elke tracering in het vervolgkeuzemenu Recente sessies op de actiebalk.

Timingsmarkeringen in een overlay

Timingsmarkeringen zijn van het timingspoor naar de onderkant van het spoor verplaatst en worden nu over alle sporen heen gelegd. Ze zijn zelfs zichtbaar als het timingspoor verborgen is .

Voor en na het verplaatsen van markeringen naar de onderkant van het spoor.

De Timings- track behoudt uw aangepaste mark() en measure() aanroepen.

Stapel sporen van JavaScript-aanroepen in Samenvatting

Op het tabblad Prestaties > Samenvatting ziet u nu de stapelsporen van JavaScript-aanroepen, inclusief asynchrone.

Voor en na het toevoegen van stapeltraceringen aan het tabblad Samenvatting.

Badge-instellingen verplaatst naar het menu in Elements

Badge-instellingen in het paneel Elementen zijn verplaatst van een standaard verborgen actiebalk naar het overeenkomstige rechtsklikmenu.

Voor en na het verplaatsen van badge-instellingen naar het menu.

Nieuw paneel 'Wat is er nieuw'

Het What's new -paneel krijgt een nieuwe look die beter aansluit bij het ontwerp van Chrome.

Het oude en nieuwe uiterlijk van het paneel 'Wat is er nieuw'.

Chroomuitgave: 325441858 .

Vuurtoren 12.3.0

Het Lighthouse- paneel draait nu Lighthouse 12.3.0.

Deze update voegt onder andere nieuwe audits toe die controleren op goede herkomstisolatie met COOP en een krachtig HSTS-beleid. Bekijk de volledige lijst met wijzigingen .

Zie Lighthouse: Websitesnelheid optimaliseren voor meer informatie over de basisprincipes van het gebruik van het Lighthouse -paneel in DevTools.

Chroomuitgave: 40543651 .

Diverse hoogtepunten

Dit zijn enkele opmerkelijke oplossingen en verbeteringen in deze release:

  • Bronnen : wanneer de Debugger is gepauzeerd, schakelt hij nu niet onverwachts over naar de context van servicewerknemers als deze na de pauze wordt gemaakt ( 373893057 ).
  • Prestatie :
    • Als u met de muis over scripts beweegt, tonen tooltips in het vlamdiagram nu eventuele URL's ( 368541957 ).
    • Samenvatting : Het cirkeldiagram is vervangen door een staafweergave.
    • Het selectievakje Extensiegegevens in Capture-instellingen is hernoemd naar Aangepaste tracks tonen .
    • Het tabblad Inzichten heeft nu de sectie Geslaagde inzichten (N) , standaard samengevouwen.
  • Toepassing > Opslag : u kunt opslagitems maken met lege sleutels omdat deze technisch geldig zijn ( 373703285 ).
  • De apparaatmodus is nu uitgeschakeld voor chrome:// pagina's ( 40186276 ).
  • Netwerk :
    • Als de overeenkomstige instelling is ingeschakeld , wordt door één keer klikken op HAR exporteren een menu geopend met twee opties (opgeschoond en met gevoelige gegevens). Voorheen werd het menu geopend door lang te klikken ( 378076279 ).
    • Kopiëren als cURL gebruikt nu het kenmerk -b om cookies te omzeilen en beter leesbaar te zijn, in plaats van -H 'cookie:...' ( 40791742 ).
  • Toegankelijkheid : u kunt nu tabbladen binnen panelen naar links of rechts verplaatsen met een contextmenu ( 383164782 ).
  • Netwerkverzoek blokkeren : deze opdrachtmenu-instelling is nu gesynchroniseerd met het bijbehorende selectievakje ( 378058733 ).

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 .