AI i Chrome DevTools
Som udvikler bruger du sandsynligvis Chrome DevTools dagligt til debugging, performance-analyse og frontend-udvikling. Google har nu integreret AI-funktioner direkte i DevTools, som kan hjælpe med at accelerere din workflow og give dybere indsigt i komplekse problemer.
Disse nye AI-funktioner bygger på Googles Gemini-model og kan assistere med alt fra fejlanalyse til kodeoptimerering – direkte i det miljø, du allerede kender.
Sådan aktiverer du AI-innovationer
Før du kan bruge AI-funktionerne, skal de aktiveres i DevTools-indstillingerne:
- Åbn DevTools (højreklik på en side → "Inspicér").
- Klik på tandhjulsikonet (indstillinger) i øverste højre hjørne.
- Vælg AI Innovations i menuen til venstre.
- Slå de ønskede funktioner til.
Hvis du bruger en arbejds-pc, kan en administrator også være nødt til at slå funktionen til.
Console insights
Når du åbner konsollen i DevTools, kan den vise fejl og advarsler fra en hjemmeside. Med AI kan du nu holde musen over en fejl og klikke på "Understand This". Så får du en forklaring fra Googles Gemini-model, ofte suppleret med kodeeksempler og forslag til løsninger.
Du kan se præcis, hvilke data der er sendt til AI'en, og hvis svaret ikke hjælper, kan du vælge at søge på Google i stedet.
AI assistance
Der er også indbygget en ny chat med AI direkte i DevTools. Du kan stille spørgsmål om styling, performance, netværk og kildekode – uden at forlade værktøjet.
- Styling: Højreklik på et element i "Elements"-panelet og vælg Ask AI. Du får forslag til ændringer (fx farver eller layout), som du kan prøve af direkte og gemme tilbage i din egen kode.
- Performance: Når du har optaget en performance-profil, kan du klikke Ask AI på en aktivitet og få hjælp til at forstå, hvorfor en side er langsom, og hvad du kan gøre.
- Netværk: I "Network"-panelet kan du højreklikke på en anmodning og vælge Ask AI for at få indblik i, hvad den gør, og om der er problemer.
- Kilder: Selv kildekodefiler i "Sources"-panelet kan AI hjælpe med at forklare og analysere.
Alt dette sker i et separat panel, hvor du kan stille dine egne spørgsmål eller bruge de foreslåede prompts.
Auto labeling
Til performance-analyser kan AI også hjælpe med at sætte labels automatisk på komplekse traces. I stedet for selv at gætte, kan du lade Gemini foreslå beskrivelser, så du hurtigere forstår, hvad der foregår i din optagelse.
Konklusion
AI i Chrome DevTools gør debugging mere effektivt og giver hurtigere indsigt i komplekse problemer. Det hjælper med at oversætte tekniske fejl til forståelige forklaringer og giver konkrete forslag til løsninger. For erfarne udviklere kan det spare tid, mens det for mindre erfarne udviklere gør avancerede debugging-teknikker mere tilgængelige.