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 Versionshinweise

Mit KI debuggen

KI-Innovationen in den Entwicklertools helfen Ihnen, mehr zu erreichen – und das schneller. Mit DevTools for Agents können Sie die Leistungsfähigkeit der Entwicklertools mit Ihren bevorzugten Coding-Agents verbinden.
Gemini kann Ihnen helfen, das Styling, das Netzwerk, die Quellen und die Leistung Ihrer Website zu analysieren und zu verbessern. Hilfe bei Konsolenfehlern und Codevorschläge in den Bereichen „Konsole“ und „Quellen“ erhalten
KI‑Innovationen entdecken
Geben Sie Ihren Coding-Agents dieselben vertrauenswürdigen Tools, die Sie zum Prüfen von Netzwerkaktivitäten, Aufzeichnen von Traces und zur Fehlerbehebung bei Webanwendungen verwenden, in Ihrem KI-Workflow zur Verfügung.

 Verbinden Sie den MCP-Server (Model Context Protocol) der Chrome-Entwicklertools mit dem Tool Ihrer Wahl: Antigravity, Claude Code, Cline, Copilot und mehr.

Weitere Informationen
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.

Tipps zu Entwicklertools

In unserer monatlichen Videoreihe werden gängige Debugging-Szenarien in den Entwicklertools auf spielerische Weise vorgestellt.
Mit Chrome-Entwicklertools für Agents können Sie responsive Layouts überprüfen, standortbezogene APIs testen und verschiedene CPU- oder Netzwerkgeschwindigkeiten simulieren.
Mit Lighthouse in den Chrome-Entwicklertools für KI-Agenten kann Ihr Coding-Agent die Qualität von Websites bewerten, indem er Live-Integritätsprüfungen für Barrierefreiheit, SEO, Best Practices und Agentic Browsing durchführt.
In diesem Video wird das aktualisierte Leistungs-Panel vorgestellt. Sie erfahren, wie Sie Core Web Vitals (LCP, CLS, INP) messen und maßgeschneiderte Empfehlungen von Gemini erhalten.
Setzen Sie die Segel mit DevTools und werden Sie zum Debugging-Piraten! Hier erfahren Sie, wie Sie Fokusstile emulieren, Formulare mit Autofill testen und Backend-Fehler mit Netzwerküberschreibungen beheben können.

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.
Informationen zu neuen DevTools-Funktionen wie der CPU-Drosselungskalibrierung, mit denen Sie Entscheidungen zur Fehlerbehebung bei der Leistung auf Daten aus der Praxis stützen können
Informationen zu den neuen Leistungsstatistiken und den Vorteilen von Lighthouse finden Sie direkt im Bereich „Leistung“ der Entwicklertools.

Neuigkeiten und Updates

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.