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.
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.
Een uitgebreide referentie van sneltoetsen.
Bekijk hoe een webpagina eruitziet en zich gedraagt ​​wanneer JavaScript is uitgeschakeld.
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.
Leer hoe u de CSS van een pagina kunt bekijken en wijzigen.
Log berichten en voer JavaScript uit.
Bekijk en bewerk bestanden, maak fragmenten, debug JavaScript en stel een werkruimte in.
Netwerkverzoeken registreren.
Evalueer de prestaties van de website.
Vind geheugenproblemen die de prestaties van de pagina beïnvloeden, waaronder geheugenlekken, geheugenophoping en frequente ophaalacties.
Inspecteer, wijzig en debug webapps, test de cache, bekijk opslag en meer.
Neem gebruikersstromen op, speel ze opnieuw af en bewerk hun stappen.
Ontdek een verzameling opties die de weergave van webinhoud beïnvloeden.
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.
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.
Apparaatsensoren emuleren.
Authenticatoren emuleren.