DevTools biedt een AI-assistentiepaneel waarmee u uw website beter kunt begrijpen en problemen kunt oplossen door te chatten met een AI-agent.
Met behulp van AI kunt u problemen met de styling , netwerkverbinding , prestaties en broncode van uw website oplossen.
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 opent in de lade .
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.
Je kunt het paneel ook rechtstreeks openen vanuit de panelen Elementen , Netwerk , Bronnen of Prestaties door met de rechtermuisknop op een element of verzoek te klikken en 'Vraag AI' te selecteren.
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 > 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.
Met de gratis chatbox kun je vragen op een hoger niveau stellen, zoals "hoe gebruik ik devtools om toegankelijkheidsproblemen op te lossen?" of "welke netwerkverzoeken zijn traag?", en je kunt ook delen van een bestand kopiëren vanuit bijvoorbeeld het paneel Bronnen en deze in de chat plakken om te vragen wat ze doen.
AI-ondersteuning voor styling
Gebruik het AI-assistentiepaneel voor styling om de algehele lay-out van een website en de specifieke elementstijlen te begrijpen en om door AI gegenereerde oplossingen voor CSS-fouten te ontvangen.
Open AI-ondersteuning vanuit het Elements-paneel
Om AI-ondersteuning te openen vanuit het Elementen -paneel, klikt u met de rechtermuisknop op een DOM-knooppunt wanneer u dit inspecteert en selecteert u de optie 'Vraag AI' .
Wanneer je AI-assistentie op deze manier opent, is het geïnspecteerde DOM-element al vooraf geselecteerd als contextelement voor het gesprek.
U kunt ook op de zwevende knop klikken die is gekoppeld aan een DOM-element waar u de muis overheen beweegt.
Gesprekscontext
Chats met AI-ondersteuning hebben altijd betrekking op het momenteel geïnspecteerde element, dat wil zeggen het laatst geselecteerde element in de DOM-structuur van het paneel 'Elementen'. Een verwijzing naar dit element wordt weergegeven in de linkerbenedenhoek van het paneel.
Wijzig de context met behulp van de elementkiezer naast het huidige element of door een element te selecteren in de DOM-structuur van het paneel Elementen .
Nadat je de context hebt geselecteerd, kun je een schermafbeelding van het venster maken en deze in je chat verzenden. Klik op de knop ' maken ' naast het chatinvoerveld.
Je kunt schermafbeeldingen gebruiken om extra visuele context aan je prompts toe te voegen, bijvoorbeeld om te controleren of alle zichtbare knoppen dezelfde afstand hebben.
Hoewel het momenteel geïnspecteerde element de basis vormt van het gesprek, heeft AI-ondersteuning toegang tot alle web-API's om meer informatie van de geïnspecteerde pagina te verzamelen. Dit omvat het opvragen van andere elementen met document.querySelector of het evalueren van berekende stijlen.
AI-ondersteuning voor netwerken
Gebruik het AI-assistentiepaneel voor netwerken om de verzoeken van uw website te begrijpen.
Open AI-ondersteuning via het netwerkpaneel
Om AI-ondersteuning te openen vanuit het netwerkpaneel , klikt u met de rechtermuisknop op een verzoek en selecteert u de optie 'Vraag AI' .
Wanneer je op deze manier AI-assistentie opent, wordt het geselecteerde netwerkverzoek vooraf geselecteerd als context voor het gesprek.
U kunt ook op de zwevende knop klikken naast het netwerkverzoek waar u met de muis overheen beweegt.
Gesprekscontext
Chats met AI-ondersteuning hebben betrekking op het netwerkverzoek dat momenteel is geselecteerd in de lijst met verzoeken in het netwerkpaneel . Een verwijzing naar dit verzoek wordt weergegeven in de linkerbenedenhoek van het paneel.
Wijzig de context door op een ander verzoek in het netwerkpaneel te klikken.
AI-ondersteuning gebruikt de URL van het verzoek, de headers, de timing en de keten van verzoekinitiatoren om uw vragen te beantwoorden.
Belangrijk: kopteksten die gevoelige informatie kunnen bevatten, worden automatisch verwijderd.
Klik na het starten van een gesprek op de knop Uitbreiden ' in de chip Analyzing network data ' om de ruwe gegevens te bekijken die door de AI-assistent worden gebruikt.
AI-ondersteuning voor prestaties
Gebruik het AI-assistentiepaneel voor prestaties om de prestatieprofielen te begrijpen die in het paneel Prestaties zijn vastgelegd.
Open AI-ondersteuning vanuit het prestatiepaneel
Om AI-ondersteuning vanuit het paneel Prestaties te activeren, moet u eerst een prestatieprofiel vastleggen .
Afhankelijk van wat u wilt onderzoeken, kunt u het paneel **AI-ondersteuning** openen vanuit individuele prestatie-inzichten of voor activiteiten in de prestatietrace-weergave.
Prestatie-inzichten
Open in het tabblad 'Inzichten' een inzicht, bijvoorbeeld **LCP per fase **, en klik vervolgens op de knop 'Vraag AI'.
DevTools opent het AI-assistentiepaneel met dit prestatie-inzicht vooraf geselecteerd als context voor het gesprek.
Prestatietraceweergave
Om AI-ondersteuning vanuit de traceerweergave te openen, klikt u met de rechtermuisknop op een activiteit en selecteert u de optie 'Vraag AI' .
In dit geval is deze activiteit vooraf geselecteerd als context voor het gesprek.
Gesprekscontext
De geselecteerde prestatieactiviteit dient als context voor uw gesprek met de AI-assistent . Een verwijzing naar deze activiteit wordt weergegeven in de linkerbenedenhoek van het paneel.
Prestatie-inzichten
Als u op 'Vraag AI om een specifiek prestatie-inzicht' hebt geklikt, ziet u dit inzicht als geselecteerde context. U kunt onder 'Andere inzichten' op 'Vraag AI' klikken om uw selectie te wijzigen.
Nadat je een gesprek bent begonnen, vouw je het gedeelte ' Analyzing insight: ... uit om de ruwe data te bekijken die door de AI-assistentie wordt gebruikt.
Trace-weergave
U kunt verschillende items in de prestatietrace selecteren en de context zal dienovereenkomstig veranderen.
De AI-assistent gebruikt de timinggegevens uit de geselecteerde gespreksstructuur om uw vraag te beantwoorden.
Klik op de in het onderdeel Analyzing call tree nadat u een gesprek bent begonnen om de ruwe gegevens te bekijken die door de AI-assistent worden gebruikt.
AI-ondersteuning voor bronnen
Gebruik het AI-assistentiepaneel voor bronnen om inzicht te krijgen in de bestanden die door uw website worden geladen en gebruikt.
Open AI-ondersteuning vanuit het Sources-paneel
Om AI-ondersteuning te openen vanuit het paneel Bronnen , klikt u met de rechtermuisknop op een bestand en selecteert u de optie Vraag AI .
Wanneer je AI-assistentie op deze manier opent, is het geselecteerde bestand vooraf geselecteerd als context voor het gesprek.
U kunt ook op de zwevende knop klikken wanneer u de muis over een bestand beweegt.
Gesprekscontext
Het geselecteerde bestand dient als context voor uw gesprek met de AI-assistent . Een verwijzing naar dit bestand wordt linksonder in het paneel weergegeven.
Wijzig de context door op een ander bestand in het paneel Bronnen te klikken.
AI-ondersteuning gebruikt de naam, URL, bronkaart (indien beschikbaar) en inhoud van het geselecteerde bestand om uw vragen te beantwoorden.
Klik na het starten van een gesprek op de in het venster Analyzing file om de ruwe gegevens te bekijken die door de AI-assistent worden gebruikt.
Gespreksverloop
Door een prompt te versturen, start je het gesprek met de stylingagent. Om de benodigde informatie te verkrijgen en je 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 staplabel wordt bijgewerkt naarmate de agent meer specifieke acties uitvoert om uw vraag te beantwoorden.
Zodra de agent tot een definitief antwoord is gekomen, wordt dit antwoord onder de onderzoeksstappen weergegeven, inclusief suggesties voor vervolgvragen.
Klik op een van de voorgestelde prompts om het gesprek voort te zetten. Klik op de pijltoets omlaag op het
een onderzoeksfase om beter te begrijpen wat AI-ondersteuning achter de schermen deed.
Wanneer je een voortgangschip uitvouwt, zie je de code die de agent heeft uitgevoerd, samen met de retourwaarde. Kopieer de uitgevoerde code voor verder gebruik, bijvoorbeeld om deze uit te voeren met het consolepaneel .
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 om verder te gaan of op Annuleren om de uitvoering te stoppen.
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:
Genereer eerst een metadatabestand en koppel een werkmap .
U kunt ook handmatig een map toevoegen .
Start een chatgesprek vanuit het Elements-paneel .
Gebruik AI om je CSS aan te passen.
AI-ondersteuning kan code genereren en de uitvoering pauzeren . Bekijk de code en klik op Doorgaan om de wijzigingen live te testen.
Vouw het gedeelte 'Niet-opgeslagen wijzigingen' uit en klik op 'Toepassen op werkruimte' .
Bekijk de wijzigingen in een
diffen 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 herladen 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 '.
Doorgaan
Om een eerder gesprek voort te zetten, klikt u op de knop en selecteert u het in het contextmenu.
Verwijderen
Om een gesprek uit de geschiedenis te verwijderen, klikt u op de knop ' '.
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 omhoog (duim omhoog) en duim omlaag (duim omlaag) onder het antwoord.
Rapporteer antwoorden
Om ongepaste inhoud te melden, klikt u op de naast de stemknoppen.