Wat is er nieuw in DevTools, Chrome 133

Sofia Emelianova
Sofia Emelianova
GitHub

Blijvende AI-chatgeschiedenis

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

Verbeteringen aan het prestatiepaneel

Deze versie brengt een aantal verbeteringen aan het Prestatiepaneel .

Inzicht in beeldlevering

Het tabblad Prestaties > Insights kan nu afbeeldingen markeren waarvan u de bestandsgrootte kunt optimaliseren. Klik op een afbeelding in de Insight om deze gemarkeerd te zien in de Netwerktrack .

Het paneel Prestaties met de inzichten in de levering van afbeeldingen gemarkeerd.

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

Klassieke en moderne toetsenbordnavigatie

Via het paneel Prestaties kunt u nu uw voorkeursstijl voor toetsenbordnavigatie kiezen. Er zijn de volgende belangrijke verschillen:

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

Om uw voorkeursstijl te kiezen, klikt u rechtsboven in het paneel op Snelkoppelingen weergeven en selecteert u Klassiek of Modern . Het dialoogvenster Snelkoppelingen bevat ook een overzicht van de beschikbare snelkoppelingen.

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

Negeer irrelevante scripts in de vlamgrafiek

Om je beter op je code te kunnen concentreren, kun je nu irrelevante scripts rechtstreeks vanuit het Prestatiepaneel aan de negeerlijst toevoegen. Het paneel vouwt automatisch overmatige nesting in.

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. De vlamgrafiek past de nieuwe regel toe terwijl u typt.

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

Tijdlijnmarkering en bereikmarkering bij zweven

Om u een beter inzicht te geven in de prestatietracering, doet het paneel Prestaties nu het volgende:

  • Wanneer u met de muis over de tijdlijn beweegt, wordt er een verticale markering weergegeven die de volledige prestatietracering beslaat.
  • Markeert een bereik in de tijdlijn wanneer u over items in het hoofdspoor beweegt.

Aanbevolen instellingen voor throttling

In het paneel Prestaties worden nu aanbevelingen gegeven voor het instellen van de snelheidsbeperking in zowel de live-statistieken als in de vervolgkeuzemenu's Vastleginstellingen

Voor en na het toevoegen van aanbevelingen voor snelheidsbeperking aan de instellingenmenu's.

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

Bovendien herinnert het paneel Prestaties u nu aan de snelheidsbeperkingsinstellingen die u hebt gebruikt naast elke trace in het vervolgkeuzemenu Recente sessies in de actiebalk.

Tijdmarkeringen in een overlay

Timingmarkeringen zijn verplaatst van het Timingspoor naar de onderkant van het trace en worden nu over alle sporen heen gelegd. Ze zijn zichtbaar, zelfs als het Timingspoor verborgen is .

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

Het Timings -spoor behoudt uw aangepaste mark() - en measure() aanroepen.

Stack traces van JavaScript-aanroepen in Samenvatting

Op het tabblad Prestaties > Samenvatting worden nu stack traces van JavaScript-aanroepen weergegeven, inclusief asynchrone aanroepen.

Voor en na het toevoegen van stack traces aan het tabblad Samenvatting.

Badge-instellingen verplaatst naar menu in Elementen

De badge-instellingen in het Elementenpaneel zijn verplaatst van een standaard verborgen actiebalk naar het overeenkomstige rechtermuisknopmenu.

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

Nieuw 'Wat is er nieuw'-paneel

Het paneel 'Wat is er nieuw?' heeft een nieuwe look die beter aansluit bij het ontwerp van Chrome.

De oude en nieuwe look van het 'Wat is er nieuw'-paneel.

Chromium-probleem: 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 correcte oorsprongsisolatie met COOP en een sterk HSTS-beleid. Bekijk de volledige lijst met wijzigingen .

Voor de basisbeginselen van het gebruik van het Lighthouse- paneel in DevTools raadpleegt u Lighthouse: Optimaliseer de snelheid van uw website .

Chromium-probleem: 40543651 .

Diverse hoogtepunten

Dit zijn enkele opmerkelijke oplossingen en verbeteringen in deze release:

  • Bronnen : Wanneer de Debugger is gepauzeerd, schakelt deze nu niet meer onverwachts over naar de service worker-context als deze na de pauze is gemaakt ( 373893057 ).
  • Prestatie :
    • Wanneer u met de muis over scripts beweegt, worden in de tooltips in het vlamdiagram nu eventuele URL's weergegeven ( 368541957 ).
    • Samenvatting : Het cirkeldiagram is vervangen door een staafdiagram.
    • Het selectievakje Extensiegegevens in de Vastleginstellingen is hernoemd naar Aangepaste tracks weergeven .
    • Het tabblad Inzichten bevat nu een sectie Doorgegeven inzichten (N) , die standaard is samengevouwen.
  • Toepassing > Opslag : U kunt opslagvermeldingen maken met lege sleutels omdat deze technisch geldig zijn ( 373703285 ).
  • Apparaatmodus is nu uitgeschakeld voor chrome:// pagina's ( 40186276 ).
  • Netwerk :
    • Met de bijbehorende instelling ingeschakeld , opent u nu door één keer op HAR exporteren te klikken een menu met twee opties (gedesinfecteerd en met gevoelige gegevens). Voorheen werd het menu geopend met een lange klik ( 378076279 ).
    • Kopiëren als cURL gebruikt nu het kenmerk -b 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 ).
  • Netwerkaanvraagblokkering : Deze instelling in het opdrachtmenu is nu gesynchroniseerd met het overeenkomstige selectievakje ( 378058733 ).

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.