Wat is er nieuw in DevTools, Chrome 131

Sofia Emelianova
Sofia Emelianova
GitHub

CSS debuggen met Gemini

Chrome DevTools krijgt het nieuwe experimentele AI- assistentiepaneel, waarmee je kunt chatten met Gemini en hulp kunt krijgen bij het debuggen van je CSS.

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

De menuoptie 'Vraag AI' en de bijbehorende knop.

Het nieuwe paneel vraagt ​​je om de bijbehorende instelling in te schakelen. Zorg ervoor dat je aan de vereisten voldoet, zet de schakelaar voor de instelling aan en ga terug naar het AI-assistentiepaneel . Het geselecteerde element wordt dan als context gebruikt. Typ je vraag over het element.

Het nieuwe AI-assistentiepaneel reageert op een prompt.

Voor meer informatie over hoe u het nieuwe paneel het beste kunt gebruiken, zie 5 leuke dingen om te doen met DevTools AI Assistance en bekijk AI-assistentie voor styling .

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

Beheer AI-functies in een speciaal tabblad Instellingen

U kunt nu alle AI-functies op één plek beheren: de nieuwe Instellingen >Tabblad AI-innovaties . Hier vindt u belangrijke aandachtspunten, beschrijvingen van AI-functies en de mogelijkheid om deze afzonderlijk in en uit te schakelen.

Het nieuwe tabblad AI-innovaties.

Voor meer informatie, zie Instellingen > AI-innovaties .

Console-inzichten zijn met één klik bereikbaar

DevTools vereist geen ingeschakelde instellingensynchronisatie meer voor AI-functies. De eerder uitgebrachte Console Insights , samen met AI-ondersteuning voor styling , zijn nu met één klik beschikbaar.

Als u bent aangemeld bij Chrome, schakelt u deze functies in via Instellingen >Voeg AI-innovaties toe en u bent klaar om aan de slag te gaan.

Verbeteringen aan het prestatiepaneel

Deze versie brengt een aantal verbeteringen aan het Prestatiepaneel .

Prestatiebevindingen annoteren en delen

Het paneel Prestaties heeft het nieuwe tabblad Annotaties in een uitvouwbare zijbalk aan de linkerkant. Hiermee wordt het proces voor het maken van notities voor traceringsonderzoek en samenwerking bij het delen van prestatiebevindingen gestroomlijnd.

Je kunt nu gebeurtenissen labelen en verbinden met pijlen en tijdsintervallen direct op de trace markeren. Je kunt vervolgens geannoteerde traces opslaan, delen en uploaden naar het paneel Prestaties .

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

Krijg direct inzicht in prestaties in het paneel Prestaties

U kunt nu bruikbare inzichten ontdekken in het nieuwe tabblad 'Inzichten ' in de linkerzijbalk van het paneel 'Prestaties' . De inzichten zijn geconsolideerd uit het Lighthouse-rapport en het paneel 'Prestaties', dat binnenkort wordt afgeschaft .

Het tabblad 'Inzichten' biedt begeleide analyses en suggesties voor bruikbare inzichten over prestatieproblemen die uw website kunnen vertragen. Om gebruik te maken van inzichten opent u het tabblad in de linkerzijbalk van het paneel 'Prestaties' , vouwt u verschillende categorieën uit en beweegt u de muisaanwijzer over de items en klikt u erop. Het paneel 'Prestaties' markeert de bijbehorende gebeurtenissen in de trace.

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

Overmatige lay-outverschuivingen gemakkelijker opsporen

Het spoor Lay-outverschuivingen krijgt een nieuwe look. De lay-outverschuivingen worden nu gemarkeerd met (duidelijker zichtbare) paarse ruiten en gegroepeerd in clusters op basis van hun nabijheid op de tijdlijn . Zowel de verschuivingen als hun clusters krijgen een overzichtelijke tabel met timing, scores, elementen en mogelijke boosdoeners in het tabblad Samenvatting .

Voor en na de update van het spoor 'Lay-outverschuivingen' en het gereorganiseerde tabblad 'Overzicht'.

Bovendien worden in de weergave met live-statistieken het logboek met lay-outverschuivingen met scores en elementen weergegeven naast het tabblad Interacties .

Voor en na het toevoegen van het logboek 'Lay-outverschuivingen' aan de live-metrische weergave.

Chromium-probleem: 369100729 .

Ontdek de niet-samengestelde animaties

Het Animaties- spoor toont u nu nuttige informatie over niet-samengestelde animaties:

  • Benoemt de animaties volgens de overeenkomstige CSS-eigenschap, indien aanwezig.
  • Markeert niet-samengestelde animaties met rode driehoeken in het spoor.
  • Geeft de reden voor het mislukken van de compositie weer op het tabblad Samenvatting .

De voor- en nabenoeming van animaties in het spoor, het markeren van niet-samengestelde animaties en het weergeven van de reden voor het mislukken.

Zie Vasthouden aan Compositor-Only-eigenschappen en Lagenaantal beheren voor meer informatie.

Chromium-probleem: 41006273 .

Hardwareconcurrentie verhuist naar sensoren

De instelling Hardware-gelijktijdigheid is verplaatst van het paneel Prestaties naar een geschiktere plek: het paneel Sensoren .

Het voor- en naproces van het verplaatsen van de instelling 'Hardwareconcurrentie' naar het paneel Sensoren.

Chromium-probleem: 371463665 .

Negeer anonieme scripts en concentreer u op uw code in stack traces

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

U 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 voor- en na-verbetering negeren de vermelding in stack traces.

Wanneer u met de rechtermuisknop op het consolelogboek klikt en Opslaan als... selecteert, wordt de tekst Meer/minder weergeven niet opgeslagen.

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 het viewport geeft nu rasters weer voor de schrijfmodi sideways-rl en sideways-lr .
  • Lost CSS-brede trefwoorden op. Praktisch gezien betekent dit dat, als bijvoorbeeld inherit een kleur is, het tabblad 'Stijlen' een kleurenkiezer ernaast weergeeft. Voor en na het oplossen van CSS-brede zoekwoorden.

Chromium-problemen: 40280717 , 40706051 , 40501131 .

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

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

Voor en na het inschakelen van de audit voor een niet-HTTP-pagina in de tijdspanne- en momentopnamemodi.

Toegankelijkheid

Deze versie heeft 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 Spatie te drukken.
  • In Prestaties 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 kunt u erdoorheen bladeren.

Chromium-probleem: 372411090 .

Diverse hoogtepunten

Dit zijn enkele opmerkelijke oplossingen en verbeteringen in deze release:

  • De instellingen voor snelheidsbeperking worden nu correct gesynchroniseerd tussen de panelen Prestatie en Netwerk ( 370332090 ).
  • Toepassing > Achtergrondservices > Speculatieve ladingen > Regels heeft nu een {} -afdrukknop die lijkt op Bronnen > Editor ( 40279147 ).
  • Live-expressies : Als u op Tab drukt nadat u een optie voor automatisch aanvullen hebt geselecteerd, wordt het bewerkingsveld nu verlaten in plaats van dat de tekst inspringt ( 349939551 ).
  • Elementen > Stijlen : anchor() en anchor-size() ondersteunen een nieuwe syntaxis waarmee u argumenten opnieuw kunt ordenen en anchor-size() richting kunt weglaten ( 343516786 ). Daarnaast is de fallback-rendering aangepast ( 365802559 ).
  • Netwerk : GraphQL-voorbeelden opgelost ( 369931288 ).
  • Prestaties : Rapporteert nu de incrementele voortgang van het laden en verwerken van traceringen.
  • WebAuthn : werkt nu dynamisch inloggegevens bij die zijn gewijzigd door signal* -methoden ( 368467199 ).
  • WebAssembly: Er verschijnt nu een waarschuwing in de console waarin wordt aangegeven of er meerdere foutopsporingssymbolen beschikbaar zijn voor een WebAssembly-module en welke er 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 meer vereist.

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