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 uiteindelijk sneller betere websites kunt bouwen.
Bekijk de video voor live demonstraties van de belangrijkste DevTools-workflows, waaronder het debuggen van CSS, het maken van prototypen van CSS, het debuggen van JavaScript en het analyseren van de laadprestaties.
Open DevTools
Er zijn veel manieren om DevTools te openen, omdat verschillende gebruikers snelle toegang willen tot verschillende delen van de DevTools-gebruikersinterface.
- Om met de DOM of CSS te werken, klikt u met de rechtermuisknop op een element op de pagina en selecteert u Inspecteren om naar het paneel Elementen te gaan. Of druk op Command + Option + C (Mac) of Control + Shift + C (Windows, Linux, ChromeOS).
- Om ingelogde berichten te bekijken of JavaScript uit te voeren, drukt u op Command + Option + J (Mac) of Control + Shift + J (Windows, Linux, ChromeOS) om rechtstreeks naar het consolepaneel te gaan.
Zie Chrome DevTools openen voor meer details en workflows.
Begin
Als u een meer ervaren webontwikkelaar bent, volgen hier de aanbevolen startpunten om te leren hoe DevTools uw productiviteit kan verbeteren:
- Bekijk en wijzig de DOM
- CSS bekijken en wijzigen
- Debug JavaScript
- Bekijk berichten en voer JavaScript uit in de console
- Optimaliseer de snelheid van de website
- Netwerkactiviteit inspecteren
Ontdek DevTools
De gebruikersinterface van DevTools kan een beetje overweldigend zijn... er zijn zoveel tabbladen! Maar als u de tijd neemt om vertrouwd te raken met elk tabblad en te begrijpen wat er mogelijk is, ontdekt u misschien dat DevTools uw productiviteit aanzienlijk kan verhogen.
Apparaatmodus
Simuleer mobiele apparaten.
Elementen paneel
Bekijk en wijzig de DOM en CSS.
- Ga aan de slag met het bekijken en wijzigen van de DOM
- Ga aan de slag met het bekijken en wijzigen van CSS
- CSS bewerken
- Bewerk de DOM
- Vind ongeldige, overschreven, inactieve en andere CSS
- Identificeer potentiële CSS-verbeteringen
- Emuleer lichte/donkere thema's, contrast en andere CSS-mediafuncties
- Vind ongebruikte CSS
- Animaties inspecteren
Consolepaneel
Bekijk berichten en voer JavaScript uit vanuit de console.
Bronnenpaneel
Debug JavaScript, bewaar wijzigingen die in DevTools zijn aangebracht tijdens het opnieuw laden van pagina's, sla fragmenten van JavaScript op en voer deze uit, en sla wijzigingen die u in DevTools aanbrengt op in lokale bronnen.
- Ga aan de slag met het debuggen van JavaScript
- Pauzeer uw code met breekpunten
- Bewerk en bewaar bestanden in een werkruimte
- Voer fragmenten van JavaScript uit
- Referentie voor foutopsporing in JavaScript
- Overschrijf webinhoud en HTTP-antwoordheaders lokaal
Netwerkpaneel
Netwerkactiviteit bekijken en debuggen.
Recorderpaneel
Registreer, speel opnieuw en meet gebruikersstromen.
- Registreer, speel opnieuw en meet gebruikersstromen
- Pas de Recorder aan met extensies
- Referentie van recorderfuncties
Prestatiepaneel
Vind manieren om de laad- en runtimeprestaties te verbeteren.
Geheugenpaneel
Zoek en repareer geheugenproblemen die de prestaties van de pagina beïnvloeden, bijvoorbeeld geheugenlekken.
Applicatiepaneel
Inspecteer alle bronnen die zijn geladen, inclusief IndexedDB- of Web SQL-databases, lokale opslag en sessieopslag, cookies, applicatiecache, afbeeldingen, lettertypen en stylesheets.
- Debug progressieve webapps
- Bekijk en bewerk lokale opslag
- Cookies bekijken, toevoegen, bewerken en verwijderen
- Bekijk de herkomstproefinformatie
Beveiligingspaneel
Debug problemen met gemengde inhoud, certificaatproblemen en meer.
Gemeenschap
Bugrapporten en functieverzoeken indienen in Crbug, de bugtracker van het technische team.
Als u ons op de hoogte wilt stellen van een bug of functieverzoek, maar niet veel tijd heeft, kunt u een tweet sturen naar @ChromeDevTools. We reageren en sturen regelmatig aankondigingen vanaf het account.
Voor hulp bij het gebruik van DevTools is Stack Overflow het beste kanaal.
Als u bugs of functieverzoeken voor de DevTools-documenten wilt indienen, opent u een GitHub-probleem.
DevTools heeft ook een Slack-kanaal, maar het team controleert dit niet consistent.