Wat is er nieuw in DevTools, Chrome 132

Sofia Emelianova
Sofia Emelianova
GitHub

Debug netwerkverzoeken, bronbestanden en prestatietraceringen met Gemini.

Naast CSS-styling kun je nu ook met Gemini chatten over netwerkverzoeken, bronbestanden en prestatiegegevens.

Net als bij het contextmenu in het paneel Elementen , kunt u het AI-assistentiepaneel openen en een chatgesprek met Gemini starten door met de rechtermuisknop te klikken en 'Vraag AI' te selecteren, of door op de knop te klikken.De knop 'Vraag AI' bevindt zich naast het volgende:

  • Een netwerkverzoek in het netwerkpaneel .
  • Een bestand in het tabblad Bronnen > Pagina .
  • Een activiteit in het onderdeel Performance > Main .

Gebruik de knoppen en menu-opties 'Vraag AI' in Netwerk, Bronnen en Prestaties.

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

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

AI-chatgeschiedenis

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

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

De chatgeschiedenis van de AI is te vinden in een uitklapmenu onder de knop 'Geschiedenis'.

Beheer de opslagruimte van extensies via Toepassing > Opslag.

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

De situatie vóór en na het toevoegen van de sectie 'Extensieopslag' aan het toepassingspaneel.

Chromium-probleem: crbug.com/40963428 .

Prestatieverbeteringen

Deze versie bevat een aantal verbeteringen aan het prestatiepaneel .

Interactiefasen in live statistieken

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

De situatie vóór en na het toevoegen van een overzicht van de fasen en hun timing aan de interacties.

Zoals aangekondigd in de Web Vitals-extensie, die nu beschikbaar is in DevTools , betekent de release van deze functies het einde van de ondersteuning voor de Web Vitals-extensie.

Chromium-probleem: crbug.com/369097528 .

Renderblocking-informatie in het tabblad Samenvatting

Wanneer je in het onderdeel Prestaties > Netwerk een netwerkverzoek selecteert dat is gemarkeerd met een rode driehoek, geeft het tabblad Samenvatting , naast de (vernieuwde) tooltip, nu ook aan dat het verzoek de weergave blokkeert.

Het verschil tussen voor en na het toevoegen van render-blocking-informatie aan het tabblad Samenvatting.

Ondersteuning voor scheduler.postTask -gebeurtenissen en hun initiërende pijlen.

Het Performance > Main -spoor toont nu scheduler.postTask() gebeurtenissen en de volgende initiatorpijlen ertussen:

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

De situatie vóór en na het toevoegen van ondersteuning voor scheduler.postTask-gebeurtenissen en hun initiërende pijlen.

Chromium-probleem: crbug.com/40775984 .

Verbeteringen aan het paneel Animaties en het tabblad Elementen > Stijlen

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

Op het tabblad Elementen > Stijlen worden nu animatiepictogrammen (Ga naar het paneel Animaties) naast de waarde van animation eigenschappen weergegeven, zodat u animaties daar gemakkelijk kunt inspecteren.

Het verschil vóór en na het toevoegen van een link van het tabblad Stijlen naar het paneel Animaties.

Realtime updates in het tabblad Berekend

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

Bereken druksimulatie in sensoren

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

De situatie vóór en na het toevoegen van de optie voor CPU-drukemulatie aan het Sensorenpaneel.

Chromium-probleem: crbug.com/362277525 .

JavaScript-objecten met dezelfde naam, gegroepeerd per bron in het geheugenpaneel.

Het geheugenpaneel maakt nu onderscheid tussen JS-objecten met dezelfde naam die afkomstig zijn van verschillende bronnen en groepeert ze dienovereenkomstig.

De JavaScript-objecten met dezelfde naam worden zowel voor als na de bewerking gegroepeerd, ook op basis van de 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. Met name de verschillende secties zijn nu visueel gescheiden in 'kaarten'.

De voor- en na-secties worden in 'kaarten' verdeeld.

Het paneel met prestatie-inzichten is verouderd en verwijderd uit DevTools.

Alle belangrijke en nuttige functies van het paneel Prestatie-inzichten hebben nu een nieuwe plek gevonden in het paneel Prestaties , met name in live statistieken , het tabblad Inzichten in de zijbalk en het overzicht Lay-outwijzigingen . Deze versie maakt het paneel Prestatie-inzichten daarom overbodig en verwijdert het uit DevTools.

Het DevTools-team is dankbaar voor de feedback die u hebt gegeven over het uitfaseren van dit paneel en de algehele ervaring met het debuggen van prestaties. Zoals altijd stellen we uw mening en perspectieven zeer op prijs. Blijf ze vooral delen!

Diverse hoogtepunten

Dit zijn enkele noemenswaardige verbeteringen en bugfixes in deze release:

  • Prestatie :
    • Een onnodige limiet van 3 tekens voor zoekopdrachten is verwijderd.
    • De - knop is toegevoegd, waarmee je terugkeert naar het scherm met live statistieken.
    • De eerder defecte sneltoetsen Shift + S / W voor het inzoomen op een afbeelding zijn hersteld.
  • Elementen > Stijlen :
    • Anchor-center toegevoegd aan autocomplete 341991541 .
    • Er is een bug verholpen waardoor de flexbox-editor niet beschikbaar was voor waarden van twee woorden (341964645) .
  • Netwerk : Prefetch-fouten worden nu weergegeven als gele waarschuwingen in plaats van rode foutmeldingen, om aan te geven dat de weergave van de inhoud niet wordt beïnvloed 372055494 .

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' .