Die Chrome-Entwicklertools sind Webentwicklertools, die direkt in den Google Chrome-Browser integriert sind. Mit den Entwicklertools können Sie Seiten spontan bearbeiten und Probleme schnell diagnostizieren, was Ihnen letztendlich dabei hilft, bessere Websites schneller zu erstellen.
In diesem Video werden die wichtigsten Workflows der Entwicklertools wie CSS-Debugging, CSS-Prototyping, JavaScript-Fehlersuche und die Analyse der Ladeleistung gezeigt.
Entwicklertools öffnen
Es gibt viele Möglichkeiten, die Entwicklertools zu öffnen, da verschiedene Nutzer Schnellzugriff auf verschiedene Bereiche der Entwicklertools-UI 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 Untersuchen aus, um zum Bereich Elemente zu gelangen. Sie können auch Befehlstaste + Wahltaste + C (Mac) oder Strg + Umschalttaste + C (Windows, Linux, ChromeOS) drücken.
- Um die protokollierten Meldungen anzusehen oder JavaScript auszuführen, drücken Sie Befehlstaste + Wahltaste + J (Mac) oder Strg + Umschalttaste + J (Windows, Linux, ChromeOS), um direkt den Bereich Konsole aufzurufen.
Weitere Informationen und Workflows finden Sie unter Chrome-Entwicklertools öffnen.
Mehr erfahren
Wenn Sie ein erfahrener Webentwickler sind, finden Sie hier die empfohlenen Ausgangspunkte, um zu erfahren, wie Sie mit Entwicklertools Ihre Produktivität verbessern können:
- DOM ansehen und ändern
- CSS ansehen und ändern
- JavaScript-Fehler beheben
- In der Console Nachrichten ansehen und JavaScript ausführen
- Websitegeschwindigkeit optimieren
- Netzwerkaktivität prüfen
Entwicklertools entdecken
Die Benutzeroberfläche der Entwicklertools kann ein wenig überwältigend erscheinen... es gibt so viele Tabs! Wenn Sie sich jedoch etwas Zeit nehmen, um sich mit den einzelnen Tabs vertraut zu machen, um zu verstehen, was alles möglich ist, werden Sie möglicherweise feststellen, dass Entwicklertools Ihre Produktivität erheblich steigern können.
Gerätemodus
Mobilgeräte simulieren
Steuerfeld „Elemente“
DOM und CSS ansehen und ändern
- Erste Schritte: DOM ansehen und ändern
- Erste Schritte: CSS aufrufen und ändern
- CSS bearbeiten
- DOM bearbeiten
- Ungültige, überschriebene, inaktive und sonstige Preisvergleichsportale finden
- Mögliche CSS-Verbesserungen identifizieren
- Helle/dunkle Designs, Kontrast und andere CSS-Medienfunktionen nachahmen
- Nicht verwendete CSS finden
- Animationen prüfen
Konsolenbereich
Über die Console können Sie sich Nachrichten ansehen und JavaScript ausführen.
Quellenbereich
Du kannst JavaScript-Fehler beheben, in den Entwicklertools vorgenommene Änderungen nach Seitenladevorgängen beibehalten, JavaScript-Snippets speichern und ausführen sowie in den Entwicklertools vorgenommene Änderungen in lokalen Quellen speichern.
- Erste Schritte mit der JavaScript-Fehlerbehebung
- Code mit Haltepunkten pausieren
- Dateien in einem Arbeitsbereich bearbeiten und speichern
- JavaScript-Snippets ausführen
- Referenz zur JavaScript-Fehlerbehebung
- Webcontent- und HTTP-Antwortheader lokal überschreiben
Netzwerkbereich
Sehen Sie sich die Netzwerkaktivität an und beheben Sie eventuelle Fehler.
Rekorder-Bereich
Nutzerflüsse aufzeichnen, wiedergeben und messen
- Nutzerflüsse aufzeichnen, wiederholen und messen
- Rekorder mit Erweiterungen anpassen
- Referenz zu Rekorder-Funktionen
Steuerfeld „Leistung“
Möglichkeiten zur Verbesserung der Lade- und Laufzeitleistung finden
Bereich „Arbeitsspeicher“
Ermitteln und beheben Sie Speicherprobleme, die die Seitenleistung beeinträchtigen, z. B. Speicherlecks.
Anwendungsbereich
Prüfen Sie alle Ressourcen, die geladen werden, einschließlich IndexedDB- oder Web SQL-Datenbanken, lokalem Speicher und Sitzungsspeicher, Cookies, Anwendungscache, Bildern, Schriftarten und Stylesheets.
- Fehler in progressiven Web-Apps beheben
- Lokalen Speicher ansehen und bearbeiten
- Cookies ansehen, hinzufügen, bearbeiten und löschen
- Informationen zum Ursprungstest ansehen
Sicherheitsbereich
Sie haben die Möglichkeit, Probleme mit gemischten Inhalten, Zertifikatsprobleme und mehr zu beheben.
Community-Interaktionen
Sie können Fehlerberichte und Funktionsanfragen in Crbug einreichen, dem Programmfehler-Tracker des Engineering-Teams.
Wenn Sie uns über einen Fehler oder eine Funktionsanfrage informieren möchten, aber nicht viel Zeit haben, können Sie gerne einen Tweet an @ChromeDevTools senden. Wir antworten regelmäßig und senden Ankündigungen über das Konto.
Stack Overflow ist die beste Möglichkeit, um Hilfe bei der Verwendung der Entwicklertools zu erhalten.
Wenn du Fehler oder Funktionsanfragen in der Entwicklertools-Dokumentation melden möchtest, öffne ein GitHub-Problem.
Für die Entwicklertools gibt es ebenfalls einen Slack-Kanal, das jedoch vom Team nicht konsistent überwacht wird.