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 Ontdek wat er nieuw is
DevTools ondersteunt een breed scala aan algemene webontwikkelingstaken. Ga verder op deze pagina en ontdek enkele van de belangrijkste functies van DevTools. Weet u niet waar u moet beginnen of gebruikt u DevTools voor de eerste keer? Bekijk een inleiding tot DevTools .
AI-assistentie, console-inzichten, codesuggesties, automatische annotaties en meer helpen je efficiënter te debuggen.
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.

Debuggen met AI

Ontdek hoe AI-innovaties in DevTools u meer en sneller laten doen.
Laat Gemini u helpen bij het analyseren en verbeteren van de stijl, het netwerk, de bronnen en de prestaties van uw website.
Gebruik Gemini om codesuggesties te krijgen terwijl u code schrijft in de panelen Console en Bronnen.
Begrijp consoleberichten en fouten in DevTools en leer hoe u deze kunt oplossen - zonder kopiëren en plakken.
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

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.