Wat is er nieuw in DevTools, Chrome 132

Sofia Emelianova
Sofia Emelianova
GitHub

Debug netwerkverzoeken, bronbestanden en prestatietraceringen met Gemini

Naast CSS-styling kunt u nu ook met Gemini chatten over netwerkverzoeken, bronbestanden en prestatietraceringen.

Net als bij het contextmenu in het Elementenpaneel kunt u het AI-assistentiepaneel openen en de chat met Gemini starten door met de rechtermuisknop te klikken en Vraag AI of door op de knop te klikken.Knop ' Vraag AI' naast het volgende:

  • Een netwerkverzoek in het paneel Netwerk .
  • Een bestand op het tabblad Bronnen > Pagina .
  • Een activiteit in het spoor Prestatie > Hoofd .

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

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

Het DevTools-team ziet uw feedback graag tegemoet op crbug.com/364805393 .

AI-chatgeschiedenis

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

Om een ​​van je eerdere chats te bekijken, selecteer je de bijbehorende prompt in het dropdownmenu onder de knop . Het AI- assistentiepaneel onthoudt je chatgeschiedenis zolang DevTools geopend is.

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

Beheer extensieopslag in Toepassing > Opslag

Net als bij lokale opslag en sessieopslag kunt u nu extensieopslagvermeldingen bekijken en wijzigen in het gedeelte Toepassing > Opslag .

Het voor- en nagedeelte van het toevoegen van de sectie 'Uitbreidingsopslag' aan het paneel Toepassing.

Chromium-probleem: crbug.com/40963428 .

Prestatieverbeteringen

Deze versie brengt een aantal verbeteringen aan het Prestatiepaneel .

Interactiefasen in live-statistieken

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

Voor en na, met een overzicht van de fases en de timing van de interacties.

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

Chromium-probleem: crbug.com/369097528 .

Informatie over het blokkeren van weergaven op het tabblad Samenvatting

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

Het voor en na toevoegen van render-blokkerende informatie 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 ertussen:

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

Voor en na het toevoegen van ondersteuning voor scheduler.postTask-gebeurtenissen en hun initiatorpijlen.

Chromium-probleem: crbug.com/40775984 .

Verbeteringen aan het paneel Animaties en het tabblad Elementen > Stijlen

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

Op het tabblad Elementen > Stijlen worden de animatiepictogrammen 'Ga naar animaties' nu naast de waarde van animation eigenschappen weergegeven, zodat u animaties daar eenvoudig kunt inspecteren.

Het voor- en nabeeld van het toevoegen van een koppeling vanaf het tabblad Stijlen naar het paneel Animaties.

Realtime-updates op het tabblad Berekend

Via het tabblad Elementen > Berekend worden de berekende waarden nu in realtime bijgewerkt, bijvoorbeeld wanneer animaties dit doen.

Bereken druk-emulatie in sensoren

Met het paneel Sensoren kunt u nu Nominal , Fair , Serious en Critical CPU-belasting nabootsen.

Voor en na het toevoegen van de optie CPU-druk-emulatie 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 afkomstig zijn uit verschillende bronnen en groepeert ze overeenkomstig.

De voor- en nagroepering van JS-objecten met dezelfde naam, ook op bron.

Chromium-probleem: crbug.com/357902505 .

Een nieuwe look voor instellingen

Om het ontwerp van de gebruikersinterface beter af te stemmen, lijken de instellingen van DevTools nu meer op de instellingen van Chrome. Zo zijn secties nu visueel gescheiden in 'kaarten'.

Het voor en na het verdelen van de secties 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 nieuwe plek gekregen in het paneel Prestaties , met name in live statistieken , het tabblad Inzichten in de zijbalk en het spoor Lay-outverschuivingen . Deze versie maakt het paneel Prestatie-inzichten overbodig en verwijdert het uit DevTools.

Het DevTools-team is dankbaar voor de feedback die u heeft gegeven over de veroudering van dit panel en de algehele prestatie-debugervaring. Zoals altijd horen we graag uw gedachten en perspectieven. Ga zo door!

Diverse hoogtepunten

Dit zijn enkele opmerkelijke oplossingen en verbeteringen in deze release:

  • Prestatie :
    • Een onnodige limiet van 3 tekens voor zoekopdrachten is verwijderd.
    • De - knop is toegevoegd, waarmee u teruggaat naar het scherm met live-statistieken.
    • De eerder kapotte Shift + S / W trace zoom-sneltoetsen zijn hersteld.
  • Elementen > Stijlen :
    • Ankercentrum toegevoegd aan autoaanvullen 341991541 .
    • Er is een bug opgelost waardoor de flexbox-editor niet beschikbaar was voor waarden van 2 woorden 341964645 .
  • Netwerk : Prefetch-fouten worden nu weergegeven als gele waarschuwingen in plaats van rode fouten, om aan te geven dat de weergave van de inhoud niet wordt beïnvloed 372055494 .

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 wat in de serie Wat is er nieuw in DevTools is behandeld.