In Chrome 144 heeft het team een langverwachte functie aan de Chrome DevTools MCP-server toegevoegd: het nieuwe paneel voor aanvraagvoorwaarden, en verbeteringen voor het debuggen van lettertypen en overgenomen stylesheets.
Dit is het einde van de indrukwekkende lijst met functies die we in 2025 hebben uitgebracht. Benieuwd of je er een paar hebt gemist? Bekijk dan de hoogtepunten hieronder of blader door onze eerdere edities van 'Wat is nieuw in DevTools'.
Updates voor de DevTools MCP-server
We hebben diverse bugfixes doorgevoerd voor de DevTools MCP-server en versie 0.12.1 uitgebracht. Deze versie introduceert een belangrijke nieuwe functie: automatische verbinding. Hiermee kunt u een bestaande browsersessie hergebruiken . Dankzij de automatische verbinding kunt u zelf beginnen met debuggen in Chrome en vervolgens DevTools MCP naar dezelfde Chrome-instantie laten verwijzen om verder te gaan waar u gebleven was.
Lees meer over automatische verbinding voor DevTools MCP in het bijbehorende blogbericht . Bekijk de openbare changelog op GitHub voor een volledige lijst met wijzigingen en bugfixes.
Individuele netwerkverzoekbeperking
Het paneel voor het blokkeren van netwerkverzoeken is hernoemd naar 'Verzoekvoorwaarden' . Naast het blokkeren van verzoeken kunt u in dit paneel nu ook individuele verzoeken beperken .
Open het paneel via ⋮ > Meer tools > Aanvraagvoorwaarden . Schakel het selectievakje 'Blokkeren en beperken inschakelen' in om het blokkeren van aanvragen te activeren. Klik op de + knop om een nieuw tekstpatroon toe te voegen. Klik op het om alle regels te verwijderen.
Leer in de bijgewerkte documentatie hoe je individuele netwerkverzoeken kunt beperken.
Regels voor @font-face en @font-feature-values bewerken
@font-face en @font-feature-values worden nu weergegeven in het paneel Stijlen en kunnen daar worden bewerkt.
Overgenomen stylesheets in het Elementenpaneel
Het paneel Elementen toont nu overgenomen stylesheets onder schaduwroots en documentroots. Dit maakt het voor gebruikers die met geconstrueerde stylesheets werken gemakkelijker om stylesheets te vinden die van invloed zijn op hun elementen en om stijlen te debuggen, vooral wanneer ze onverwacht niet worden toegepast.
Wat was er nieuw in DevTools 2025?
AI-innovaties
Beginnend met inzichten in de console , zijn AI-innovaties inmiddels een integraal onderdeel geworden van Chrome DevTools, waarbij het AI-assistentiepaneel de centrale hub is voor contextbewuste, door AI ondersteunde foutopsporing. Met code-suggesties in de console- en broncodepanelen en automatische annotaties van Gemini in uw prestatietraceringen, biedt DevTools een uitgebreide set AI-gestuurde tools om uw workflows te stroomlijnen.
- Complete stylingcorrecties: vraag Gemini om CSS-problemen op te lossen en sla, in combinatie met Workspaces, die wijzigingen direct op in je bronbestanden op de schijf.
- Vraag naar prestaties: U kunt nu een volledige prestatietrace bespreken met behulp van AI, diepgaand inzicht krijgen in specifieke prestaties of Gemini gebruiken om een trace te annoteren .
- Visuele foutopsporing: Het AI-assistentiepaneel is multimodaal geworden, waardoor u afbeeldingen kunt uploaden of schermafbeeldingen kunt maken om Gemini te helpen visuele storingen te begrijpen en op te sporen.
Prestatie
We hebben het prestatiepaneel opnieuw ontworpen om het debuggen van prestaties minder overweldigend en meer gericht op actie te maken. Zo bevat een opgenomen trace nu bijvoorbeeld samengestelde inzichten waarmee u knelpunten sneller kunt identificeren en traces sneller kunt doorzoeken. Andere verbeteringen zijn onder meer de volgende:
- Bruikbare inzichten: We hebben een robuuste set prestatie-inzichten geïntroduceerd, waarmee specifieke problemen zoals LCP per fase , oorzaken van lay-outverschuivingen en latentie van documentaanvragen worden geïdentificeerd.
- Praktische context: We hebben veldgegevens en CruX-gegevens rechtstreeks in het prestatiepaneel geïntegreerd, zodat u laboratoriumresultaten kunt vergelijken met de ervaringen van echte gebruikers.
- Frameworkcontext: Angular v20 en React v19.2 maken nu gebruik van de Extensibility API . Het is nu gemakkelijker om knelpunten in de hoofdthread te begrijpen dankzij een direct overzicht van je componentenstructuur. Met dank aan onze samenwerking met het Angular- en React-team!
- Verbeterde samenwerking: Het delen van traceringen is eenvoudiger geworden dankzij de mogelijkheid om traceringen te annoteren en opties om broninhoud en bronkaarten te exporteren , zodat een collega of uzelf in de toekomst over alle benodigde context beschikt.
Webplatform
DevTools is meegeëvolueerd met het webplatform en heeft speciale tools toegevoegd voor de nieuwste CSS-specificaties, terwijl de ontwikkelaarservaring voor bestaande functies is verbeterd.
We hebben diepgaande tracering toegevoegd voor complexe CSS-variabelenketens , Baseline-beschikbaarheid voor tooltips van eigenschappen, en onlangs hebben we debugondersteuning geïntroduceerd voor complexe invoeranimaties met behulp van de @starting-style regel en een visuele editor voor de nieuwe display: masonry layout.
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.
- Stuur feedback en suggesties voor nieuwe functies naar crbug.com .
- Meld een probleem met DevTools via de Meer opties ' > 'Help' > 'Een probleem met DevTools melden' in DevTools.
- Tweet naar @ChromeDevTools .
- Laat reacties achter op de YouTube-video's 'Wat is er nieuw in DevTools' of 'DevTools-tips' .