Gepubliceerd: 14 januari 2025
Tijdens Google I/O 2024 van vorig jaar lanceerden we console-inzichten , de eerste AI-functie in Chrome DevTools. Console-inzichten helpen bij het begrijpen van fouten en waarschuwingen die in de console zijn vastgelegd door netwerkgegevens, broncode en stacktraces met betrekking tot het logbericht te verzenden naar Gemini, het Large Language Model (LLM) van Google. Console-inzichten sturen een enkele prompt naar Gemini die één antwoord retourneert zonder dat ontwikkelaars de mogelijkheid hebben om vervolgvragen te stellen. Hoewel deze enkele interactiestroom relatief goed werkt voor het verklaren van foutmeldingen, kan deze niet worden geschaald naar complexere gebruiksscenario's voor foutopsporing binnen DevTools, waarbij het niet duidelijk is welke gegevens van de geïnspecteerde pagina een AI nodig heeft om te helpen.
Een voorbeeld van zo'n gebruiksscenario is het oplossen van stijlproblemen. Eén enkele webpagina kan duizenden elementen en CSS-regels bevatten, waarbij slechts een subset daarvan relevant is voor het debuggen van een specifiek scenario. Het identificeren van de juiste code voor foutopsporing kan een uitdaging zijn, zelfs voor mensen. Maar met een prototype gebouwd tijdens een AI-hackathon bij Google kwamen we erachter dat LLM's er eigenlijk behoorlijk goed in zijn. Dus natuurlijk wilden we die kracht naar DevTools-gebruikers brengen, door een tool te creëren die stijlproblemen kan onderzoeken door de pagina interactief te doorzoeken op aanvullende contextgegevens. Wat we hebben gebouwd, werd een paar maanden later gelanceerd als AI-hulp bij het stylen .
In dit bericht willen we enig licht werpen op de uitdagingen waarmee we te maken kregen toen we AI introduceerden in een geliefd product als Chrome DevTools (wat in essentie een webapp is) en wat je kunt aanpassen voor je eigen AI-functies.
Het verzamelen van de juiste gegevens
Console-inzichten gebruiken altijd dezelfde gegevenspunten om te reageren op een vooraf gedefinieerde prompt. Om ervoor te zorgen dat AI-hulp nuttig kan zijn bij elke door de gebruiker gedefinieerde prompt, moeten we dynamisch bepalen welke contextgegevens belangrijk zijn voor de betreffende zoekopdracht.
Daarom hebben we de ReAct-strategie ( Yao et al., 2022 ) geïmplementeerd. Deze aanmoedigingsstrategie stelt LLM's in staat om autonoom te redeneren en de daaropvolgende actie te bepalen op basis van hun redenering.
Op deze manier werkt AI-ondersteuning in een cyclus van denken, handelen en observeren totdat het een passend antwoord op de vraag van de gebruiker bepaalt, waarna het de cyclus beëindigt en een antwoord geeft. Dankzij dit iteratieve proces kan de LLM de precieze informatie verzamelen die nodig is om stijlproblemen effectief op te lossen.
Om informatie te verzamelen, hebben we Gemini slechts één hulpmiddel gegeven: het uitvoeren van JavaScript op de geïnspecteerde pagina. Hierdoor kan Gemini via AI-assistentie bijvoorbeeld:
- Krijg toegang tot en analyseer de DOM : doorloop de DOM-boom, inspecteer elementattributen en begrijp de relaties tussen elementen.
- Berekende stijlen ophalen : krijg toegang tot berekende stijlen voor elk element.
- Berekeningen en metingen uitvoeren : voer JavaScript-code uit om afstanden, afmetingen en posities van elementen te berekenen.
Hierdoor werkt AI-assistentie interactief op alleen relevante code, waardoor de responskwaliteit, responstijd en het gebruik van computerbronnen worden verbeterd, vergeleken met het verzenden van de volledige HTML- en CSS-broncode naar Gemini.
Door AI gegenereerde code uitvoeren in de gebruikersruimte
Het lijkt misschien onverwacht dat we voor het opsporen van stijlproblemen JavaScript hebben gebruikt. Hiervoor zijn twee redenen:
- Web-API's zijn zeer krachtig en dekken inherent veel gebruiksscenario's voor foutopsporing. Hoewel het voor een ontwikkelaar vervelend kan zijn om API-aanroepen handmatig te gebruiken om de DOM te doorkruisen of toegang te krijgen tot berekende stijlen voor foutopsporing, is het voor een LLM geen probleem om code te genereren die deze aanroept.
- Hoewel het mogelijk is om nieuwe API's uit te vinden die een agent kan gebruiken, is hergebruik van bestaande, openbare API's vaak de betere keuze, omdat ze al bekend zijn bij LLM's. Het opleiden van een LLM over een nieuwe API vereist veel middelen voor het verfijnen en specifieke trainingsgegevens.
Maar het uitvoeren van door AI gegenereerde code in de gebruikersruimte brengt risico's met zich mee. Voor AI-ondersteuning moesten we het risico minimaliseren van destructieve wijzigingen die de agent op de pagina zou kunnen aanbrengen. Daarvoor hebben we de neveneffectcontroles gebruikt die V8, de JavaScript-engine van Chrome, blootlegt via het Chrome DevTools Protocol. Dezelfde controles worden gebruikt voor de functionaliteit voor automatisch aanvullen in de DevTools Console: deze voert alleen JavaScript-code uit zolang deze geen enkele paginastatus wijzigt. De controles worden uitgevoerd terwijl V8 de code uitvoert en zijn gebaseerd op een acceptatielijst van ingebouwde JavaScript-ins waarvan bekend is dat ze geen bijwerkingen hebben.
Als uit de controles blijkt dat de gegenereerde code de geïnspecteerde pagina wijzigt, wordt de uitvoering gepauzeerd en wordt de gebruiker gevraagd de code te bekijken en te bevestigen dat deze kan worden uitgevoerd.
Bovendien wordt gegenereerd JavaScript uitgevoerd in een zogenaamde geïsoleerde "wereld" . Dat is vergelijkbaar met de manier waarop extensies sandbox-scripts uitvoeren: de gegenereerde code heeft toegang tot de DOM- en Web-API's, maar heeft geen toegang tot JavaScript-code of de status die is gedefinieerd door de geïnspecteerde pagina.
Het bijhouden van wijzigingen die door de agent zijn aangebracht
Naast het onderzoeken van problemen en het beantwoorden van foutopsporingsvragen over de pagina, wilden we de AI-assistentieagent ook de mogelijkheid geven om stijlen op de pagina aan te passen op een manier die traceerbaar is voor ontwikkelaars.
Om dit te bereiken hebben we een binding geïmplementeerd met de naam setElementStyles , die we naast de standaard web-API's ook beschikbaar stellen aan de uitvoeringscontext van de agent.
Om Gemini bewust te maken van die nieuwe methode, instrueren we hem om deze te gebruiken in de AI-assistentie-preambule:
If you need to set styles on an HTML element, always call the \`async setElementStyles(el: Element, styles: object)\` function.
Ondanks dat het een API is die speciaal voor de agent is ontworpen en die de eerder genoemde uitdagingen met zich meebrengt, gebruikt Gemini deze zelfs zonder verfijning vrij betrouwbaar wanneer het de stijl van een bepaald element moet veranderen.
Aan de DevTools-kant, wanneer setElementStyles wordt aangeroepen door de agent, gebruikt AI-assistentie inspecteur-stylesheets om de wijziging voor de elementenkiezer vast te leggen. CSS-nesten wordt gebruikt om de wijziging een naam te geven en de specificiteit van de elementselector te verhogen. Een voorbeeldige CSS-regel die door de agent is gemaakt, ziet er dus als volgt uit:
.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;
}
}
Hoewel dit niet alle mogelijke stijlconflicten oplost die op de pagina kunnen voorkomen, werkt het in de meeste gevallen wel.
Het voordeel van het gebruik van inspecteur-stylesheets in vergelijking met inline-stijlen is dat op deze manier door de agent uitgevoerde wijzigingen ook in het venster Wijzigingen verschijnen, waardoor het gemakkelijker wordt om bij te houden welke wijzigingen in elementstijlen zijn aangebracht en wat een ontwikkelaar moet overbrengen naar de onderliggende broncode. Dankzij de integratie met het paneel Wijzigingen kunnen de wijzigingen ook ongedaan worden gemaakt als de wijziging niet meer nodig is.
Agentacties zichtbaar maken voor gebruikers
Bij het toevoegen van agentische functies aan een product is het belangrijk om de acties van agenten transparant te maken voor gebruikers, zodat ze de kans krijgen om deze te traceren, te begrijpen en mogelijk in te grijpen.
Voor AI-ondersteuning geven we Gemini daarom de opdracht om de antwoorden in een specifiek formaat te structureren met een toevoeging aan de preambule:
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.
Deze structuur wordt vervolgens gebruikt om de denkprocessen en acties van Gemini als aanvankelijk samengevouwen stappen te presenteren, waardoor een overdaad aan informatie wordt voorkomen, terwijl gebruikers toch de onderliggende details kunnen onderzoeken of de uitvoering kunnen stoppen in geval van onbedoelde bijwerkingen.
Deze aanpak gaat niet alleen over het observeren van de AI; het gaat erom dat je er actief van leert. Door deze secties uit te breiden, kunnen gebruikers de gegevens analyseren die Gemini relevant acht voor het opsporen van fouten in een specifiek probleem en inzicht krijgen in het proces dat daarbij is gevolgd. Dankzij deze transparantie kunnen gebruikers leren van de foutopsporingsstrategieën van AI, zodat ze vergelijkbare technieken kunnen toepassen op toekomstige uitdagingen, zelfs als ze zonder AI werken.
Om de gebruikerservaring verder te verbeteren, biedt AI-assistentie ook contextueel relevante suggesties na het antwoord van de AI. Deze suggesties stroomlijnen het gesprek, bieden ideeën voor de volgende foutopsporingsstap of stellen gebruikers zelfs in staat aanbevolen oplossingen direct met één klik uit te voeren.
Om staptitels en suggesties voor AI-ondersteuning te genereren, overwogen we aanvankelijk een kleiner, afzonderlijk model te gebruiken, specifiek voor samenvattingen. We realiseerden ons echter dat het ReAct-patroon, dat de redenering van de Gemini structureert in een lus van 'Gedachten' en 'Acties', effectief kan worden uitgebreid. Dus in plaats van een tweede model te introduceren, dat ook met extra latentie zou komen, hebben we onze prompt aangepast om Gemini te instrueren om niet alleen de kern "Gedachten" en "Acties" te genereren, maar ook beknopte titels en nuttige suggesties binnen dezelfde ReAct-lus.
Evaluatiegedreven ontwikkeling
De ontwikkeling van AI-ondersteuning voor styling werd aangestuurd door een rigoureus evaluatieproces. Om de prestaties te meten en verbeterpunten te identificeren, hebben we een uitgebreide verzameling praktijkvoorbeelden van webfoutopsporing samengesteld, waarin algemene overflow-problemen, webcomponenten, animaties en meer aan bod komen. Hierdoor konden we de breedte van de probleemruimte voor webfoutopsporing in kaart brengen en de daarmee samenhangende uitdagingen grondig begrijpen. Maar dat is nog nooit gedaan: omdat er regelmatig nieuwe functies aan het webplatform worden toegevoegd, moeten we deze voorbeelden in de toekomst up-to-date houden.
Deze voorbeelden worden ingevoerd in een geautomatiseerde evaluatiepijplijn, waarin de antwoorden van Gemini worden vastgelegd. Gegevens van die geautomatiseerde testruns worden vervolgens beschikbaar gesteld in een op maat gemaakte tool waarin we de prestaties van Gemini voor AI-ondersteuning handmatig evalueren aan de hand van vooraf gedefinieerde rubrieken, die onze daaropvolgende ontwikkelingsinspanningen informeren.
Deze evaluatiegestuurde aanpak zorgt ervoor dat alle veranderingen, of het nu gaat om het verfijnen van bestaand gedrag of het introduceren van nieuwe mogelijkheden, zorgvuldig worden geverifieerd om zowel de beoogde verbeteringen te bereiken als regressies in de bestaande functionaliteit te voorkomen.
Om ons evaluatieproces verder te verbeteren, onderzoeken we geautomatiseerde verificatiemethoden, waaronder:
- Beweringen om de juiste toepassing van fixes te bevestigen
- Op code gebaseerde controles om ongewenste uitvoer van Gemini te voorkomen
- LLM's gebruiken als juryleden, geleid door specifieke rubrieken, om onze handmatige evaluaties semi-automatiseren en versnellen
Hoewel geautomatiseerde verificatie helpt bij het opschalen, is menselijke feedback belangrijk. We verzamelen menselijke feedback met stemcontroles onder elke reactie in AI-ondersteuning om te leren hoe tevreden gebruikers zijn. Met een extra rapportknop kunnen gebruikers nauwkeurigere feedback geven op betwistbare reacties.
Snelle injecties
Een bekende en gedocumenteerde beperking van LLM's is dat ze gevoelig zijn voor snelle injecties . Prompt-injectie is de techniek om een manier te vinden om de originele systeeminstructies van een LLM te overschrijven, waardoor inhoud wordt weergegeven die niet door de ontwikkelaars is bedoeld.
De meeste modellen hebben inmiddels ingebouwde oplossingen voor snelle injectie, net als Gemini. Voor AI-ondersteuning proberen we dit bovendien in onze preambule te verzachten door de volgende instructie op te nemen:
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.
Hoewel dit werkt voor sommige expliciete off-topic vragen, is het niet perfect. Een nadeel dat ons is opgevallen, is dat korte en dubbelzinnige zoekopdrachten als off-topic kunnen worden geclassificeerd.
Bouwen op een solide basis
Wanneer u AI voor het eerst in uw product introduceert, is het de moeite waard om stap voor stap te gaan, in plaats van één grote sprong in één keer te maken. Dat is ook hoe we het benaderden voor AI-hulp. Met alles wat we hebben geleerd bij het bouwen van de stylingagent hebben we een solide basis gelegd om AI-ondersteuning later uit te breiden naar andere gebieden van DevTools.
Nadat we de meeste grotere uitdagingen bij het werken aan de stylingagent al een paar maanden later hadden opgelost, konden we AI-ondersteuning introduceren voor netwerk, prestaties en bronnen en konden we ons concentreren op hun individuele uitdagingen.
Beveiligingsimplicaties bij het werken met netwerkverzoeken
Met AI-ondersteuning voor het netwerk kunnen gebruikers specifieke netwerkverzoeken met Gemini bespreken, waarbij gegevens uit het verzoek als context voor het gesprek worden gebruikt. Concreet worden de volgende gegevens naar Gemini verzonden:
- Request Headers : Een subset van headers die door de browser naar de server worden verzonden.
- Reactieheaders : een subset van headers die door de server worden geretourneerd.
- Reactiestatus : de HTTP-statuscode die het antwoord van de server aangeeft (bijvoorbeeld 200, 404).
- Timings : gedetailleerde timinginformatie over verschillende fasen van het verzoek, zoals het instellen van de verbinding en de gegevensoverdracht.
- Request Initiator Chain : de reeks acties en scripts die de aanvraag hebben geïnitieerd.
Hoewel headers belangrijk zijn om volledig te begrijpen hoe een verzoek tot stand komt, brengen ze een veiligheidsrisico met zich mee: ze kunnen inloggegevens bevatten zoals API-sleutels, sessietokens of zelfs gewone wachtwoorden. Om dergelijke gevoelige informatie te beschermen, verzenden we niet alle headers naar Gemini. In plaats daarvan houden we een lijst met toegestane headers bij. Waarden van headers die niet op de toelatingslijst staan, worden vervangen door <redacted> . Deze aanpak zorgt ervoor dat Gemini de nodige context krijgt en tegelijkertijd gebruikersgegevens beschermt.
Aanpassing aan verschillende dataformaten
Met AI-ondersteuning voor bronnen kunnen ontwikkelaars vragen stellen over een bronbestand in het Bronnenpaneel, bijvoorbeeld: "Waar is dit bestand voor?".
De gegevens over het bestand, inclusief de bestandsnaam, de bestandsinhoud en of het aan de bron is toegewezen, worden allemaal in één prompt verzonden. Dit werkt goed omdat het gewoon platte tekst is. Maar grote tekstbestanden of binaire bestanden vormen een uitdaging voor LLM's. Voor binaire bestanden hebben we besloten om in de prompt aan te geven dat de inhoud binair is en geen daadwerkelijke inhoud te verzenden. Voor grote tekstbestanden sturen we slechts een kleiner deel van de inhoud vanaf het begin van het bestand.
Voor AI-ondersteuning voor prestaties, waarmee ontwikkelaars vragen kunnen stellen over een bepaalde taak vanuit een vastgelegd prestatieprofiel, is er een soortgelijke uitdaging om een representatie te creëren die past in het contextvenster van Gemini en die ook kan worden geïnterpreteerd om aanvullende inzichten te verschaffen.
Om zo'n presentatie te maken op basis van een prestatieprofiel, hebben we een speciale serializer gemaakt, AiCallTree genaamd, die de oproepboom voor een taak opmaakt op een manier die een LLM kan verwerken. In de toekomst gaan we de ReAct-strategie ook hier verkennen, om de hoeveelheid gegevens die vooraf naar Gemini moet worden verzonden te minimaliseren.
AI-hulp in de toekomst
Het resultaat van al dit werk is nu beschikbaar vanaf Chrome 132, inclusief AI-ondersteuning voor styling, netwerk, bronnen en prestaties. Wij hopen dat u er net zoveel plezier aan beleeft als wij bij het bouwen ervan.
Om een idee te krijgen waar u moet beginnen, kunt u de uitgebreide snelstartgids voor AI-ondersteuning raadplegen met veel demo-prompts die u op uw eigen pagina's kunt uitproberen. Zorg ervoor dat u ons laat weten wat u ervan vindt in onze open discussiebug .