Chrome DevTools is een set webontwikkelaarstools die rechtstreeks in de Google Chrome-browser zijn ingebouwd. Met DevTools kunt u pagina's direct bewerken en problemen snel diagnosticeren, waardoor u sneller betere websites kunt bouwen.
Aan de slag Release-opmerkingen

Debuggen met AI

Ontdek hoe AI-innovaties in DevTools u in staat stellen meer en sneller te doen. Gebruik het Chrome DevTools MCP om de kracht van DevTools te verbinden met uw favoriete codeerprogramma's.
Laat Gemini u helpen bij het analyseren en verbeteren van de styling, het netwerk, de bronnen en de prestaties van uw website. Krijg hulp bij consolefouten en codevoorstellen in de panelen Console en Bronnen.
Ontdek innovaties op het gebied van AI.
Geef uw coderingsagents dezelfde vertrouwde tools die u gebruikt om netwerkactiviteit te inspecteren, traceringen vast te leggen en problemen met webapplicaties op te lossen binnen uw AI-workflow.

Verbind de Chrome DevTools MCP (Model Context Protocol)-server met de tool van uw keuze: Gemini CLI, Claude Code, Cline, Copilot en meer.

Meer informatie op GitHub
Krijg een uitgebreid en actiegericht beeld van de prestaties van uw pagina.
Leer hoe u bronnen die door uw pagina worden geladen, kunt inspecteren en deze vanuit uw browser kunt bewerken.
Analyseer en overschrijf netwerkverzoeken en -reacties direct.

Tips voor ontwikkelaarstools

Ontdek onze maandelijkse videoserie die je op een speelse manier door veelvoorkomende debugscenario's in DevTools loodst.
Bekijk het vernieuwde Prestatiepaneel, waarin wordt uitgelegd hoe u Core Web Vitals (LCP, CLS, INP) kunt meten en hoe u advies op maat van Gemini kunt krijgen.
Ga aan de slag met DevTools en word een debugpiraat! Ontdek technieken voor het emuleren van focusstijlen, het testen van formulieren met automatisch invullen en het oplossen van backendfouten met netwerkoverschrijvingen.
Ontdek de kracht van AI-ondersteunde foutopsporing met Chrome DevTools! Ontdek hoe Console Insights, AI-ondersteuning voor styling, prestaties, netwerk en bronnen, je workflow een boost kunnen geven.
Ontdek geavanceerde technieken voor het netwerkpaneel, waaronder het vinden van prestatieknelpunten, het debuggen van pop-ups, het configureren van netwerkvoorwaarden, het gebruiken van snelkoppelingen om netwerkaanvraaginitiators te bepalen en meer.

Krijg inzicht in prestaties

Een breed scala aan tools waarmee u verschillende aspecten van uw runtimeprestaties kunt meten en optimaliseren: het paneel Prestaties, Lighthouse en meer.
Leer meer over alle functies in het deelvenster Prestaties: hoe u een prestatietracering vastlegt, hoe u de tracering bekijkt en analyseert, en meer.
Leer meer over nieuwe DevTools-functies zoals CPU-throttlingkalibratie, zodat u uw beslissingen over prestatiedebuggen kunt baseren op gegevens uit de praktijk.
Ontdek de nieuwe prestatie-inzichten en de kracht van Lighthouse direct in het DevTools Performance-paneel.

Nieuws en updates

Bronnen inspecteren en bewerken

Leer meer over alle functies in het Bronnenpaneel: hoe u bestanden kunt bekijken en bewerken, fouten in JavaScript kunt opsporen en een werkruimte kunt instellen.
Aan de slag
Met Workspace kunt u wijzigingen die u binnen DevTools aanbrengt, opslaan in de broncode die op uw computer is opgeslagen. Leer hoe u een werkruimte inricht in uw eigen projecten.
Handleiding lezen

Netwerkactiviteit analyseren

Leer meer over alle functies in het Netwerkpaneel: inspecteer de antwoord- en verzoekteksten, overschrijf headers en meer.
Aan de slag
Een praktische tutorial die u door veelvoorkomende taken in het netwerkpaneel leidt.
Handleiding lezen

Meer gereedschap

Ontdek alle andere functies en mogelijkheden in DevTools.
Leer hoe u de DOM van een pagina kunt bekijken en wijzigen.
Leer hoe u de CSS van een pagina kunt bekijken en wijzigen.
Houd wijzigingen in HTML, CSS en JavaScript bij.
Log berichten en voer JavaScript uit.
Evalueer de prestaties van de website.
Vind geheugenproblemen die de prestaties van de pagina beïnvloeden, waaronder geheugenlekken en meer.
Inspecteer, wijzig en debug webapps, test de cache, bekijk opslag en meer.
Animaties inspecteren en aanpassen.
Neem gebruikersstromen op, speel ze opnieuw af en bewerk hun stappen.
Ontdek een verzameling opties die de weergave van webinhoud beïnvloeden.
Inspecteer en debug opgeslagen adressen.
Zoek en los problemen met uw website op.
Zorg ervoor dat een pagina volledig beveiligd is via HTTPS.
Bekijk informatie en debug mediaspelers per browsertabblad.
Apparaatsensoren emuleren.
Authenticatoren emuleren.