
KI-Unterstützung
Mit Gemini, das direkt in den Chrome-Entwicklertools integriert ist, können Sie Ihren Entwicklungsablauf optimieren. Optimieren Sie das Debugging mit KI-Unterstützung für Stil, Leistung, Netzwerk und Quellen.
Fehler beim Styling beheben
Stylingprobleme können schwierig zu beheben sein. Hier finden Sie eine detaillierte Erklärung der Stile Ihrer Elemente und Hilfe bei der Behebung von Layout- und Stilfehlern:
Can you center this element?
Netzwerkanfragen analysieren
Anfrage- und Antwortheader enthalten oft wichtige Informationen, die auf den ersten Blick nicht offensichtlich sind. Mit der KI-Unterstützung können Sie Folgendes tun:
Why does this request fail?
Quelldateien
Es ist selten, dass Sie den gesamten Code auf Ihrer Website selbst geschrieben haben. Sie sind sich nicht sicher, wofür ein bestimmtes Script verwendet wird? KI-gestützte Unterstützung kann Ihnen bei Folgendem helfen:
What is this file used for?
Seitenleistung untersuchen
Schlechte Core Web Vitals-Werte? Es kann schwierig sein, die Ursache für eine träge Website zu finden. Die KI-Unterstützung kann Probleme untersuchen und Lösungen vorschlagen:
Help me optimize my LCP score

Überall KI-Unterstützung erhalten
Suchen Sie nach der Schaltfläche KI fragen, um sich von Gemini bei Ihrer aktuellen Aufgabe helfen zu lassen.
Demos
Hangar
Überlauf
Sie wissen nicht, wie Sie anfangen sollen?
Seitenverhältnis eines Bildes korrigieren
Make all teaser images always be 16:9
Ist eines der Bilder nicht so zugeschnitten wie die anderen?
- Öffne die Seite chrome.dev/cinemai/devtools/ und öffne die Entwicklertools.
- Wählen Sie den Bereich Weitere Informationen aus.
- Klicken Sie auf das Symbol für die KI-Unterstützung.
- Prompt:
Make all teaser images always be 16:9
. - Klicken Sie auf
Apply the suggested change
und fahren Sie fort. - Die Schaltfläche sollte zentriert sein.
Überlaufproblem beheben
How can I make this element visible?
Element ist nicht sichtbar?
- Öffne die Seite chrome.dev/cinemai/devtools/ und öffne die Entwicklertools.
- Suchen Sie ein img-Element mit einem Taucher.
- Klicken Sie auf das Symbol für die KI-Unterstützung.
- Prompt:
How can I make this element visible without scrollbars?
. - Klicken Sie auf
Apply the suggested change
und fahren Sie fort. - Der Taucher sollte auf dem Bildschirm sichtbar sein.
Header entschlüsseln
Are there any security headers present?
Weitere Informationen zu Sicherheitsheadern einer bestimmten Ressource:
- Öffne die Seite chrome.dev/cinemai/devtools/ und öffne die Entwicklertools.
- Wählen Sie im Bereich „Netzwerk“ die
v4-chrome.dev.js
Anfragen aus. - Klicken Sie auf das Symbol für die KI-Unterstützung.
- Prompt:
Are there any security headers present?
- In der LLM werden Header erläutert, die sich auf die Sicherheit der Ressource beziehen.
Detaillierte Daten
Persistenter KI-Chatverlauf in Chrome 133–135
Neu in DevTools 130–132
Los gehts
Anforderungen
Opt-in
Daten
Helfen Sie uns, besser zu werden.
Diese Funktion befindet sich noch in der Entwicklungsphase und kann daher künftig Änderungen unterliegen. Es kann fehlerhafte oder anstößige Informationen generieren, die nicht die Auffassung von Google widerspiegeln. Geben Sie uns Feedback, damit wir die Antworten verbessern können.