Chat met AI-assistentie

Matthias Rohmer

Sofia Emelianova

DevTools biedt een AI-assistentiepaneel waarmee u uw website beter kunt begrijpen en problemen kunt oplossen door te chatten met een ingebouwde AI-agent.

Het AI- assistentiepaneel wordt aangedreven door Gemini en doet het volgende:

• Gespecialiseerd in webontwikkeling.
• Kan algemene vragen over de hele webpagina beantwoorden en specifieke inzichten geven over diverse onderwerpen, waaronder maar niet beperkt tot vormgeving, netwerken, prestaties en meer.
• Het systeem filtert en selecteert automatisch specifieke context om over te chatten, zoals DOM-elementen, netwerkverzoeken, prestatietraceergebeurtenissen en meer.
• Kan autonome acties uitvoeren, zoals audits uitvoeren en prestatiegegevens vastleggen.
• Biedt een stapsgewijze uitleg van de acties en de onderliggende redenering, en bevat links naar relevante onderdelen van DevTools, zodat u deze met één klik kunt inspecteren.
• Kan codeaanpassingen voorstellen en een prompt genereren met de bijbehorende inzichten, die uw codeeragent vervolgens kan uitvoeren.

Opmerking: De functies voor autonome acties, stapsgewijze instructies en het genereren van prompts zijn beschikbaar in Chrome versie 149 en later.

Met behulp van AI kunt u problemen met de styling, netwerkverbinding, prestaties en broncode van uw website oplossen, en nog veel meer.

Om effectief met Gemini te chatten via het AI-assistentiepaneel , leer je hoe je het paneel opent, prompts selecteert en het gespreksverloop beheert.

Open het AI-assistentiepaneel

Het AI- assistentiepaneel wordt standaard in het zijpaneel geopend.

Om het paneel te openen, klikt u op de knop voor AI-ondersteuning, die zich bevindt in het algemene toegangspunt rechts van de hoofdwerkbalk bovenaan.

Van de panelen

Je kunt het paneel, met de gesprekscontext geselecteerd, rechtstreeks openen vanuit de panelen Elementen , Netwerk , Bronnen of Prestaties op twee manieren:

• Klik op De knop ' Debuggen met AI' bevindt zich naast een element, netwerkverzoek, bronbestand of een uitgebreider prestatie-inzicht.

  

• Klik met de rechtermuisknop op een element, verzoek, bestand of trace-item en selecteer een van de veelgebruikte promptopties in het contextmenu ' Foutopsporing met AI' .

  

Vanuit het opdrachtmenu

Om AI-assistentie te openen vanuit het opdrachtmenu, typt AI en voert u vervolgens de opdracht 'AI-assistentie weergeven ' uit, die wordt herkend aan het lade -icoontje ernaast.

Via het menu 'Meer tools'

Als alternatief kunt u in de rechterbovenhoek Instellingen > Meer opties > Meer tools > AI-ondersteuning selecteren.

Aanmoediging

Bij het starten van een nieuw gesprek biedt AI-assistentie voorbeeldvragen om je snel op weg te helpen.

Klik op een van de prompts om het prompt-invoerveld onderaan het paneel vooraf in te vullen.

U kunt ook uw eigen vraag of opdracht in het invoerveld typen.

Om een ​​prompt te verzenden, drukt u op Enter of klikt u op de pijl aan de rechterkant van het invoerveld.

Open vragen zonder context

Met het vrije chatvenster kunt u open vragen van een hoger niveau stellen zonder voorafgaande context. Bijvoorbeeld:

• How to use DevTools to debug accessibility?

  De AI-assistent voert eerst een Lighthouse-audit uit voor toegankelijkheid om uw vraag beter te kunnen beantwoorden.

• What are the slowest network requests on this page?

  De AI-assistent geeft een lijst met verdachte verzoeken en links ernaartoe in het netwerkpaneel , zodat u met één klik een verzoek als gesprekscontext kunt selecteren.

• What performance issues exist on the page?

  De AI-assistent registreert automatisch een prestatietrace met de door u geselecteerde instellingen om deze vraag te beantwoorden.

• Vragen zoals ' How do I use the Animation panel? of Where is the high contrast setting in DevTools? bieden directe hulp bij DevTools zelf.

Zodra je de chat start, zal de AI-assistent de context op intelligente wijze bijwerken op basis van je acties wanneer de chat leeg is, terwijl je handmatige selecties worden gerespecteerd wanneer je die maakt.

Aanwijzingen met context

Wanneer je AI-assistentie opent vanuit een paneel , wordt de bijbehorende gesprekscontext geselecteerd in het chatvenster, zodat je specifiek kunt chatten over wat je hebt geselecteerd.

Je kunt de context op elk moment handmatig wijzigen door een element in Elementen , een verzoek in Netwerk , een trace-item in Prestaties of een bestand in Bronnen te selecteren.

Je kunt ook delen van een bestand kopiëren, bijvoorbeeld vanuit het paneel Bronnen , en deze in de chat plakken om te vragen wat ze doen.

Leer vervolgens meer over de gespreksstroom in AI-assistentie .

Gespreksverloop

Het versturen van een prompt start het gesprek met de agent. Om de benodigde informatie te verkrijgen en uw prompt zo goed mogelijk te kunnen beantwoorden, genereert en voert de agent JavaScript uit dat web-API's aanroept.

De voortgang van de agent wordt in stappen weergegeven. De status van de eerste stap is Investigating… .

Het label van de eerste stap wordt bijgewerkt naarmate de agent meer specifieke acties uitvoert om uw vraag te beantwoorden.

Afhankelijk van wat u aan het debuggen bent, kan de agent ook acties uitvoeren in DevTools, zoals het vastleggen van een prestatietrace of het uitvoeren van Lighthouse-audits.

Agent rondleiding

Zodra de agent een antwoord op uw vraag heeft gegenereerd, verandert het label van de eerste stap in 'Toon agent-walkthrough' of 'Toon denkproces' . U kunt dit uitbreiden om in een zijpaneel aan de rechterkant de stappen te zien die de agent heeft genomen om de gegevens te analyseren.

De stappen omvatten:

• Uitbreidbare codefragmenten die de agent heeft uitgevoerd, samen met de geretourneerde gegevens. U kunt de code kopiëren en in de console uitvoeren.
• Widgets die onderzoeksresultaten in een beter leesbaar formaat presenteren.

De widgets hebben een knop 'Weergeven' in de rechterbovenhoek waarmee je naar het betreffende onderdeel van DevTools wordt geleid.

Vervolgvragen

Zodra de medewerker een definitief antwoord heeft gegeven, kan hij of zij vervolgvragen voorstellen. Klik op een van deze vragen om het gesprek voort te zetten.

Genereer een prompt voor uw codeeragent.

Om een ​​prompt voor uw codeeragent te genereren, klikt u op Kopiëren naar codeeragent .

De agent vat zijn bevindingen en inzichten samen en geeft een bruikbare suggestie, in een vereenvoudigde vorm of in een leesbaar Markdown-formaat, die u naar het klembord kunt kopiëren om verder te coderen met een AI-agent naar keuze.

Gesprekken die gepauzeerd zijn

AI-ondersteuning kan code genereren met neveneffecten. Wanneer dat gebeurt, wordt het gesprek gepauzeerd voordat de code wordt uitgevoerd.

Wanneer het gesprek even stilstaat, bekijk dan de code die de agent voorstelt. Klik op Doorgaan om verder te gaan of op Annuleren om de uitvoering te stoppen.

Let op: zolang het gesprek is gepauzeerd, is promptinvoer uitgeschakeld.

U kunt de voorgestelde codewijzigingen bekijken in het paneel Wijzigingen .

De agent voert de wijzigingen door in DevTools, maar u kunt uw werkruimte zo configureren dat DevTools wijzigingen in uw broncode opslaat.

Sla wijzigingen op in je werkruimte.

Met een gekoppelde werkmap kunt u stijlwijzigingen die door AI-assistentie worden voorgesteld, opslaan in de CSS-bronbestanden op uw computer.

Om dit te doen:

1. Genereer eerst een metadatabestand en koppel een werkmap .

   U kunt ook handmatig een map toevoegen .

2. Start een chatgesprek vanuit het Elements-paneel .

3. Gebruik AI om je CSS aan te passen.

4. AI-ondersteuning kan code genereren en de uitvoering pauzeren . Bekijk de code en klik op Doorgaan om de wijzigingen live te testen.

5. Vouw het gedeelte 'Niet-opgeslagen wijzigingen' uit en klik op 'Toepassen op werkruimte' .

   Opmerking: Als u geen gekoppelde werkruimtemap hebt, zal het AI-assistentiepaneel u in deze stap vragen deze handmatig toe te voegen.

6. Bekijk de wijzigingen in een diff en klik op Alles opslaan .

Om deze workflow te leren kennen, zie:

Geen antwoord gegeven

AI-ondersteuning kan om verschillende redenen geen antwoorden geven.

Als je denkt dat jouw vraag iets is waar AI-ondersteuning over zou moeten kunnen discussiëren, meld dan een bug .

Gespreksgeschiedenis

Zodra je een gesprek start, is elk volgend antwoord gebaseerd op je eerdere interacties met de AI.

De AI-assistent bewaart je gespreksgeschiedenis tussen sessies, zodat je toegang hebt tot je eerdere chats, zelfs na het opnieuw laden van DevTools of Chrome.

Gebruik de bedieningselementen in de linkerbovenhoek van het paneel om uw gespreksgeschiedenis te beheren.

Begin opnieuw

Om een ​​nieuw gesprek te starten met de momenteel geselecteerde gesprekscontext, klikt u op de knop 'Toevoegen '.

Doorgaan

Om een ​​eerder gesprek voort te zetten, klikt u op de knop 'Geschiedenis' en selecteert u het in het contextmenu.

Let op: de gesprekscontext wordt niet automatisch bijgewerkt, omdat deze mogelijk is verdwenen sinds het gesprek is beëindigd.

Verwijderen

Om een ​​gesprek uit de geschiedenis te verwijderen, klikt u op de knop ' Verwijderen '.

Beoordeel de antwoorden en geef feedback.

AI-ondersteuning is een experimentele functie. Daarom zijn we actief op zoek naar uw feedback om te leren hoe we de kwaliteit van de antwoorden en de algehele gebruikerservaring kunnen verbeteren.

Stemantwoorden

Beoordeel een antwoord met de duim omhoog (duim omhoog) en duim omlaag (duim omlaag) knoppen onder het antwoord.

Rapporteer antwoorden

Om ongepaste inhoud te melden, klikt u op de rapporteerknop naast de stemknoppen.