Mit KI-Unterstützung chatten

Matthias Rohmer
Sofia Emelianova
Sofia Emelianova
GitHub

In den Entwicklertools gibt es den Bereich KI-Unterstützung , in dem Sie sich mit einem integrierten KI-Agenten unterhalten können, um Ihre Website besser zu verstehen und Probleme zu beheben.

Der Bereich KI-Unterstützung wird von Gemini unterstützt und bietet folgende Funktionen:

  • Spezialisiert auf Webentwicklung
  • Kann allgemeine Fragen zur gesamten Webseite beantworten und spezifische Informationen zu einer Vielzahl von Themen liefern, darunter Styling, Networking und Leistung.
  • Kann selbstständig einen bestimmten Kontext auswählen, über den Sie sich unterhalten können, z. B. DOM-Elemente, Netzwerkanfragen und Ereignisse zur Leistungsanalyse.
  • Kann selbstständig Aktionen ausführen, z. B. Audits durchführen und Leistungsanalysen aufzeichnen.
  • Bietet eine Schritt-für-Schritt-Anleitung für die Aktionen und die Begründung und Links zu relevanten Teilen der Entwicklertools, damit Sie sie mit einem Klick prüfen können.
  • Kann Codeänderungen vorschlagen und mit seinen Erkenntnissen einen Prompt für Ihren Programmier-KI-Agenten generieren.

Mit der KI-Unterstützung können Sie Fehler im Styling, Networking, in der Leistung und in den Quellen Ihrer Website beheben.

Wenn Sie effektiv mit Gemini im Bereich KI-Unterstützung chatten möchten, erfahren Sie hier, wie Sie den Bereich öffnen, Prompts eingeben und den Unterhaltungsverlauf steuern.

Bereich „KI-Unterstützung“ öffnen

Der Bereich KI-Unterstützung wird standardmäßig im Drawer geöffnet.

Klicken Sie oben rechts in der Hauptsymbolleiste auf die Schaltfläche KI-Unterstützung, um den Bereich zu öffnen.

Die Schaltfläche für KI-Unterstützung oben rechts in der Symbolleiste der Entwicklertools.

Über die Bereiche

Sie können den Bereich mit ausgewähltem Unterhaltungskontext auf zwei Arten direkt über die Bereiche Elemente, Netzwerk, Quellen oder Leistung öffnen:

  • Klicken Sie neben einem Element, einer Netzwerkanfrage, einer Quelldatei oder einer erweiterten Leistungsanalyse auf die Schaltfläche Symbol für KI‑Unterstützung Mit KI debuggen.

    Der Button „Mit KI debuggen“ neben einem Element.

  • Klicken Sie mit der rechten Maustaste auf einen Eintrag für ein Element, eine Anfrage, eine Datei oder eine Analyse und wählen Sie im Kontextmenü Mit KI debuggen eine der gängigen Prompt-Optionen aus.

    Die Optionen für „Mit KI debuggen“ im Kontextmenü eines Elements.

Über das Befehlsmenü

Wenn Sie KI-Unterstützung über das Befehlsmenü öffnen möchten, geben Sie AI ein und führen Sie dann den Befehl KI-Unterstützung anzeigen aus. Neben diesem Befehl wird das Badge Drawer angezeigt.

Das geöffnete Befehlsmenü mit hervorgehobener Option „KI-Unterstützung anzeigen“.

Über das Menü „Weitere Tools“

Alternativ können Sie oben rechts die Weitere Optionen > Weitere Tools > KI-Unterstützung auswählen.

Das geöffnete Menü „Weitere Tools“.

Prompten

Wenn Sie eine neue Unterhaltung beginnen, bietet die KI-Unterstützung Beispiel-Prompts, damit Sie schnell loslegen können.

Häufig verwendete Prompts im Bereich für KI-Unterstützung.

Klicken Sie auf einen der Prompts, um das Eingabefeld für Prompts unten im Bereich vorab auszufüllen.

Alternativ können Sie einen eigenen Prompt oder eine Frage in das Eingabefeld eingeben.

Wenn Sie einen Prompt senden möchten, drücken Sie Enter oder klicken Sie auf den Pfeil rechts neben dem Eingabefeld.

Offene Prompts ohne Kontext

Im Freiform-Chatfeld können Sie offene Fragen auf höherer Ebene ohne vorherigen Kontext stellen. Beispiel:

  • How to use DevTools to debug accessibility?

    Die KI-Unterstützung führt zuerst ein Lighthouse-Audit zur Barrierefreiheit durch, um Ihren Prompt besser beantworten zu können.

  • What are the slowest network requests on this page?

    Die KI-Unterstützung bietet eine Liste mit verdächtigen Anfragen und Links zu diesen Anfragen im Bereich Netzwerk, sodass Sie mit einem Klick eine Anfrage als Unterhaltungskontext auswählen können.

  • What performance issues exist on the page?

    Die KI-Unterstützung zeichnet automatisch eine Leistungsanalyse mit den von Ihnen ausgewählten Einstellungen auf, um diesen Prompt zu beantworten.

  • Bei Prompts wie How do I use the Animation panel? oder Where is the high contrast setting in DevTools? erhalten Sie direkte Hilfe zu den Entwicklertools selbst.

Sobald Sie den Chat starten, aktualisiert die KI-Unterstützung den Kontext intelligent anhand Ihrer Aktionen, wenn der Chat leer ist. Ihre manuellen Auswahlen werden dabei berücksichtigt.

Prompts mit Kontext

Wenn Sie die KI-Unterstützung über einen Bereich öffnen, wird der entsprechende Unterhaltungskontext im Chatfeld ausgewählt, sodass Sie sich speziell über die ausgewählten Elemente unterhalten können.

Der Kontext der Unterhaltung ist ausgewählt.

Sie können den Kontext jederzeit manuell ändern, indem Sie ein Element in Elemente, eine Anfrage in Netzwerk, einen Analyseeintrag in Leistung oder eine Datei in Quellen auswählen.

Sie können auch Teile einer Datei aus dem Bereich Quellen kopieren und in den Chat einfügen, um zu fragen, was sie bewirken.

Im nächsten Abschnitt erfahren Sie mehr über den Unterhaltungsverlauf in der KI-Unterstützung.

Unterhaltungsverlauf

Wenn Sie einen Prompt senden, beginnt die Unterhaltung mit dem Agenten. Um die Informationen zu erhalten, die für die bestmögliche Beantwortung Ihres Prompts erforderlich sind, generiert und führt der Agent JavaScript aus, das Web-APIs aufruft.

Der Fortschritt des Agenten wird in Schritten angezeigt. Der Status des ersten Schritts ist Investigating….

Das Feld für KI-Unterstützung nach Beginn einer Unterhaltung.

Die Beschriftung des ersten Schritts wird aktualisiert, wenn der Agent spezifischere Aktionen ausführt, um Ihren Prompt zu beantworten.

Je nachdem, was Sie debuggen, führt der Agent möglicherweise auch Aktionen in den Entwicklertools aus, z. B. eine Leistungsanalyse aufzeichnen oder Lighthouse-Audits durchführen.

Im Bereich für KI-Unterstützung wird ein Leistungstrace aufgezeichnet.

Schritt-für-Schritt-Anleitung für den KI-Agenten

Sobald der Agent eine Antwort auf Ihren Prompt generiert hat, ändert sich die Beschriftung des ersten Schritts in Schritt-für-Schritt-Anleitung für den Agenten anzeigen oder Denkprozess anzeigen. Sie können diese Option maximieren, um die Schritte zu sehen, die der Agent zum Analysieren von Daten in einer Seitenleiste rechts ausgeführt hat.

Der Bereich für KI‑Unterstützung mit einer Agent-Anleitung wurde geöffnet.

Die Schritte umfassen:

Ein erweiterter Schritt der Anleitung für den Agent.

  • Maximierbare Code-Snippets, die der Agent zusammen mit den zurückgegebenen Daten ausgeführt hat. Sie können den Code kopieren und in der Konsole ausführen.
  • Widgets, die Ergebnisse in einem für Menschen lesbareren Format präsentieren.

Beispiele für menschenlesbare Widgets in der Anleitung für den Agent

Die Widgets haben oben rechts die Schaltfläche Anzeigen , über die Sie zum entsprechenden Teil der Entwicklertools gelangen.

Weiterführende Prompts

Sobald der Agent eine endgültige Antwort gefunden hat, schlägt er möglicherweise weiterführende Prompts vor. Klicken Sie auf einen Prompt, um die Unterhaltung fortzusetzen.

Die Folgeaufforderungen werden unter der Antwort angezeigt.

Prompt für Ihren Programmier-KI-Agenten generieren

Wenn Sie einen Prompt für Ihren Programmier-KI-Agenten generieren möchten, klicken Sie auf In Programmier-KI-Agenten kopieren.

Die Option „In Programmier-KI-Agenten kopieren“.

Der Agent fasst seine Ergebnisse und Erkenntnisse zusammen und bietet einen umsetzbaren Prompt in minimierter Form oder im für Menschen lesbaren Markdown-Format. Sie können ihn in die Zwischenablage kopieren und mit einem Programmier-KI-Agenten Ihrer Wahl weiterarbeiten.

Pausierte Unterhaltungen

Die KI-Unterstützung kann Code mit Nebeneffekten generieren. In diesem Fall wird die Unterhaltung pausiert, bevor der Code ausgeführt wird.

Der Bereich für KI-Unterstützung mit einer pausierten Unterhaltung.

Wenn die Unterhaltung pausiert wird, prüfen Sie den vom Agenten vorgeschlagenen Code. Klicken Sie auf Weiter , um fortzufahren, oder auf Abbrechen , um die Ausführung zu verhindern.

Sie können die vorgeschlagenen Codeänderungen im Bereich Änderungen prüfen.

Vom Agent generierte Codeänderungen im Bereich „Änderungen“.

Der Agent wendet die Änderungen in den Entwicklertools an. Sie können Ihren Arbeitsbereich aber so konfigurieren, dass Änderungen in den Entwicklertools in Ihren Quellen gespeichert werden.

Änderungen im Arbeitsbereich speichern

Wenn Sie einen verbundenen Arbeitsbereichsordner haben, können Sie Stiländerungen, die von der KI-Unterstützung vorgeschlagen wurden, in den CSS-Quelldateien auf Ihrem Computer speichern.

Gehen Sie dazu so vor:

  1. Generieren Sie zuerst eine Metadatendatei und verbinden Sie einen Arbeitsbereichsordner.

    Alternativ können Sie einen Ordner manuell hinzufügen.

  2. Starten Sie einen Chat über den Bereich „Elemente“.

  3. Fordern Sie die KI-Unterstützung auf, Ihr CSS zu ändern.

  4. Die KI-Unterstützung generiert möglicherweise Code und pausiert die Ausführung. Prüfen Sie den Code und klicken Sie auf Weiter , um die Änderungen live zu testen.

  5. Maximieren Sie den Bereich Nicht gespeicherte Änderungen und klicken Sie auf Auf Arbeitsbereich anwenden.

  6. Prüfen Sie die Änderungen in einem diff und klicken Sie auf Alle speichern.

Weitere Informationen zu diesem Workflow finden Sie unter:

Keine Antwort

Die KI-Unterstützung kann aus verschiedenen Gründen keine Antworten liefern.

Der Bereich für KI-Unterstützung mit einem abgelehnten Gespräch.

Wenn Sie der Meinung sind, dass die KI-Unterstützung Ihren Prompt beantworten sollte, melden Sie einen Fehler.

Unterhaltungsverlauf

Sobald Sie eine Unterhaltung beginnen, basiert jede weitere Antwort auf Ihren vorherigen Interaktionen mit der KI.

Die **KI-Unterstützung** speichert Ihren Unterhaltungsverlauf zwischen Sitzungen, sodass Sie auch nach dem Neuladen der Entwicklertools oder von Chrome auf Ihre vorherigen Chats zugreifen können.

Mit den Steuerelementen oben links im Bereich können Sie Ihren Unterhaltungsverlauf verwalten.

Das Feld für KI-Unterstützung mit den hervorgehobenen Verlaufssteuerelementen.

Neu beginnen

Wenn Sie eine neue Unterhaltung mit dem aktuell ausgewählten Unterhaltungskontext beginnen möchten, klicken Sie auf die Schaltfläche „“.

Weiter

Wenn Sie eine frühere Unterhaltung fortsetzen möchten, klicken Sie auf die Schaltfläche „“ und wählen Sie die Unterhaltung im Kontextmenü aus.

Löschen

Wenn Sie eine Unterhaltung aus dem Verlauf löschen möchten, klicken Sie auf die Schaltfläche „“.

Antworten bewerten und Feedback geben

Die KI-Unterstützung ist eine experimentelle Funktion. Wir freuen uns daher über Ihr Feedback, damit wir die Qualität der Antworten und die allgemeine Nutzererfahrung verbessern können.

Der Bereich für KI-Unterstützung mit hervorgehobenen Steuerelementen für die Bewertung.

Antworten bewerten

Bewerten Sie eine Antwort mit den Schaltflächen „Mag ich“ Thumbs up und „Mag ich nicht“ Thumbs down unter der Antwort.

Antworten melden

Wenn Sie unangemessene Inhalte melden möchten, klicken Sie neben den Schaltflächen für die Bewertung auf die Schaltfläche „“.