KI-Unterstützung beim Gestalten von Karteninhalten

Verwenden Sie das Steuerfeld KI‑Unterstützung für das Styling, um das Gesamtlayout einer Website und die Styles bestimmter Elemente zu verstehen und KI‑generierte Korrekturen für CSS‑Fehler zu erhalten.

Bereich „KI-Unterstützung“ öffnen

Der Bereich Unterstützung durch KI wird in der Seitenleiste geöffnet.

Der Bereich für KI‑Unterstützung wurde im Standardzustand geöffnet.

Über den Bereich „Elemente“

Wenn Sie KI-Unterstützung über den Elementbereich öffnen möchten, untersuchen Sie einen DOM-Knoten>, klicken Sie mit der rechten Maustaste auf den Knoten und wählen Sie die Option KI fragen aus.

Das Kontextmenü des Elements mit der hervorgehobenen Option „KI fragen“.

Wenn Sie KI-Unterstützung auf diese Weise öffnen, ist das untersuchte DOM-Element bereits als Kontextelement für die Konversation ausgewählt.

Alternativ können Sie auf die schwebende Schaltfläche klicken, die an einen DOM-Knoten angehängt ist, auf den Sie den Mauszeiger bewegen.

Die unverankerte Schaltfläche, die an einen DOM-Knoten angehängt ist.

Über das Befehlsmenü

Wenn Sie Unterstützung durch KI über das Befehlsmenü öffnen möchten, geben Sie AI ein und führen Sie dann den Befehl Show AI assistance (Unterstützung durch KI anzeigen) aus, neben dem das Symbol Drawer (Schublade) angezeigt wird.

Das geöffnete Befehlsmenü mit hervorgehobener Option „KI‑Unterstützung einblenden“.

Über das Menü „Weitere Tools“

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

Das geöffnete Menü „Weitere Tools“.

Kontext der Unterhaltung

Chats mit KI-Unterstützung beziehen sich immer auf das aktuell untersuchte Element, also das zuletzt im DOM-Baum des Elementbereichs ausgewählte Element. Unten links im Bereich wird auf dieses Element verwiesen.

Der Bereich für KI-Unterstützung mit dem hervorgehobenen Kontextelement.

Ändern Sie den Kontext mit der Elementauswahl neben dem aktuellen Element oder indem Sie ein Element aus der DOM-Baumstruktur im Bereich „Elemente“ auswählen.

Wenn Sie den Kontext ausgewählt haben, können Sie einen Screenshot des Viewports aufnehmen und ihn in den Chat einfügen. Klicken Sie neben dem Chateingabefeld auf die Schaltfläche Screenshot erstellen.

Die Schaltfläche „Screenshot erstellen“ und ein angehängter Screenshot im Eingabefeld.

Sie können Screenshots verwenden, um Ihren Prompts zusätzlichen visuellen Kontext zu geben, z. B. um zu prüfen, ob alle sichtbaren Schaltflächen den gleichen Abstand haben.

Das aktuell untersuchte Element ist zwar die Grundlage für die Konversation, die KI-Unterstützung hat aber Zugriff auf alle Web-APIs, um weitere Informationen von der untersuchten Seite zu erfassen. Dazu gehört auch das Abfragen anderer Elemente mit document.querySelector oder das Auswerten berechneter Stile.

Prompten

Wenn Sie eine neue Unterhaltung beginnen, bietet die KI-Unterstützung für die Formatierung Beispielprompts, die Ihnen den Einstieg erleichtern.

Der Bereich für KI-Unterstützung mit den hervorgehobenen Beispiel-Prompts.

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

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

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

Gesprächsablauf

Wenn Sie einen Prompt senden, beginnt die Unterhaltung mit dem Styling-Agent. 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 Kundenservicemitarbeiters wird in Schritten angezeigt. Der anfängliche Status des Schritts ist Investigating….

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

Das Schrittlabel wird aktualisiert, wenn der Agent spezifischere Aktionen ausführt, um Ihre Frage zu beantworten.

Sobald der Agent eine endgültige Antwort gefunden hat, wird sie unter den Untersuchungsschritten angezeigt, zusammen mit Vorschlägen für Folgeprompts.

Das Feld für KI‑Unterstützung mit einer von KI generierten Antwort.

Klicken Sie auf einen der vorgeschlagenen Prompts, um die Unterhaltung fortzusetzen. Klicken Sie auf das Symbol .

eines Untersuchungsschritts, um besser zu verstehen, was die KI-Unterstützung im Hintergrund getan hat.

Das Feld für KI-Unterstützung mit einem erweiterten Konversationsschritt.

Wenn Sie einen Fortschrittschip maximieren, sehen Sie den Code, den der Agent ausgeführt hat, sowie den zugehörigen Rückgabewert. Kopieren Sie den ausgeführten Code zur weiteren Verwendung, z. B. zur Ausführung im Konsolenbereich.

Pausierte Unterhaltungen

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, überprüfen Sie den vom Agent vorgeschlagenen Code. Klicken Sie auf  Weiter, um fortzufahren, oder auf Abbrechen, um die Ausführung zu verhindern.

Änderungen am Arbeitsbereich speichern

Mit einem verknüpften Arbeitsbereichordner können Sie von der KI-Unterstützung vorgeschlagene Stiländerungen in CSS-Quelldateien auf Ihrem Computer speichern.

Gehen Sie dazu so vor:

  1. Zuerst müssen Sie eine Metadatendatei generieren und einen Arbeitsbereichordner verbinden.

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

  2. Starten Sie einen Chat über das Elementfeld.

  3. Verwenden Sie den Prompt KI‑Unterstützung, um Ihr CSS zu ändern.

  4. KI-Unterstützung kann Code generieren und die Ausführung pausieren. 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

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

Der Bereich für KI-Unterstützung mit einer abgelehnten Konversation.

Wenn Sie der Meinung sind, dass KI-Unterstützung in der Lage sein sollte, auf Ihren Prompt zu reagieren, melden Sie einen Fehler.

Unterhaltungsverlauf

Wenn Sie eine Unterhaltung beginnen, basiert jede nächste Antwort auf Ihren vorherigen Interaktionen mit der KI.

Bei der KI-Unterstützung wird Ihr Unterhaltungsverlauf zwischen den Sitzungen gespeichert. So können Sie auch nach dem Neuladen der Entwicklertools oder von Chrome auf Ihre vorherigen Chats zugreifen.

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 starten 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 sie 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

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

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

Für Antworten abstimmen

Bewerten Sie eine Antwort mit den Schaltflächen Mag ich und Mag ich nicht unter der Antwort.

Antworten melden

Wenn Sie unangemessene Inhalte melden möchten, klicken Sie neben den Abstimmungsschaltflächen auf die Schaltfläche .