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
Alle manieren waarop u Chrome DevTools kunt openen.
Blijf op de hoogte van de nieuwste DevTools-wijzigingen.
Een reeks hapklare video's om u te helpen de functies van DevTools te leren kennen.

Commando's en snelkoppelingen

Voer taken snel uit.
Open het opdrachtenmenu, voer opdrachten uit, open bestanden, bekijk andere acties en meer.
Lees het document
Een uitgebreide referentie van sneltoetsen.
Lees het document
Bekijk hoe een webpagina eruitziet en zich gedraagt ​​wanneer JavaScript is uitgeschakeld.
Lees het document
Simuleer apparaten om mobile-first websites te bouwen.
Zoek tekst in alle geladen bronnen met het zoekpaneel.

Panelen

Ontdek de kracht van elk DevTools-paneel.
Leer hoe u de DOM van een pagina kunt bekijken en wijzigen.
Lees de documenten
Leer hoe u de CSS van een pagina kunt bekijken en wijzigen.
Lees de documenten
Log berichten en voer JavaScript uit.
Lees de documenten
Bekijk en bewerk bestanden, maak fragmenten, debug JavaScript en stel een werkruimte in.
Lees de documenten
Netwerkverzoeken registreren.
Lees de documenten
Evalueer de prestaties van de website.
Lees de documenten
Vind geheugenproblemen die de prestaties van de pagina beïnvloeden, waaronder geheugenlekken en meer.
Lees de documenten
Inspecteer, wijzig en debug webapps, test de cache, bekijk opslag en meer.
Lees de documenten
Neem gebruikersstromen op, speel ze opnieuw af en bewerk hun stappen.
Lees de documenten
Ontdek een verzameling opties die de weergave van webinhoud beïnvloeden.
Lees de documenten
Inspecteer en debug opgeslagen adressen.
Zoek en los problemen met uw website op.
Zorg ervoor dat een pagina volledig beveiligd is via HTTPS.
Inspecteer een ArrayBuffer, TypedArray of DataView in JavaScript, evenals WebAssembly en geheugen van C++ Wasm-apps.
Overschrijf de user-agentreeks.
Test uw site door netwerkverzoeken te blokkeren.
Bekijk informatie en debug mediaspelers per browsertabblad.
Animaties inspecteren en aanpassen.
Houd wijzigingen in HTML, CSS en JavaScript bij.
Vind en analyseer ongebruikte JavaScript- en CSS-code.
Controleer of de bronkaarten succesvol zijn geladen en laad ze handmatig.
Identificeer potentiële CSS-verbeteringen.
Optimaliseer de websitesnelheid met het Lighthouse-paneel.
Krijg bruikbare inzichten in de prestaties van uw website.
Bewaak de belasting- en runtime-prestaties.
Bekijk en bewerk bronbestanden terwijl u toegang heeft tot andere panelen.
Apparaatsensoren emuleren.
Bekijk WebAudio API-statistieken.
Authenticatoren emuleren.

Referentie instellingen