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 .
Console-inzichten en AI-ondersteuning helpen u JavaScript-fouten, prestaties en stijl efficiënter te debuggen en op te lossen.
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.

AI-ondersteuning en console-inzichten

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.
Ontdek gebruiksscenario's voor AI-ondersteuning in Chrome DevTools en ontdek hoe dit uw foutopsporingsworkflow kan ondersteunen op het gebied van stijl, prestaties en meer.
Begrijp consoleberichten en fouten in DevTools en leer hoe u deze kunt oplossen - zonder kopiëren en plakken.

DevTools-tips

Ontdek onze maandelijkse videoserie waarin wordt uitgelegd hoe u DevTools kunt gebruiken om veelvoorkomende webontwikkelingsproblemen op te lossen.
Leer hoe u een prestatietracering in DevTools registreert en analyseert om prestatieproblemen te identificeren en op te lossen.
Debug LCP-problemen en gebruik Crux-gegevens om te zien of u een vergelijkbare ervaring oplost als uw gebruikers
Duik in de verschillende soorten browsercache en hoe u deze kunt inspecteren en beheren in Chrome DevTools!
Probeer je een element te inspecteren en “poef” dat het weg is? Het is alsof je code verstoppertje met je speelt!

Krijg prestatie-inzichten

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.
Het Prestatiepaneel helpt ontwikkelaars al ruim 15 jaar hun runtimeprestaties te meten en te optimaliseren. Ontdek hoe het zich in de toekomst ontwikkelt.
Annoteer sporen op hun plaats en sla ze rechtstreeks op in het traceringsbestand, zodat u ze eenvoudig kunt delen.

Nieuws en updates

Inspecteer en bewerk bronnen

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

Analyseer netwerkactiviteit

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.