Chrome-Entwicklertools sind Webentwicklertools, die direkt in den Google Chrome-Browser integriert sind. Mit den Entwicklertools können Sie Seiten im Handumdrehen bearbeiten und Probleme schnell diagnostizieren. So können Sie schneller bessere Websites erstellen.
Los gehts Aktuelles
DevTools unterstützt eine Vielzahl gängiger Aufgaben bei der Webentwicklung. Sehen Sie sich auf dieser Seite einige der wichtigsten Funktionen der DevTools an. Sie wissen nicht, wo Sie anfangen sollen oder verwenden die DevTools zum ersten Mal? Einführung in die DevTools
Mithilfe von Konsolenstatistiken und KI-Unterstützung können Sie JavaScript-Fehler, Leistungsprobleme und Probleme mit dem Design effizienter beheben.
Sie erhalten einen umfassenden und aussagekräftigen Überblick über die Leistung Ihrer Seite.
Hier erfahren Sie, wie Sie von Ihrer Seite geladene Ressourcen prüfen und sie über Ihren Browser bearbeiten.
Netzwerkanfragen und ‑antworten können direkt analysiert und überschrieben werden.

KI-Unterstützung und Konsolenstatistiken

KI-Innovationen in DevTools ermöglichen es Ihnen, mehr und schneller zu erledigen.
Mit Gemini können Sie das Design, das Netzwerk, die Quellen und die Leistung Ihrer Website analysieren und verbessern.
Hier erfahren Sie mehr über Anwendungsfälle für die KI-Unterstützung in Chrome-Entwicklertools und wie sie Ihren Debugging-Workflow in Bezug auf Stil, Leistung und mehr unterstützen kann.
Konsolenmeldungen und Fehler in den DevTools verstehen und beheben – ganz ohne Kopieren und Einfügen.

Tipps zu Entwicklertools

In unserer monatlichen Videoreihe erfahren Sie, wie Sie mithilfe der DevTools häufige Probleme bei der Webentwicklung lösen.
Hier erfahren Sie, wie Sie in DevTools einen Leistungs-Trace aufzeichnen und analysieren, um Leistungsprobleme zu erkennen und zu beheben.
LCP-Probleme beheben und mit CrUX-Daten prüfen, ob die Fehlerbehebung für Nutzer ähnlich ist
Hier erfahren Sie mehr über die verschiedenen Arten von Browser-Cache und wie Sie sie in den Chrome DevTools prüfen und verwalten.
Sie möchten ein Element untersuchen, aber es ist nicht mehr da? Es ist, als würde Ihr Code mit Ihnen Verstecken spielen.

Leistungsstatistiken abrufen

Eine breite Palette von Tools, mit denen Sie verschiedene Aspekte der Laufzeitleistung messen und optimieren können, z. B. das Steuerfeld „Leistung“ und Lighthouse.
Hier erfahren Sie mehr über alle Funktionen im Bereich „Leistung“: z. B. wie Sie eine Leistungsaufzeichnung erstellen, die Aufzeichnung aufrufen und analysieren.
Seit über 15 Jahren hilft der Bereich „Leistung“ Entwicklern, ihre Laufzeitleistung zu messen und zu optimieren. Hier erfahren Sie, wie sich das Programm weiterentwickelt.
Sie können Traces direkt in der Trace-Datei annotieren und speichern, um sie ganz einfach zu teilen.

Neuigkeiten und Updates

Verbesserte Navigation und Filterung im Bereich „Leistung“ der DevTools

Updated 19. März 2025

Durch die Aktualisierungen des Bereichs „Leistung“ in den DevTools können Sie leichter durch Traces navigieren und sie filtern.

Netzwerkanalyse mit Chrome-Entwicklertools optimieren

Updated 27. Februar 2025

Netzwerkanalyse mit den Chrome-Entwicklertools optimieren

So haben wir Gemini in den Chrome-Entwicklertools eingeführt

Updated 14. Januar 2025

Spannende Anwendungsfälle für den neuen KI-Supportbereich in den Entwicklertools

Ressourcen prüfen und bearbeiten

Hier erfahren Sie mehr über alle Funktionen im Bereich „Quellen“: So können Sie Dateien ansehen und bearbeiten, JavaScript debuggen und einen Arbeitsbereich einrichten.
Los gehts
Mit Workspace können Sie Änderungen, die Sie in den Entwicklertools vornehmen, im Quellcode speichern, der auf Ihrem Computer gespeichert ist. Informationen zum Einrichten eines Arbeitsbereichs in Ihren eigenen Projekten
Anleitung lesen

Netzwerkaktivität analysieren

Hier finden Sie Informationen zu allen Funktionen im Bereich „Netzwerk“: Sie können beispielsweise Antwort- und Anfragetexte prüfen und Header überschreiben.
Los gehts
Eine praktische Anleitung zu gängigen Aufgaben im Bereich „Netzwerk“.
Anleitung lesen

Weitere Tools

Weitere Funktionen und Möglichkeiten in den DevTools
Hier erfahren Sie, wie Sie das DOM einer Seite ansehen und ändern.
Hier erfahren Sie, wie Sie die CSS einer Seite aufrufen und ändern.
Verfolgen Sie Änderungen an HTML, CSS und JavaScript.
Meldungen protokollieren und JavaScript ausführen.
Websiteleistung bewerten
Hiermit können Sie Speicherprobleme identifizieren, die die Seitenleistung beeinträchtigen, z. B. Speicherlecks.
Hier können Sie unter anderem Web-Apps prüfen, ändern und debuggen, den Cache testen und Speicherplatz anzeigen.
Animationen prüfen und ändern
Sie können User Flows aufzeichnen, noch einmal abspielen, messen und ihre Schritte bearbeiten.
Entdecken Sie eine Reihe von Optionen, die das Rendern von Webinhalten beeinflussen.
Prüfen und debuggen Sie gespeicherte Adressen.
Probleme mit Ihrer Website identifizieren und beheben
Achten Sie darauf, dass eine Seite vollständig durch HTTPS geschützt ist.
Sehen Sie sich Informationen an und beheben Sie Mediaplayer für einzelne Browsertabs.
Gerätesensoren emulieren.
Authenticators emulieren.