Wat is er nieuw in DevTools, Chrome 131

Sofia Emelianova
Sofia Emelianova
GitHub

Debug CSS met Gemini

Chrome DevTools krijgt het nieuwe experimentele AI-hulppaneel waar u met Gemini kunt chatten en hulp kunt krijgen bij het debuggen van uw CSS.

Probeer het nu! Klik in het paneel Elementen met de rechtermuisknop op een element en selecteer Ask AI of klik op het overeenkomstige elementknop naast het element. DevTools opent het nieuwe AI-assistentiepaneel .

De menuoptie 'Ask AI' en de bijbehorende knop.

Het nieuwe paneel zal u vragen de overeenkomstige instelling in te schakelen. Zorg ervoor dat u aan de vereisten voldoet, schakel de instellingsschakelaar in en ga terug naar het AI-assistentiepaneel . Het zal het element gebruiken dat u als context hebt geselecteerd. Typ uw vraag over het element.

Het nieuwe AI-assistentiepaneel beantwoordt een prompt.

Voor meer informatie over hoe u het nieuwe paneel het beste kunt gebruiken, raadpleegt u 5 coole dingen die u kunt doen met DevTools AI Assistance en bekijkt u AI-hulp voor styling .

Het DevTools-team kijkt uit naar uw feedback. Laat het gerust achter op crbug.com/364805393 .

Beheer AI-functies op een speciaal tabblad met instellingen

Je kunt nu alle AI-functies op één plek beheren: de nieuwe Instellingen >Tabblad AI-innovaties . Het somt belangrijke overwegingen op, beschrijft AI-functies en laat u deze afzonderlijk in- en uitschakelen.

Het nieuwe tabblad AI-innovaties.

Zie Instellingen > AI-innovaties voor meer informatie.

Console-inzichten zijn slechts één klik verwijderd

DevTools vereist niet langer een ingeschakelde instellingensynchronisatie voor AI-functies. De eerder uitgebrachte Console-inzichten , samen met AI-hulp voor styling , zijn dus één klik verwijderd.

Als u bent ingelogd bij Chrome, schakelt u deze functies in via Instellingen >AI-innovaties en u bent klaar om te gaan.

Verbeteringen in het prestatiepaneel

Deze versie brengt een aantal verbeteringen aan in het Prestatiepaneel .

Annoteer en deel prestatiebevindingen

Het paneel Prestaties krijgt het nieuwe tabblad Annotaties in een uitvouwbare zijbalk aan de linkerkant die het proces van het maken van notities voor tracering en samenwerking stroomlijnt bij het delen van prestatiebevindingen.

U kunt nu gebeurtenissen labelen en verbinden met pijlen en tijdsbereiken direct op de tracering markeren. Vervolgens kunt u geannoteerde traceringen opslaan, delen en uploaden naar het prestatiepaneel .

Het nieuwe tabblad Annotaties in de zijbalk aan de linkerkant en geannoteerde gebeurtenissen, bereik en verbinding.

Krijg prestatie-inzichten rechtstreeks in het prestatiepaneel

U kunt nu bruikbare inzichten ontdekken op het nieuwe tabblad Inzichten in de linkerzijbalk van het prestatiepaneel . De inzichten zijn geconsolideerd uit het Lighthouse-rapport en het paneel Prestatie-inzichten, dat binnenkort wordt beëindigd .

Het tabblad Inzichten is bedoeld om begeleide analyses te bieden en bruikbare inzichten te suggereren over prestatieproblemen die uw website kunnen vertragen. Om gebruik te maken van inzichten, opent u het tabblad in de linkerzijbalk van het prestatiepaneel , vouwt u verschillende categorieën uit, beweegt u de muisaanwijzer en klikt u op items. Het Prestatiepaneel zal de corresponderende gebeurtenissen in de trace markeren.

Het DevTools-team kijkt uit naar uw feedback over het nut van inzichten, manieren om deze te verbeteren, en uw ervaring met het gebruik ervan met andere tools, zoals PageSpeed ​​Insights en Lighthouse . Laat gerust uw feedback achter op crbug.com/371170842 .

Herken overmatige lay-outverschuivingen gemakkelijker

Het Layout Shifts -spoor krijgt een nieuw uiterlijk. De lay-outverschuivingen zijn nu gemarkeerd met (beter zichtbare) paarse diamanten en zijn gegroepeerd in clusters op basis van hun nabijheid op de tijdlijn . Zowel ploegendiensten als hun clusters krijgen een georganiseerde tabel met timings, scores, elementen en potentiële boosdoeners op het tabblad Samenvatting .

De voor en na een update van de track 'Lay-outverschuivingen' en het gereorganiseerde tabblad 'Samenvatting'.

Bovendien krijgt de live-statistiekenweergave het logboek met lay-outverschuivingen met scores en elementen naast het tabblad Interacties .

Het voor en na het toevoegen van het logboek 'Lay-outverschuivingen' aan de live-statistiekenweergave.

Chroomuitgave: 369100729 .

Zoek de niet-gecomponeerde animaties

De animatietrack toont u nu nuttige informatie over niet-samengestelde animaties:

  • Geeft de animaties een naam op basis van de bijbehorende CSS-eigenschap, indien aanwezig.
  • Markeert niet-samengestelde animaties met rode driehoekjes in de track.
  • Toont u de reden voor het mislukken van de compositie op het tabblad Samenvatting .

De voor en na het benoemen van animaties in de track, het markeren van niet-samengestelde animaties en het tonen van de reden van falen.

Zie Vasthouden aan eigenschappen die alleen voor de compositor gelden en het aantal lagen beheren voor meer informatie.

Chroomuitgave: 41006273 .

Hardware-concurrency verhuist naar sensoren

De instelling voor gelijktijdigheid van hardware wordt verplaatst van het paneel Prestaties naar een geschiktere plaats: het paneel Sensors .

De voor en na het verplaatsen van de instelling 'Hardware gelijktijdigheid' naar het paneel Sensoren.

Chroomuitgave: 371463665 .

Negeer anonieme scripts en concentreer u op uw code in stacktraces

Stapelsporen in de console detecteren, negeren, samenvouwen en (indien uitgevouwen) frames die afkomstig zijn van bestanden die op de negeerlijst staan, nu correct. Voorheen werd de functienaam niet grijs weergegeven in de uitgebreide tracering.

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

De voor en na verbetering van de negeerlijst in stacktraces.

Bovendien, wanneer u met de rechtermuisknop klikt en Opslaan als... in het consolelogboek, wordt de tekst Meer/minder weergeven niet opgeslagen.

Chroomuitgaves: 40279542 , 40945570 , 345248263 .

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

Het tabblad Elementen > Stijlen ondersteunt nu het volgende:

  • Rasteroverlay in het venster geeft nu rasters weer voor de schrijfmodi sideways-rl en sideways-lr .
  • Lost CSS-brede trefwoorden op. In de praktijk betekent dit dat als inherit bijvoorbeeld een kleur is, op het tabblad Stijlen ernaast een kleurkiezer wordt weergegeven. Het voor en na het oplossen van CSS-brede zoekwoorden.

Chroomuitgaves: 40280717 , 40706051 , 40501131 .

Lighthouse-audits voor niet-HTTP-pagina's in tijdspanne- en momentopnamemodi

Lighthouse kan nu rapporten genereren voor niet-HTTP-pagina's in tijdspanne- en momentopnamemodi.

De voor en na het inschakelen van audit voor niet-HTTP-pagina's in tijdspanne- en momentopnamemodi.

Toegankelijkheid

Deze versie heeft de volgende toegankelijkheidsverbeteringen:

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

Chroomuitgave: 372411090 .

Diverse hoogtepunten

Dit zijn enkele opmerkelijke oplossingen en verbeteringen in deze release:

  • De instellingen voor beperking worden nu correct gesynchroniseerd tussen de panelen Prestaties en Netwerk ( 370332090 ).
  • Toepassing > Achtergrondservices > Speculatieve ladingen > Regels heeft nu een {} mooie afdrukknop, vergelijkbaar met Bronnen > Editor ( 40279147 ).
  • Live-uitdrukkingen : als u op Tab drukt nadat u een optie voor automatisch aanvullen hebt geselecteerd, wordt nu het bewerkingsveld verlaten in plaats van dat de tekst wordt ingesprongen ( 349939551 ).
  • Elementen > Stijlen : anchor() en anchor-size() ondersteunen een nieuwe syntaxis waarin u argumenten opnieuw kunt ordenen en de richting van anchor-size() kunt weglaten ( 343516786 ). Bovendien vaste fallback-weergave ( 365802559 ).
  • Netwerk : Vaste GraphQL-voorbeelden ( 369931288 ).
  • Prestaties : rapporteert nu de incrementele voortgang van het laden en verwerken van traceringen.
  • WebAuthn : werkt nu dynamisch de referenties bij die zijn gewijzigd door signal* -methoden ( 368467199 ).
  • WebAssembly: Een waarschuwing in de console informeert u nu of er meerdere debug-symbolen beschikbaar zijn voor een WebAssembly-module en welke in gebruik is ( 40879198 , 369515221 ).
  • De Core Web Vitals-overlay is verwijderd van het tabblad Rendering 328487897 .
  • Voor generatieve AI-functies is nu geen synchronisatie van Chrome-instellingen vereist.

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 .