Wat is er nieuw in DevTools, Chrome 131

Sofia Emelianova
Sofia Emelianova
GitHub

Debug CSS met Gemini

Chrome DevTools krijgt een nieuw experimenteel AI-assistentiepaneel waarmee je met Gemini kunt chatten en hulp kunt krijgen bij het debuggen van je CSS.

Probeer het nu! Klik in het paneel Elementen met de rechtermuisknop op een element en selecteer Vraag AI of klik op de bijbehorende optie.Klik op de knop naast het element. DevTools opent het nieuwe AI-assistentiepaneel .

De menuoptie 'Vraag AI' en de bijbehorende knop.

Het nieuwe paneel zal u vragen de bijbehorende instelling in te schakelen. Zorg ervoor dat u aan de vereisten voldoet, schakel de instelling in en ga terug naar het AI-assistentiepaneel . Het paneel gebruikt het door u geselecteerde element als context. Typ uw vraag over het element.

Het nieuwe AI-assistentiepaneel beantwoordt een vraag.

Voor meer informatie over hoe je het nieuwe paneel het beste kunt gebruiken, zie 5 coole dingen die je kunt doen met de AI-ondersteuning van DevTools en bekijk de AI-ondersteuning voor styling .

Het DevTools-team kijkt uit naar uw feedback. U kunt deze achterlaten op crbug.com/364805393 .

Beheer AI-functies in een speciaal instellingentabblad.

Je kunt nu alle AI-functies op één plek beheren: de nieuwe instellingen > >Het tabblad AI-innovaties bevat een lijst met belangrijke aandachtspunten, een beschrijving van de AI-functies en de mogelijkheid om deze individueel in en uit te schakelen.

Het nieuwe tabblad met AI-innovaties.

Voor meer informatie, zie Instellingen > AI-innovaties .

Console-inzichten zijn slechts één klik verwijderd.

Voor AI-functies in DevTools is het niet langer nodig om de instellingen te synchroniseren. De eerder uitgebrachte inzichten in de console , samen met AI-ondersteuning voor styling , zijn dus met één klik beschikbaar.

Als je bent ingelogd bij Chrome, schakel je deze functies in via Instellingen >Dankzij AI-innovaties ben je klaar om te beginnen.

Prestatieverbeteringen

Deze versie bevat een aantal verbeteringen aan het prestatiepaneel .

Beschrijf en deel de prestatiebevindingen.

Het paneel Prestaties krijgt een nieuw tabblad Annotaties in een uitklapbare zijbalk aan de linkerkant. Dit stroomlijnt het proces van het maken van notities voor het verkennen van traceringen en voor samenwerking bij het delen van prestatiebevindingen.

Je kunt nu gebeurtenissen labelen en verbinden met pijlen en tijdsbereiken direct op de trace markeren. Vervolgens kun je geannoteerde traces opslaan, delen en uploaden naar het Performance- paneel.

Het nieuwe tabblad 'Annotaties' in de zijbalk aan de linkerkant toont geannoteerde gebeurtenissen, bereiken en verbindingen.

Krijg direct inzicht in de prestaties in het prestatiepaneel.

In het nieuwe tabblad 'Inzichten' in de linkerzijbalk van het paneel 'Prestaties ' vindt u nu bruikbare inzichten. Deze inzichten zijn samengevoegd uit het Lighthouse-rapport en het paneel 'Prestatiesinzichten' , dat binnenkort wordt uitgefaseerd .

Het tabblad 'Inzichten' is bedoeld om begeleide analyses te bieden en bruikbare inzichten te suggereren over prestatieproblemen die uw website kunnen vertragen. Om inzichten te gebruiken, opent u het tabblad in de linkerzijbalk van het paneel 'Prestaties ', vouwt u de verschillende categorieën uit en beweegt u de muis over de items om erop te klikken. Het paneel 'Prestaties ' markeert vervolgens de bijbehorende gebeurtenissen in de trace.

Het DevTools-team kijkt uit naar uw feedback over de bruikbaarheid van de inzichten, manieren om deze te verbeteren en uw ervaring met het gebruik ervan in combinatie met andere tools, zoals PageSpeed ​​Insights en Lighthouse . U kunt uw feedback achterlaten op crbug.com/371170842 .

Overmatige verschuivingen in de lay-out zijn gemakkelijker te herkennen

Het overzicht van lay-outwijzigingen heeft een nieuwe look gekregen. De lay-outwijzigingen zijn nu gemarkeerd met (beter zichtbare) paarse ruitjes en zijn gegroepeerd in clusters op basis van hun nabijheid op de tijdlijn . Zowel de wijzigingen als de clusters worden overzichtelijk weergegeven in een tabel met tijden, scores, elementen en mogelijke oorzaken in het tabblad Samenvatting .

De situatie vóór en na een update van het overzicht 'Lay-outwijzigingen' en een herindeling van het tabblad 'Samenvatting'.

Bovendien toont de live statistiekenweergave het logboek met lay-outwijzigingen, inclusief scores en elementen, naast het tabblad Interacties .

De situatie vóór en na het toevoegen van het logboek 'Lay-outwijzigingen' aan de live-statistiekenweergave.

Chromium-probleem: 369100729 .

Zoek de niet-samengestelde animaties.

In het onderdeel Animaties vind je nu nuttige informatie over niet-gecomponeerde animaties:

  • Geeft de animaties een naam op basis van de corresponderende CSS-eigenschap, indien aanwezig.
  • Niet-samengestelde animaties worden in het spoor gemarkeerd met rode driehoeken.
  • De reden voor de compositiefout wordt weergegeven in het tabblad Samenvatting .

De animaties voor en na het benoemen van de track, het markeren van niet-samengestelde items en het weergeven van de reden van de fout.

Zie voor meer informatie ' Houd je aan eigenschappen die alleen voor de compositor beschikbaar zijn' en 'Het aantal lagen beheren' .

Chromium-probleem: 41006273 .

Hardware-gelijktijdigheid verschuift naar sensoren.

De instelling voor gelijktijdige hardwareverwerking wordt verplaatst van het paneel Prestaties naar een meer geschikte plek: het paneel Sensoren .

De situatie vóór en na het verplaatsen van de instelling 'Hardware-gelijktijdigheid' naar het paneel Sensoren.

Chromium-probleem: 371463665 .

Negeer anonieme scripts en concentreer je op je code in de stacktraces.

Stacktraces in de console detecteren, negeren, vouwen samen en (indien uitgevouwen) kleuren nu frames die afkomstig zijn van bestanden op de negeerlijst correct grijs. Voorheen werd de functienaam in de uitgevouwen trace niet grijs weergegeven.

Je kunt ook de nieuwe 'Instellingen' > 'Negeerlijst' > Anonieme scripts van eval of console' inschakelen om DevTools zo in te stellen dat anonieme scripts zonder bron-URL worden genegeerd.

De situatie vóór en na de verbetering van de negeerlijst in stacktraces.

Bovendien wordt de tekst 'Meer/minder weergeven ' niet opgeslagen wanneer je met de rechtermuisknop op het consolelogbestand klikt en 'Opslaan als...' selecteert .

Chromium-problemen: 40279542 , 40945570 , 345248263 .

Elementen > Stijlen: Ondersteuning voor sideways-* schrijfmodi voor rasteroverlays en CSS-brede trefwoorden.

Het tabblad Elementen > Stijlen ondersteunt nu het volgende:

  • De rasteroverlay in de viewport toont nu rasters voor de schrijfmodi sideways-rl en sideways-lr .
  • Lost CSS-brede trefwoorden op. In de praktijk betekent dit bijvoorbeeld dat als inherit een kleur is, er een kleurenkiezer naast die kleur verschijnt op het tabblad Stijlen . De situatie vóór en na het oplossen van CSS-brede zoekwoorden.

Chromium-problemen: 40280717 , 40706051 , 40501131 .

Lighthouse voert audits uit op niet-HTTP-pagina's in tijdsbestek- en momentopnamemodus.

Lighthouse kan nu rapporten genereren voor niet-HTTP-pagina's in tijdsbestek- en momentopnamemodus.

De situatie vóór en na het inschakelen van audit voor niet-HTTP-pagina's in de tijdsspanne- en momentopnamemodus.

Toegankelijkheid

Deze versie bevat de volgende verbeteringen op het gebied van toegankelijkheid:

  • In Bronnen > Editor kunnen tabbladen met geopende bestanden nu worden gesloten door de focus op de X- knop te plaatsen en op Enter of de spatiebalk te drukken.
  • In Performance kunt u nu een item in de trace selecteren en op de spatiebalk drukken om het contextmenu te openen.
  • In Performance is het tabblad Insights in de zijbalk aan de linkerkant toegankelijk via het toetsenbord en kan er met de tabtoets doorheen worden geschakeld.

Chromium-probleem: 372411090 .

Diverse hoogtepunten

Dit zijn enkele noemenswaardige verbeteringen en bugfixes in deze release:

  • De instellingen voor bandbreedtebeperking worden nu correct gesynchroniseerd tussen de prestatie- en netwerkpanelen ( 370332090 ).
  • Applicatie > Achtergrondservices > Speculatieve laadtijden > Regels heeft nu een knop voor een mooie opmaak met accolades {} vergelijkbaar met Bronnen > Editor ( 40279147 ).
  • Live-uitdrukkingen : Als je na het selecteren van een autocomplete-optie op Tab drukt, verlaat je nu het bewerkingsveld in plaats van dat de tekst wordt ingesprongen ( 349939551 ).
  • Elementen > Stijlen : anchor() en anchor-size() ondersteunen een nieuwe syntaxis waarmee je argumenten opnieuw kunt ordenen en de richting van anchor-size() kunt weglaten ( 343516786 ). Daarnaast is de fallback-rendering gecorrigeerd ( 365802559 ).
  • Netwerk : GraphQL-voorbeelden opgelost ( 369931288 ).
  • Prestaties : Rapporteert nu de incrementele voortgang van het laden en verwerken van traceringen.
  • WebAuthn : Nu worden referenties die zijn gewijzigd door signal* -methoden dynamisch bijgewerkt ( 368467199 ).
  • WebAssembly: Een waarschuwing in de console laat je nu weten of er meerdere debugsymbolen beschikbaar zijn voor een WebAssembly-module en welk symbool in gebruik is ( 40879198 , 369515221 ).
  • De Core Web Vitals-overlay is verwijderd uit het tabblad Weergave 328487897 .
  • Generatieve AI-functies vereisen nu geen synchronisatie met Chrome-instellingen meer.

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