Übersicht

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:

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

Gerätemodus im Darstellungsbereich aktiviert.

Mobilgeräte simulieren

Steuerfeld „Elemente“

Steuerfeld „Elemente“.

DOM und CSS ansehen und ändern

Konsolenbereich

Console.

Über die Console können Sie sich Nachrichten ansehen und JavaScript ausführen.

Quellenbereich

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.

Netzwerkbereich

Steuerfeld „Netzwerk“.

Sehen Sie sich die Netzwerkaktivität an und beheben Sie eventuelle Fehler.

Rekorder-Bereich

Rekorder-Bereich.

Nutzerflüsse aufzeichnen, wiedergeben und messen

Steuerfeld „Leistung“

Leistungsbereich.

Möglichkeiten zur Verbesserung der Lade- und Laufzeitleistung finden

Bereich „Arbeitsspeicher“

Bereich „Arbeitsspeicher“.

Ermitteln und beheben Sie Speicherprobleme, die die Seitenleistung beeinträchtigen, z. B. Speicherlecks.

Anwendungsbereich

Im Bereich „Anwendung“ ist der Abschnitt „Service Worker“ geöffnet.

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.

Sicherheitsbereich

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.

Crbug

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.

Twitter

Stack Overflow ist die beste Möglichkeit, um Hilfe bei der Verwendung der Entwicklertools zu erhalten.

Stack Overflow

Wenn du Fehler oder Funktionsanfragen in der Entwicklertools-Dokumentation melden möchtest, öffne ein GitHub-Problem.

Probleme mit Google Docs

Für die Entwicklertools gibt es ebenfalls einen Slack-Kanal, das jedoch vom Team nicht konsistent überwacht wird.

Slack