Wat is er nieuw in DevTools, Chrome 133

Sofia Emelianova
Sofia Emelianova
GitHub

Permanente AI-chatgeschiedenis

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

Prestatieverbeteringen

Deze versie bevat een aantal verbeteringen aan het prestatiepaneel .

Inzicht in beeldweergave

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

Het prestatiepaneel met de inzichten in beeldweergave gemarkeerd.

Voor meer informatie over het optimaliseren van de levering van afbeeldingen, zie Efficiënt coderen van afbeeldingen .

Klassieke en moderne toetsenbordnavigatie

In het paneel Prestaties kunt u nu uw voorkeursstijl voor toetsenbordnavigatie kiezen, met de volgende belangrijkste verschillen:

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

Om je voorkeursstijl te kiezen, klik je in de rechterbovenhoek van het paneel op Sneltoetsen weergeven en selecteer je Klassiek of Modern . Het dialoogvenster Sneltoetsen biedt je ook een overzicht van de beschikbare sneltoetsen.

Het dialoogvenster Sneltoetsen met de beschikbare sneltoetsen voor het paneel Prestaties.

Negeer irrelevante scripts in het flame chart.

Om je beter op je code te kunnen concentreren, kun je nu irrelevante scripts rechtstreeks in het prestatiepaneel aan de negeerlijst toevoegen. Het paneel zal automatisch overbodige geneste elementen samenvouwen.

Om scripts aan de negeerlijst toe te voegen, klikt u op , vervolgens op 'Instellingen voor negeerlijst weergeven' in de bovenste actiebalk en typt u een reguliere expressie in het invoerveld. De flame chart past de nieuwe regel toe terwijl u typt.

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

Tijdlijnmarkering en bereikmarkering bij hoveren

Om u te helpen de prestatietrace beter te begrijpen, doet het paneel Prestaties nu het volgende:

  • Toont een verticale markering die de volledige prestatiecurve omvat wanneer u de muis over de tijdlijn beweegt.
  • Markeer een bereik in de tijdlijn wanneer u de muis over items in het hoofdspoor beweegt.

Aanbevolen instellingen voor gasregeling

Het paneel Prestaties geeft nu aanbevelingen voor throttling-instellingen, zowel in live statistieken als in de relevante vervolgkeuzemenu's voor opname- .

Het resultaat vóór en na het toevoegen van aanbevelingen voor bandbreedtebeperking aan de instellingenmenu's.

De aanbevolen CPU-throttling is (voorlopig) de meest gebruikte 4x slowdown en de netwerkaanbeveling is gebaseerd op gegevens uit het Chrome UX-rapport , indien deze functie is ingeschakeld in de live statistieken .

Bovendien toont het paneel Prestaties nu naast elke trace in het vervolgkeuzemenu Recente sessies in de actiebalk een herinnering aan de gebruikte throttling-instellingen.

Tijdmarkeringen in een overlay

De tijdmarkeringen zijn verplaatst van het tijdspoor naar de onderkant van de grafiek en worden nu over alle andere sporen heen weergegeven, waardoor ze zichtbaar zijn, zelfs als het tijdspoor verborgen is .

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

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

Stacktraceringen van JavaScript-aanroepen in Samenvatting

Het tabblad Prestaties > Samenvatting toont nu stacktraces van JavaScript-aanroepen, inclusief asynchrone aanroepen.

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

De badge-instellingen zijn verplaatst naar het menu in Elements.

De badge-instellingen in het paneel Elementen zijn verplaatst van een standaard verborgen actiebalk naar het bijbehorende contextmenu dat verschijnt bij een rechtermuisklik.

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

Nieuw 'Wat is nieuw'-paneel

Het paneel 'Wat is nieuw' krijgt een nieuwe look die meer aansluit bij het ontwerp van Chrome.

De oude en nieuwe vormgeving van het paneel 'Wat is nieuw'.

Chromium-probleem: 325441858 .

Lighthouse 12.3.0

Het Lighthouse- paneel draait nu op Lighthouse 12.3.0.

Deze update voegt onder andere nieuwe audits toe die controleren of de oorsprongisolatie correct is met COOP en een sterk HSTS-beleid. Bekijk de volledige lijst met wijzigingen .

Om de basisprincipes van het gebruik van het Lighthouse- paneel in DevTools te leren, raadpleegt u Lighthouse: Websitesnelheid optimaliseren .

Chromium-probleem: 40543651 .

Diverse hoogtepunten

Dit zijn enkele noemenswaardige verbeteringen en bugfixes in deze release:

  • Bronnen : Wanneer de debugger gepauzeerd is, schakelt hij nu niet onverwacht over naar de service worker-context als deze na de pauze is aangemaakt ( 373893057 ).
  • Prestatie :
    • Bij het hoveren over scripts tonen tooltips in de flame chart nu URL's, indien aanwezig ( 368541957 ).
    • Samenvatting : Het cirkeldiagram is vervangen door een staafdiagram.
    • Het selectievakje voor uitbreidingsgegevens in de opname-instellingen is hernoemd naar 'Aangepaste sporen weergeven' .
    • Het tabblad 'Inzichten ' heeft nu een sectie 'Geslaagde inzichten (N)' , die standaard is ingeklapt.
  • Applicatie > Opslag : U kunt opslagitems aanmaken met lege sleutels, omdat deze technisch geldig zijn ( 373703285 ).
  • De apparaatmodus is nu uitgeschakeld voor chrome:// pagina's ( 40186276 ).
  • Netwerk :
    • Met de bijbehorende instelling ingeschakeld , opent een enkele klik op Export HAR nu een menu met twee opties (gesanonimiseerd en met gevoelige gegevens). Voorheen opende het menu na een lange klik ( 378076279 ).
    • Kopieer omdat cURL nu het attribuut -b gebruikt om cookies te omzeilen en leesbaarder te zijn, in plaats van -H 'cookie:...' ( 40791742 ).
  • Toegankelijkheid : U kunt nu tabbladen binnen panelen naar links of rechts verplaatsen met een contextmenu ( 383164782 ).
  • Blokkeren van netwerkverzoeken : Deze instelling in het opdrachtmenu is nu gesynchroniseerd met het bijbehorende selectievakje ( 378058733 ).

Download de previewkanalen

Overweeg om Chrome Canary , Dev of Beta als standaard ontwikkelbrowser te gebruiken. Deze preview-versies geven je toegang tot de nieuwste DevTools-functies, stellen je in staat om geavanceerde API's van webplatformen te testen en helpen je problemen op je site te vinden voordat je gebruikers ze tegenkomen!

Neem contact op met het Chrome DevTools-team.

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

Wat is er nieuw in DevTools?

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