Wat is er nieuw in DevTools, Chrome 137

Sofia Emelianova
Sofia Emelianova
GitHub

Google I/O 2025-editie

Chrome DevTools zal dit jaar prominent aanwezig zijn op Google I/O. Er zal een mix zijn van livesessies en opgenomen sessies.

Om op de hoogte te blijven van interessante nieuwe functies, kunt u het volgende volgen:

Vergeet ook niet om af te stemmen op Rachel Andrew's What's new on the web-sessie op 20 mei 2025 | 16:30 uur PT.

Bekijk onze nieuwste video voor een snel overzicht van onze nieuwste hoogtepunten:

Wijzig en sla CSS-wijzigingen op in uw werkruimte met Gemini

Met een paar klikken kunt u nu Gemini CSS voor u laten wijzigen en repareren en via een gekoppelde werkruimtemap uw wijzigingen weer laten opslaan in bronbestanden op uw computer.

Automatische werkruimten zijn een experimentele functie. U kunt uw bestaande bronmap koppelen of een demo proberen.

Klik in het Elementenpaneel op AI vragen , vraag Gemini om CSS aan te passen en klik op Doorgaan om de wijzigingen live te testen. Vouw vervolgens Niet-opgeslagen wijzigingen uit, klik op Toepassen op werkruimte , controleer het verschil en klik op Alles opslaan .

Verbind een werkruimtemap en sla de wijzigingen op in uw bronbestanden

U kunt nu automatisch (of handmatig) een werkruimtemap koppelen, zodat DevTools JavaScript-, HTML- en CSS-wijzigingen kan opslaan in bronbestanden op uw computer.

Bekijk hoe het werkt met JavaScript:

Chromium-probleem: 404170628 .

Vraag Gemini naar prestatie-inzichten

Met één klik op de knop kunt u nu een chat starten met Gemini om de volgende prestatie-inzichten te onderzoeken en actie te ondernemen:

  • LCP per fase
  • LCP-verzoekdetectie
  • Renderblokkeringsverzoeken
  • De boosdoeners van lay-outverschuivingen
  • Latentie bij documentaanvraag

Het voor- en naproces van het toevoegen van de 'Vraag AI'-knop aan een inzicht in het Prestatiepaneel.

Laat gerust uw feedback over deze functie achter op crbug.com/371170842 .

Prestatiebevindingen annoteren met Gemini

U kunt Gemini nu vragen om annotaties te genereren over gebeurtenissen in de prestatietracering.

Dubbelklik op een gebeurtenis in de hoofdtrack en klik vervolgens op Label genereren naast het invoerveld. Gemini kan een label voorstellen op basis van de stack trace en context.

Voeg screenshots toe aan je chats met Gemini

In het AI-assistentiepaneel kunt u nu op de knop Schermafbeelding maken van klikken om een ​​schermafbeelding van de pagina te maken en deze naar uw chat met Gemini te sturen.

U kunt schermafbeeldingen gebruiken om extra visuele context aan uw prompts te geven, bijvoorbeeld om te controleren of alle zichtbare knoppen dezelfde afstand hebben.

Voor en na het toevoegen van de knop 'Screenshot maken' aan het paneel 'AI-assistentie'.

Nieuwe inzichten in het Prestatiepaneel

Deze versie brengt twee nieuwe inzichten naar het Prestatiepaneel : Gedupliceerd JavaScript en Verouderd JavaScript .

Gedupliceerde JavaScript

Met de nieuwe functie Prestaties > Inzichten > Gedupliceerd JavaScript worden in het netwerk de verzoeken voor grote gedupliceerde JavaScript-modules in uw bundels gemarkeerd, indien aanwezig op uw pagina.

Het inzicht 'Gedupliceerd JavaScript' in het paneel Prestaties.

U kunt ook op View Treemap in het inzicht klikken om JavaScript-afhankelijkheden te verkennen.

Oude JavaScript

De nieuwe functie Prestaties > Inzichten > Verouderde JavaScript markeert in het netwerk de verzoeken voor verouderde JavaScript indien aanwezig op uw pagina, bijvoorbeeld polyfills en transforms waarmee oudere browsers nieuwe JavaScript-functies kunnen gebruiken. Veel hiervan zijn echter niet nodig voor moderne browsers.

Het inzicht 'Legacy JavaScript' in het paneel Prestaties.

Speculaties ondersteunen nu regeltags

In Toepassing > Speculatieve ladingen worden nu tags weergegeven in plaats van URL's voor regels, mits er tags aanwezig zijn.

Voor en na het vervangen van de regelset-URL door een tag.

Chromium-probleem: 393408589 .

Vuurtoren 12.6.0

Het Lighthouse- paneel draait nu op Lighthouse 12.6.0.

Met name in deze versie gaat Lighthouse over op audits met prestatie-inzichten . In de categorie Prestaties van het Lighthouse -rapport kunt u nu inzichten uitproberen .

Voor en na het toevoegen van de optie om over te schakelen naar inzichten in een Lighthouse-rapport.

Zie ook de volledige lijst met wijzigingen .

Voor de basisbeginselen van het gebruik van het Lighthouse- paneel in DevTools raadpleegt u Lighthouse: Optimaliseer de snelheid van uw website .

Chromium-probleem: 40543651 .

Diverse hoogtepunten

Dit zijn enkele opmerkelijke oplossingen en verbeteringen in deze release:

  • Netwerk : parsen toegevoegd voor bekende formaten van servertimings.
  • U kunt nu rijen in tabellen deselecteren met Cmd / Ctrl + klikken (Chromium-probleem: 409474445 ).
  • Prestaties > Inzichten > Efficiënte cache gebruiken: de levensduur negeert nu activa met een TTL van 30 dagen of langer.

Toegankelijkheid

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

  • Prestatie : Initiatorpijlen in het spoor zijn nu beter zichtbaar.
  • Elementen : U kunt nu de volledige paginatoegankelijkheidsboomweergave in- of uitschakelen met de sneltoets A (Chromium-probleem: 40888478 ).

  • Schermlezers kondigen nu onder andere het volgende aan:

    • "Gekopieerd naar klembord" wanneer u codeblokken kopieert.
    • 'Toepassen op werkruimte' wanneer u wijzigingen toepast op uw werkruimte in de AI-assistentiechat .
    • 'Label genereren' wanneer u AI vraagt ​​dit te genereren in Prestaties > Annotaties .
    • Houd er rekening mee dat er suggesties voor prompts zijn in de AI- assistentiechat.
    • Lees de geschatte besparingen voor relevante inzichten in Prestaties > Inzichten .

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.