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

Alex Rudenko

Ergün Erdogmus

Veröffentlicht: 14. Januar 2025

Letztes Jahr auf der Google I/O 2024 haben wir Console Insights eingeführt, die erste KI-Funktion in den Chrome DevTools. Mithilfe von Konsolen-Statistiken können Sie Fehler und Warnungen besser nachvollziehen, die in der Konsole protokolliert wurden. Dazu werden Netzwerkdaten, Quellcode und Stack-Traces, die sich auf die Protokollmeldung beziehen, an Gemini gesendet, das Large Language Model (LLM) von Google. Console Insights sendet einen einzelnen Prompt an Gemini, der eine einzelne Antwort zurückgibt, ohne dass Entwickler Anschlussfragen stellen können. Dieser einzelne Interaktionsablauf eignet sich zwar relativ gut zur Erklärung von Fehlermeldungen, ist aber nicht für komplexere Anwendungsfälle zur Fehlerbehebung in DevTools geeignet, bei denen nicht klar ist, welche Daten von der geprüften Seite eine KI zur Unterstützung benötigen würde.

Ein solcher Anwendungsfall ist das Beheben von Stilproblemen. Eine einzelne Webseite kann Tausende von Elementen und CSS-Regeln enthalten, von denen nur ein Teil für die Fehlerbehebung in einem bestimmten Szenario relevant ist. Den richtigen Code für die Fehlerbehebung zu identifizieren, kann selbst für Menschen eine Herausforderung sein. Aber mit einem Prototyp, der während eines KI-Hackathons bei Google entwickelt wurde, haben wir gelernt, dass LLMs tatsächlich ziemlich gut darin sind. Daher wollten wir diese Funktion auch für DevTools-Nutzer verfügbar machen. Wir haben ein Tool entwickelt, mit dem sich Stilprobleme untersuchen lassen, indem die Seite interaktiv auf zusätzliche Kontextdaten abgefragt wird. Das Tool wurde einige Monate später als KI-gestützte Styling-Hilfe eingeführt.

In diesem Beitrag möchten wir uns mit den Herausforderungen befassen, die wir bei der Einführung von KI in einem beliebten Produkt wie den Chrome DevTools – im Grunde eine Webanwendung – gemeistert haben. Außerdem erfahren Sie, was Sie für Ihre eigenen KI-Funktionen anpassen können.

Die richtigen Daten erheben

In der Console werden immer dieselben Datenpunkte verwendet, um auf einen vordefinierten Prompt zu reagieren. Damit die KI-Unterstützung bei benutzerdefinierten Prompts hilfreich ist, müssen wir dynamisch ermitteln, welche Kontextdaten für die jeweilige Suchanfrage wichtig sind.

Daher haben wir ReAct (Yao et al., 2022) Diese Prompt-Strategie ermöglicht es LLMs, eigenständig zu argumentieren und die nachfolgende Aktion auf der Grundlage ihrer Argumentation zu bestimmen.

So arbeitet die KI-Unterstützung in einem Zyklus aus Denken, Handeln und Beobachtung, bis sie eine geeignete Antwort auf die Anfrage des Nutzers ermittelt. An diesem Punkt schließt sie den Zyklus ab und gibt eine Antwort. Durch diesen iterativen Prozess kann der LLM die genauen Informationen erfassen, die für eine effektive Fehlerbehebung bei Stilproblemen erforderlich sind.

Eine visuelle Darstellung des ReAct-Musters, wie es für die KI-Unterstützung implementiert wurde. Der Prompt wird an Gemini gesendet, das eine Antwort mit Aktionen zurückgibt, die über DevTools-Befehle auf die geprüfte Seite angewendet werden. Dieser Vorgang wird wiederholt, bis das LLM eine geeignete Antwort auf die Suchanfrage des Nutzers ermittelt.

Zum Erfassen von Informationen haben wir Gemini nur ein Tool zur Verfügung gestellt: das Ausführen von JavaScript auf der geprüften Seite. So kann Gemini mithilfe von KI-Unterstützung beispielsweise:

• Auf das DOM zugreifen und es analysieren: Durchsuchen Sie den DOM-Baum, prüfen Sie die Elementattribute und verstehen Sie die Beziehungen zwischen den Elementen.
• Berechnete Stile abrufen: Sie können auf berechnete Stile für jedes Element zugreifen.
• Berechnungen und Messungen ausführen: JavaScript-Code ausführen, um Entfernungen, Größen und Positionen von Elementen zu berechnen.

So kann die KI-Unterstützung interaktiv nur auf relevanten Code reagieren, was die Antwortqualität, die Antwortzeit und die Nutzung von Rechenressourcen im Vergleich zum Senden des gesamten HTML- und CSS-Quellcodes an Gemini verbessert.

KI-generierten Code im Userspace ausführen

Es mag unerwartet erscheinen, dass wir zum Beheben von Stilproblemen JavaScript verwendet haben. Dafür gibt es zwei Gründe.

• Web-APIs sind sehr leistungsstark und decken von Natur aus viele Anwendungsfälle für die Fehlerbehebung ab. Für Entwickler kann es mühsam sein, API-Aufrufe manuell zu verwenden, um das DOM zu durchsuchen oder zum Debuggen auf berechnete Stile zuzugreifen. Für einen LLM ist es jedoch kein Problem, Code zu generieren, der diese aufruft.
• Es ist zwar möglich, neue APIs für einen Agenten zu entwickeln, aber die Wiederverwendung vorhandener öffentlicher APIs ist oft die bessere Wahl, da sie den LLMs bereits bekannt sind. Um ein LLM mit einer neuen API vertraut zu machen, sind viele Ressourcen für die Feinabstimmung und spezifische Trainingsdaten erforderlich.

Das Ausführen von KI-generiertem Code im Userspace birgt jedoch Risiken. Bei der KI-Unterstützung mussten wir das Risiko von schädlichen Änderungen minimieren, die der Kundenservicemitarbeiter an der Seite vornehmen könnte. Dazu haben wir die Nebeneffektprüfungen verwendet, die V8, die JavaScript-Engine von Chrome, über das Chrome DevTools-Protokoll bereitstellt. Für die Funktion „Autocomplete“ in der DevTools-Konsole werden dieselben Prüfungen verwendet: JavaScript-Code wird nur ausgeführt, wenn er den Seitenstatus nicht ändert. Die Prüfungen werden ausgeführt, während V8 den Code ausführt. Sie basieren auf einer Zulassungsliste von JavaScript-Einbauten, die keine bekannten Nebenwirkungen haben.

Wenn bei den Prüfungen festgestellt wird, dass der generierte Code die geprüfte Seite verändert, wird die Ausführung pausiert und der Nutzer wird aufgefordert, den Code zu prüfen und zu bestätigen, dass er ausgeführt werden darf.

Außerdem wird generiertes JavaScript in einer sogenannten isolierten Welt ausgeführt. Das ist vergleichbar mit der Ausführung von Sandbox-Scripts in Erweiterungen: Der generierte Code kann auf das DOM und die Web-APIs zugreifen, aber nicht auf JavaScript-Code oder den Status, der von der geprüften Seite definiert wird.

Änderungen durch den Kundenservicemitarbeiter verfolgen

Neben der Untersuchung von Problemen und der Beantwortung von Fragen zur Fehlerbehebung auf der Seite wollten wir dem KI-Hilfeassistenten auch die Möglichkeit geben, Stile auf der Seite so zu korrigieren, dass sie von Entwicklern nachverfolgt werden können.

Dazu haben wir eine Bindung namens setElementStyles implementiert, die wir zusätzlich zu den Standard-Web-APIs für den Ausführungskontext des Agents freigeben.

Damit Gemini diese neue Methode kennt, weisen wir sie in der Präambel der KI-Unterstützung an, sie zu verwenden:

If you need to set styles on an HTML element, always call the \`async setElementStyles(el: Element, styles: object)\` function.

Obwohl es sich um eine speziell für den Kundenservicemitarbeiter entwickelte API handelt, die die oben genannten Herausforderungen mit sich bringt, wird sie von Gemini auch ohne Feinabstimmung recht zuverlässig verwendet, wenn Stile für ein bestimmtes Element geändert werden müssen.

Wenn setElementStyles in den DevTools vom Kundenservicemitarbeiter aufgerufen wird, verwendet die KI-Unterstützung Inspektions-Stylesheets, um die Änderung für die Elementauswahl aufzuzeichnen. Durch CSS-Verschachtelung wird die Änderung benannt und die Spezifität des Selektors des Elements erhöht. Eine beispielhafte CSS-Regel, die vom Agenten erstellt wurde, sieht so aus:

.ai-style-change-1 { /* the ID is incremented for each change*/
  .element-selector { /* Element selector is computed based on the element setElementStyles was called on. */
    color: blue;
  }
}

Dadurch werden zwar nicht alle möglichen Stilkonflikte auf der Seite behoben, aber in den meisten Fällen funktioniert es.

Der Vorteil von Inspector-Stylesheets im Vergleich zu Inline-Styles besteht darin, dass Änderungen, die vom Kundenservicemitarbeiter vorgenommen wurden, auch im Bereich Änderungen angezeigt werden. So lässt sich leichter nachvollziehen, welche Änderungen an den Elementstilen vorgenommen wurden und was ein Entwickler in den zugrunde liegenden Quellcode übertragen muss. Durch die Integration in den Bereich „Änderungen“ können Sie die Änderungen auch rückgängig machen, wenn sie nicht mehr erforderlich sind.

Kundenservicemitarbeiter-Aktionen für Nutzer sichtbar machen

Wenn Sie einem Produkt Funktionen für KI-gestützte Agenten hinzufügen, ist es wichtig, dass die Aktionen der Agenten für Nutzer transparent sind, damit sie sie nachvollziehen und gegebenenfalls eingreifen können.

Für die KI-Unterstützung weisen wir Gemini daher an, Antworten in einem bestimmten Format zu strukturieren, wobei die Präambel ergänzt wird:

You are going to answer to the query in these steps:
*   THOUGHT
*   TITLE
*   ACTION
*   ANSWER
*   SUGGESTIONS
Use THOUGHT to explain why you take the ACTION. Use TITLE to provide a short summary of the thought.

Anhand dieser Struktur werden die Denkprozesse und Aktionen von Gemini als zunächst minimierte Schritte dargestellt. So wird eine Informationsüberflutung verhindert, während Nutzer gleichzeitig die zugrunde liegenden Details prüfen oder die Ausführung bei unbeabsichtigten Nebenwirkungen beenden können.

Zusammengefaltete und pausierte Denkschritte in der KI-Unterstützung der Chrome-Entwicklertools.

Bei diesem Ansatz geht es nicht nur darum, die KI zu beobachten, sondern auch, aktiv daraus zu lernen. Indem Nutzer diese Abschnitte maximieren, können sie die Daten analysieren, die Gemini für die Behebung eines bestimmten Problems als relevant erachtet hat, und den Ablauf nachvollziehen. Diese Transparenz ermöglicht es Nutzern, von den Debugging-Strategien der KI zu lernen, damit sie ähnliche Techniken auf zukünftige Herausforderungen anwenden können, auch wenn sie ohne KI arbeiten.

Um die Nutzerfreundlichkeit weiter zu verbessern, bietet die KI-Unterstützung nach der Antwort der KI auch kontextbezogene Vorschläge. Diese Vorschläge optimieren die Unterhaltung, indem sie Ideen für den nächsten Schritt zur Fehlerbehebung liefern oder es Nutzern sogar ermöglichen, empfohlene Fehlerbehebungen mit nur einem Klick auszuführen.

Beispielhafte vorgeschlagene Folgefragen in der KI-Unterstützung, die im Rahmen der Antwort generiert wurden.

Ursprünglich haben wir erwogen, ein kleineres, separates Modell speziell für die Zusammenfassung zu verwenden, um Schritttitel und Vorschläge in der KI-Unterstützung zu generieren. Wir haben jedoch festgestellt, dass das ReAct-Muster, das die Argumentation von Gemini in einer Schleife aus „Gedanken“ und „Handlungen“ strukturiert, effektiv erweitert werden kann. Anstatt ein zweites Modell einzuführen, das auch zu einer zusätzlichen Latenz führen würde, haben wir unseren Prompt so geändert, dass Gemini nicht nur seine Hauptelemente „Gedanken“ und „Aktionen“ generiert, sondern auch prägnante Titel und hilfreiche Vorschläge innerhalb desselben ReAct-Loops.

Testbasierte Entwicklung

Die Entwicklung der KI-Unterstützung für das Styling wurde durch einen strengen Bewertungsprozess vorangetrieben. Um die Leistung zu messen und Verbesserungsmöglichkeiten zu ermitteln, haben wir eine umfassende Sammlung von Beispielen für das Web-Debugging zusammengestellt, die unter anderem häufige Überlaufprobleme, Webkomponenten und Animationen behandeln. So konnten wir die Breite des Web-Debugging-Problembereichs abdecken und die damit verbundenen Herausforderungen genau verstehen. Das ist jedoch eine Aufgabe, die nie abgeschlossen ist: Da der Web-Plattform regelmäßig neue Funktionen hinzugefügt werden, müssen wir diese Beispiele in Zukunft auf dem neuesten Stand halten.

Diese Beispiele werden in eine automatisierte Bewertungspipeline eingespeist, in der die Antworten von Gemini aufgezeichnet werden. Die Daten aus diesen automatisierten Tests werden dann in einem benutzerdefinierten Tool verfügbar gemacht, in dem wir die Leistung von Gemini im Hinblick auf die KI-Unterstützung anhand vordefinierter Bewertungsschemata manuell bewerten. Diese Informationen fließen in unsere anschließenden Entwicklungsbemühungen ein.

Dieser datengetriebene Ansatz sorgt dafür, dass alle Änderungen, sei es die Optimierung bestehender Verhaltensweisen oder die Einführung neuer Funktionen, sorgfältig geprüft werden, um sowohl die beabsichtigten Verbesserungen zu erzielen als auch Rückschritte bei der bestehenden Funktionalität zu verhindern.

Um unseren Bewertungsprozess weiter zu verbessern, prüfen wir derzeit automatisierte Überprüfungsmethoden, darunter:

• Bestätigungen zur korrekten Anwendung von Fehlerkorrekturen
• Codebasierte Prüfungen, um unerwünschte Ausgaben von Gemini zu verhindern
• LLMs als Prüfer einsetzen, die anhand bestimmter Bewertungsschemata unsere manuellen Bewertungen halbautomatisieren und beschleunigen

Die automatisierte Überprüfung trägt zwar zur Skalierung bei, aber auch das Feedback von Menschen ist wichtig. Wir erfassen Feedback von Nutzern mithilfe von Abstimmungsschaltern unter jeder Antwort in der KI-Unterstützung, um herauszufinden, wie zufrieden sie sind. Über eine zusätzliche Schaltfläche „Melden“ können Nutzer bei anstößigen Antworten genaueres Feedback geben.

Tipp :Weitere Informationen zu verschiedenen Teststrategien für Anwendungen mit LLM finden Sie in einem Beitrag von Michael Hablich, Product Manager der Chrome DevTools.

Prompt-Injections

Eine bekannte und dokumentierte Einschränkung von LLMs ist, dass sie anfällig für Prompt-Injections sind. Bei der Prompt-Injection wird versucht, die ursprünglichen Systemanweisungen eines LLM zu überschreiben, damit Inhalte ausgegeben werden, die nicht von den Entwicklern beabsichtigt waren.

Die meisten Modelle haben mittlerweile integrierte Maßnahmen zur Abschwächung von Prompt-Injection, ebenso wie Gemini. Bei KI-gestützten Hilfen versuchen wir außerdem, dies in unserer Präambel durch die folgende Anleitung zu minimieren:

If the user asks a question about religion, race, politics, sexuality, gender, or other sensitive topics, answer with "Sorry, I can't answer that. I'm best at questions about debugging web pages.

Das funktioniert zwar bei einigen expliziten nicht themenbezogenen Fragen, ist aber nicht perfekt. Ein Nachteil ist, dass kurze und mehrdeutige Suchanfragen als nicht themenrelevant eingestuft werden können.

Auf einer soliden Grundlage aufbauen

Wenn Sie KI zum ersten Mal in Ihr Produkt einbinden, sollten Sie es Schritt für Schritt angehen, anstatt gleich einen großen Sprung zu machen. So haben wir auch bei der KI-gestützten Unterstützung vorgegangen. Mit allem, was wir beim Erstellen des Styling-Agenten gelernt haben, haben wir eine solide Grundlage geschaffen, um die KI-Unterstützung später auf andere Bereiche von DevTools auszuweiten.

Da wir die meisten der größeren Herausforderungen bei der Arbeit am Styling-Agenten bereits gelöst hatten, konnten wir nur wenige Monate später KI-Unterstützung für das Netzwerk, die Leistung und die Quellen einführen und uns auf die individuellen Herausforderungen konzentrieren.

Sicherheitsaspekte bei der Arbeit mit Netzwerkanfragen

Mit der KI-Unterstützung für das Netzwerk können Nutzer bestimmte Netzwerkanfragen mit Gemini besprechen und dabei Daten aus der Anfrage als Kontext für die Unterhaltung verwenden. Insbesondere werden die folgenden Daten an Gemini gesendet:

• Anfrage-Header: Eine Teilmenge der Header, die vom Browser an den Server gesendet werden.
• Antwortheader: Ein Teil der vom Server zurückgegebenen Header.
• Antwortstatus: Der HTTP-Statuscode, der die Antwort des Servers angibt (z. B. 200, 404).
• Zeitangaben: Detaillierte Zeitangaben zu verschiedenen Phasen der Anfrage, z. B. zur Verbindungseinrichtung und Datenübertragung.
• Request Initiator Chain (Anfrageinitiator-Kette): Die Abfolge von Aktionen und Scripts, die die Anfrage initiiert haben.

Header sind zwar wichtig, um die Zusammensetzung einer Anfrage vollständig zu verstehen, bergen aber ein Sicherheitsrisiko: Sie können Anmeldedaten wie API-Schlüssel, Sitzungstokens oder sogar unverschlüsselte Passwörter enthalten. Zum Schutz solcher vertraulicher Informationen senden wir nicht alle Header an Gemini. Stattdessen pflegen wir eine Zulassungsliste mit zulässigen Headern. Werte von Headern, die nicht auf der Zulassungsliste stehen, werden durch <redacted> ersetzt. So wird sichergestellt, dass Gemini den erforderlichen Kontext erhält und gleichzeitig die Nutzerdaten geschützt werden.

An verschiedene Datenformate anpassen

Mit der KI-Unterstützung für Quellen können Entwickler im Bereich „Quellen“ Fragen zu einer Quelldatei stellen, z. B. „Wozu dient diese Datei?“

Die Daten zur Datei, einschließlich des Dateinamens, des Dateiinhalts und der Information, ob sie einer Quelle zugeordnet ist, werden in einem einzigen Prompt gesendet. Das funktioniert gut, weil es sich nur um einfachen Text handelt. Große Textdateien oder Binärdateien stellen jedoch eine Herausforderung für LLMs dar. Bei Binärdateien haben wir uns entschieden, im Prompt anzugeben, dass der Inhalt binär ist, und keine Inhalte zu senden. Bei großen Textdateien senden wir nur einen kleineren Teil des Inhalts, der sich am Anfang der Datei befindet.

Bei der KI-gestützten Leistungsoptimierung, mit der Entwickler Fragen zu einer bestimmten Aufgabe aus einem aufgezeichneten Leistungsprofil stellen können, besteht eine ähnliche Herausforderung: Es muss eine Darstellung erstellt werden, die in das Kontextfenster von Gemini passt und auch interpretiert werden kann, um zusätzliche Informationen zu erhalten.

Um eine solche Präsentation aus einem Leistungsprofil zu erstellen, haben wir einen speziellen Serializer namens AiCallTree entwickelt, der den Aufrufbaum für eine Aufgabe so formatiert, dass er von einem LLM verarbeitet werden kann. Künftig werden wir auch hier die ReAct-Strategie untersuchen, um die Menge der Daten zu minimieren, die vorab an Gemini gesendet werden müssen.

KI-Unterstützung in Zukunft

Das Ergebnis all dieser Arbeit ist ab Chrome 132 verfügbar. Es umfasst KI-gestützte Unterstützung für Styling, Netzwerk, Quellen und Leistung. Wir hoffen, dass es Ihnen genauso viel Spaß macht wie uns beim Entwickeln.

In unserem umfassenden Schnellstartleitfaden für KI-gestützte Hilfe finden Sie viele Demovorschläge, die Sie auf Ihren eigenen Seiten ausprobieren können. Teilen Sie uns Ihre Meinung in unserem offenen Bug-Diskussionsforum mit.