Chrome DevTools is een set hulpprogramma’s voor webontwikkelaars die rechtstreeks in de Google Chrome-browser zijn ingebouwd. DevTools kan u helpen tijdens het bewerken van pagina’s en bij het snel diagnosticeren van problemen, waardoor u uiteindelijk sneller betere websites kunt bouwen.
Kijk naar de video voor live demonstraties van de belangrijkste DevTools-workflows, waaronder het debuggen van CSS, het maken van CSS-prototypen, het debuggen van JavaScript en het analyseren van de laadprestaties.
Openen DevTools
Er zijn vele manieren om DevTools te openen, omdat verschillende gebruikers snel toegang willen tot verschillende delen van de DevTools UI.
- Wanneer u wilt werken met het DOM of CSS, klikt u met de rechtermuisknop op een element op de pagina en selecteert u Inspect om naar het paneel Elementen te springen. Of druk op Command+Option+C (Mac) of Control+Shift+C (Windows, Linux, Chrome OS).
- Wanneer je gelogde berichten wilt zien of JavaScript wilt uitvoeren, druk je op Command+Option+J(Mac) of Control+Shift+J (Windows, Linux, Chrome OS) om direct naar het Console-paneel te gaan.
Zie Open Chrome DevTools voor meer details en workflows.
Start
Als u een meer ervaren webontwikkelaar bent, zijn hier de aanbevolen startpunten om te leren hoeDevTools uw productiviteit kan verbeteren:
- Bekijk en wijzig het DOM
- Bekijk en wijzig de stijlen van een pagina (CSS)
- Debug JavaScript
- Bekijk berichten en voer JavaScript uit in de Console
- Websnelheid optimaliseren
- Inspecteren van netwerkactiviteit
Ontdek DevTools
De DevTools UI kan een beetje overweldigend zijn….er zijn zoveel tabbladen! Maar, als je de tijd neemt om vertrouwd te raken met elk tabblad om te begrijpen wat er mogelijk is, zul je ontdekken dat DevTools je productiviteit serieus kan verhogen.
Device Mode
Simuleer mobiele apparaten.
- Device Mode
- Test Responsive en Device-specifieke Viewports
- Simuleer Sensoren: Geolocatie & Versnellingsmeter
Elementenpaneel
Bekijk en wijzig de DOM en CSS.
- Ga aan de slag met het bekijken en wijzigen van het DOM
- Ga aan de slag met het bekijken en wijzigen van CSS
- Inspecteer en tweak uw pagina’s
- Bewerk stijlen
- Bewerk het DOM
- Inspecteer animaties
- Vind ongebruikte CSS
Console-paneel
Bekijk berichten en voer JavaScript uit vanuit de Console.
- Met de Console aan de slag
- De Console gebruiken
- Interactie vanaf de opdrachtregel
- Console API Referentie
Bronnenpaneel
Debug JavaScript, Wijzigingen die in DevTools zijn aangebracht, bewaren tijdens het herladen van een pagina, fragmenten van JavaScript opslaan en uitvoeren, en wijzigingen die u in DevTools aanbrengt, opslaan op schijf.
- Ga aan de slag met JavaScript debuggen
- Pauzeer uw code met breakpoints
- Bewaar wijzigingen op schijf met workspaces
- Uitvoeren van fragmenten code vanaf elke pagina
- JavaScript Debugging Reference
- Blijft wijzigingen behouden tijdens het opnieuw laden van pagina’s met lokale overschrijvingen
- Vind ongebruikt JavaScript
Netwerkpaneel
Bekijk en debug netwerkactiviteit.
- Get Started
- Network Issues Guide
- Network Panel Reference
Performance panel
Op zoek naar manieren om de belasting en runtime-prestaties te verbeteren.
- Snelheid van website optimaliseren
- Get Starten met analyseren van runtime-prestaties
- Verwijzing voor prestatie-analyse
- Runtime-prestaties analyseren
- Stel een diagnose van geforceerde synchrone opmaak
Geheugenpaneel
Stel het geheugengebruik vast en spoor lekken op.
- Verhelp geheugenproblemen
- JavaScript CPU Profiler
Applicatiepaneel
Inspecteer alle bronnen die worden geladen, inclusief geïndexeerdeDB- of Web SQL-databases, lokale en sessieopslag, cookies, Application Cache, afbeeldingen, lettertypen en stylesheets.
- Debug Progressive Web Apps
- Inspecteer en beheer opslag, Databases, en Caches
- Inspecteer en verwijder cookies
- Inspecteer bronnen
Beveiligingspaneel
Ontdek problemen met gemengde inhoud, problemen met certificaten en nog veel meer.
- Ontdek beveiligingsproblemen
Community
Stuur bugrapporten en featureverzoeken in Crbug, de bugtracker van het engineeringteam.
Crbug
Als u ons wilt attenderen op een bug of feature request maar niet veel tijd hebt, kunt u een tweet sturen naar @ChromeDevTools. We antwoorden en sturen regelmatig aankondigingen vanaf het account.
Voor hulp bij het gebruik van DevTools, is Stack Overflow het beste kanaal.
Stack Overflow
Om bugs of feature requests op de DevTools docs in te dienen, open een GitHub issue op de Web Fundamentals repository.
Docs Issues
DevTools heeft ook een Slack-kanaal, maar het team houdt dat niet consequent in de gaten.
Slack