Wat is er nieuw in DevTools, Chrome 132

Sofia Emelianova
Sofia Emelianova
GitHub

Debug netwerkverzoeken, bronbestanden en prestatietraceringen met Gemini

Naast CSS-stijl kunt u nu met Gemini chatten over netwerkverzoeken, bronbestanden en prestatiesporen.

Om het AI-assistentiepaneel te openen en de chat met Gemini te starten, vergelijkbaar met het contextmenu in het Elementenpaneel , klikt u met de rechtermuisknop en selecteert u Ask AI of klikt u op de knopVraag AI- knop naast het volgende:

  • Een netwerkverzoek in het netwerkpaneel .
  • Een bestand op het tabblad Bronnen > Pagina .
  • Een activiteit in de track Prestatie > Hoofd .

Vraag AI-knoppen en menuoptie in Netwerk, Bronnen en Prestaties.

Gemini houdt rekening met de context van het geselecteerde verzoek, dossier of activiteit.

Het DevTools-team kijkt uit naar uw feedback op crbug.com/364805393 .

AI-chatgeschiedenis

U kunt nu eerdere chats met Gemini herstellen en bekijken in het AI-assistentiepaneel door op de knop Nieuwe chat in de linkerbovenhoek van het paneel te klikken of door de Ask AI- knoppen en menuopties van het Netwerkpaneel , Bronnen > tabblad Pagina , te gebruiken. en Prestatie > Hoofdtrack .

Om een ​​van uw eerdere chats te bekijken, selecteert u de bijbehorende prompt in het vervolgkeuzemenu onder de knop . Het AI-assistentiepaneel onthoudt uw chatgeschiedenis terwijl DevTools geopend is.

De AI-chatgeschiedenis in een vervolgkeuzelijst onder de knop 'Geschiedenis'.

Beheer extensieopslag in Applicatie > Opslag

Net als bij lokale opslag en sessieopslag kunt u nu extensieopslagitems bekijken en wijzigen in de sectie Toepassing > Opslag .

De voor en na het toevoegen van de sectie 'Extensieopslag' aan het applicatiepaneel.

Chromium-probleem: crbug.com/40963428 .

Prestatieverbeteringen

Deze versie brengt een aantal verbeteringen aan in het Prestatiepaneel .

Interactiefasen in live statistieken

U kunt nu de interacties in live prestatiestatistieken uitbreiden om een ​​overzicht van de fasen en hun timing te zien.

De voor en na het toevoegen van een overzicht van fasen en hun timing aan interacties.

Zoals gecommuniceerd in de Web Vitals-extensie, nu in DevTools , markeert de release van deze functies het einde van de ondersteuning voor de Web Vitals-extensie.

Chromium-probleem: crbug.com/369097528 .

Geef blokkeringsinformatie weer op het tabblad Samenvatting

Wanneer u een netwerkverzoek selecteert dat is gemarkeerd met een rode driehoek in het spoor Prestaties > Netwerk , vertelt het tabblad Samenvatting , naast de (geherstructureerde) tooltip, nu ook dat het verzoek render-blocking is.

De voor en na het toevoegen van renderblokkeringsinformatie aan het tabblad Samenvatting.

Ondersteuning voor scheduler.postTask gebeurtenissen en hun initiatorpijlen

Het spoor Prestaties > Hoofd toont nu scheduler.postTask() -gebeurtenissen en de volgende initiatorpijlen tussen:

  • Schedule postTask -> Fire postTask
  • Schedule postTask -> Abort postTask

De voor en na het toevoegen van ondersteuning voor planner.postTask-gebeurtenissen en hun initiatorpijlen.

Chromium-probleem: crbug.com/40775984 .

Verbeteringen in het deelvenster Animaties en Elementen > Stijlen op het tabblad

Deze versie brengt een aantal verbeteringen aan het paneel Animaties en het tabblad Elementen > Stijlen .

Op het tabblad Elementen > Stijlen worden nu knoppen in het deelvenster Animatie Springen naar animaties naast de waarde van animation eigenschappen geplaatst, zodat u de animatie daar eenvoudig kunt wijzigen.

Het voor en na het toevoegen van een link van het tabblad Stijlen naar het paneel Animaties.

Realtime updates op het tabblad Berekend

Het tabblad Elementen > Berekend werkt nu de berekende waarden in realtime bij wanneer bijvoorbeeld animaties deze bijwerken.

Bereken de drukemulatie in sensoren

In het paneel Sensors kunt u nu Nominal , Fair , Serious en Critical CPU-druk emuleren.

De optie voor en na het toevoegen van CPU-drukemulatie aan het paneel Sensoren.

Chromium-probleem: crbug.com/362277525 .

JS-objecten met dezelfde naam gegroepeerd op bron in het paneel Geheugen

Het paneel Geheugen maakt nu onderscheid tussen JS-objecten met dezelfde naam die uit verschillende bronnen komen en groepeert deze overeenkomstig.

Het voor en na groeperen van JS-objecten met dezelfde naam, ook op bron.

Chromium-probleem: crbug.com/357902505 .

Een nieuw uiterlijk voor instellingen

Om het ontwerp van de gebruikersinterface beter op elkaar af te stemmen, kijken de DevTools-instellingen nu nauwer naar de Chrome-instellingen. In het bijzonder zijn secties nu visueel gescheiden in "kaarten".

De voor en na secties worden opgedeeld in 'kaarten'.

Het paneel Prestatie-inzichten is verouderd en verwijderd uit DevTools

Alle belangrijke en nuttige functies van het paneel Prestatie-inzichten hebben nu een nieuw onderkomen gevonden in het paneel Prestaties , met name in live statistieken , het zijbalktabblad Inzichten en de lay-outverschuivingstrack . Deze versie beëindigt en verwijdert dus het paneel Prestatie-inzichten uit DevTools.

Het DevTools-team is dankbaar voor de feedback die u heeft gegeven over de beëindiging van dit paneel en de algemene ervaring met het opsporen van fouten in de prestaties. Zoals altijd vinden we het leuk om uw mening te horen en uw perspectieven te leren kennen. Laat ze maar komen!

Diverse hoogtepunten

Dit zijn enkele opmerkelijke oplossingen en verbeteringen in deze release:

  • Prestatie :
    • Een onnodige limiet van 3 tekens voor zoekopdrachten verwijderd.
    • De Home- knop toegevoegd waarmee u teruggaat naar het live-statistiekenscherm.
    • De eerder defecte Shift + S / W trace zoom-snelkoppelingen opgelost.
  • Elementen > Stijlen :
    • Ankercentrum toegevoegd aan automatisch aanvullen 341991541 .
    • Een bug opgelost waarbij de flexbox-editor niet beschikbaar was voor waarden van 2 woorden 341964645 .
  • Netwerk : Prefetch-fouten zijn nu gele waarschuwingen of rode fouten om aan te geven dat de inhoudsweergave niet wordt beïnvloed 372055494 .

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 .