Chrome DevTools ist eine Reihe von Webentwickler-Tools, die direkt in den GoogleChrome-Browser integriert sind. DevTools helfen Ihnen, Seiten on-the-fly zu bearbeiten und Probleme schnell zu diagnostizieren, was Ihnen letztendlich hilft, bessere Websites schneller zu erstellen.
Schauen Sie sich das Video an, um Live-Demonstrationen der wichtigsten DevTools-Workflows zu sehen, einschließlich Debugging von CSS, Prototyping von CSS, Debugging von JavaScript und Analyse der Ladeleistung.
DevTools öffnen
Es gibt viele Möglichkeiten, DevTools zu öffnen, da verschiedene Benutzer schnellen Zugriff auf verschiedene Teile der DevTools-Benutzeroberfläche wünschen.
- Wenn Sie mit dem DOM oder CSS arbeiten möchten, klicken Sie mit der rechten Maustaste auf ein Element auf der Seite und wählen Sie „Inspizieren“, um in das Bedienfeld „Elemente“ zu gelangen. Oder drücken Sie Befehl+Wahl+C (Mac) bzw. Strg+Umschalt+C (Windows, Linux, Chrome OS).
- Wenn Sie protokollierte Meldungen sehen oder JavaScript ausführen möchten, drücken Sie Befehl+Wahl+J (Mac) bzw. Strg+Umschalt+J (Windows, Linux, Chrome OS), um direkt in das Konsolenbedienfeld zu springen.
Weitere Details und Arbeitsabläufe finden Sie unter Open Chrome DevTools.
Get started
Wenn Sie ein erfahrener Webentwickler sind, sind hier die empfohlenen Ausgangspunkte, um zu lernen, wieDevTools Ihre Produktivität verbessern kann:
- Das DOM anzeigen und ändern
- Stile einer Seite anzeigen und ändern (CSS)
- JavaScript debuggen
- Meldungen anzeigen und JavaScript in der Konsole
- Geschwindigkeit der Website optimieren
- Netzwerkaktivität untersuchen
Die DevTools entdecken
Die DevTools-Benutzeroberfläche kann ein wenig überwältigend sein…. es gibt so viele Registerkarten! Aber wenn Sie sich etwas Zeit nehmen, um sich mit jeder Registerkarte vertraut zu machen, um zu verstehen, was möglich ist, werden Sie vielleicht entdecken, dass DevTools Ihre Produktivität ernsthaft steigern kann.
Gerätemodus
Simulieren Sie mobile Geräte.
- Gerätemodus
- Testen Sie responsive und gerätespezifische Viewports
- Sensoren simulieren: Geolocation & Accelerometer
Elemente-Panel
DOM und CSS anzeigen und ändern.
- Starten Sie mit dem Betrachten und Ändern des DOM
- Starten Sie mit dem Betrachten und Ändern von CSS
- Inspektieren und optimieren Sie Ihre Seiten
- Bearbeiten Sie Stile
- Bearbeiten Sie das DOM
- Animationen untersuchen
- Unbenutzte CSS finden
Konsolen-Bedienfeld
Meldungen ansehen und JavaScript über die Konsole ausführen.
- Einstieg in die Konsole
- Verwenden der Konsole
- Interaktion über die Befehlszeile
- Konsolen-API Referenz
Sourcen-Panel
JavaScript debuggen, Änderungen, die in DevTools vorgenommen wurden, über das Neuladen von Seiten hinweg beibehalten, JavaScript-Schnipsel speichern und ausführen und Änderungen, die Sie in DevTools vornehmen, auf der Festplatte speichern.
- Beginnen Sie mit dem Debuggen von JavaScript
- Halten Sie Ihren Code mit Haltepunkten an
- Speichern Sie Änderungen auf der Festplatte mit Arbeitsbereichen
- Ausführen von Codeschnipseln von jeder Seite
- Referenz zum Debuggen von JavaScript
- Änderungen über Seitenwechsel hinweg mit lokalen Überschreibungen beibehalten
- Unbenutztes JavaScript finden
Netzwerk-Panel
Netzwerkaktivitäten anzeigen und debuggen.
- Einstieg
- Leitfaden für Netzwerkprobleme
- Referenz des Netzwerk-Panels
Performance-Panel
Finden Sie Möglichkeiten zur Verbesserung der Last- und Laufzeitleistung.
- Optimieren Sie die Website-Geschwindigkeit
- Starten Sie mit der Analyse der Laufzeitleistung
- Referenz für die Leistungsanalyse
- Analysieren Sie die Laufzeitleistung
- Erzwungene synchrone Layouts diagnostizieren
Speicher-Panel
Profilieren Sie die Speichernutzung und spüren Sie Lecks auf.
- Speicherprobleme beheben
- JavaScript CPU Profiler
Anwendungsbereich
Untersuchen Sie alle Ressourcen, die geladen werden, einschließlich IndexedDB- oder Web-SQL-Datenbanken, lokaler und Sitzungsspeicher, Cookies, Anwendungs-Cache, Bilder, Schriften und Stylesheets.
- Debuggen von Progressive Web Apps
- Inspektieren und Verwalten von Speicher, Datenbanken, und Caches
- Cookies untersuchen und löschen
- Ressourcen untersuchen
Sicherheitspanel
Debuggen Sie Probleme mit gemischten Inhalten, Zertifikatsprobleme und mehr.
- Sicherheitsprobleme verstehen
Community
Fehlerberichte und Funktionswünsche in Crbug, dem Bugtracker des Entwicklerteams, einreichen.
Crbug
Wenn Sie uns auf einen Fehler oder Funktionswunsch aufmerksam machen wollen, aber nicht viel Zeit haben, können Sie gerne einen Tweet an @ChromeDevTools senden. Wir antworten und senden regelmäßig Ankündigungen von diesem Account.
Für Hilfe bei der Verwendung von DevTools ist Stack Overflow der beste Kanal.
Stack Overflow
Um Fehler oder Funktionswünsche zu den DevTools-Dokumenten einzureichen, öffnen Sie ein GitHub-Problem im Web Fundamentals-Repository.
Docs Issues
DevTools hat auch einen Slack-Kanal, aber das Team überwacht ihn nicht ständig.
Slack