AI-hulp
Geef je ontwikkelworkflow een boost met Gemini, direct geïntegreerd in Chrome DevTools. Stroomlijn debugging met AI-ondersteuning voor styling, prestaties, netwerk en bronnen.
Stylingbugs oplossen
Stijlproblemen kunnen lastig te debuggen zijn. Krijg een gedetailleerde uitleg over de stijlen van je elementen en hulp bij het oplossen van lay-out- en stijlfouten:
Can you center this element?
Netwerkverzoeken analyseren
Aanvraag- en antwoordheaders bevatten vaak belangrijke informatie die niet meteen duidelijk is. Gebruik AI-ondersteuning om dieper op de materie in te gaan:
Why does this request fail?
Bronbestanden begrijpen
Het komt zelden voor dat je zelf de hele code voor je website hebt geschreven - weet je niet waar een bepaald script voor gebruikt wordt? AI-assistentie kan helpen:
What is this file used for?
Onderzoek de prestaties van de pagina
Slechte kernfuncties voor webvitaliteit? Het vinden van de oorzaak van een trage website kan lastig zijn. AI-ondersteuning kan dit voor u onderzoeken en oplossingen voorstellen:
Help me optimize my LCP score

Krijg overal waar u bent AI-assistentie
Zoek naar de knop Vraag AI om hulp van Gemini bij uw huidige taak.
Demo's
Hangar
Overloop
Weet u niet hoe u moet beginnen?
De beeldverhouding van een afbeelding herstellen
Make all teaser images always be 16:9
Is één van de afbeeldingen niet op dezelfde manier bijgesneden als de anderen?
- Open de chrome.dev/cinemai/devtools/-pagina en open DevTools .
- Zoek en selecteer het gedeelte Meer informatie door te kijken .
- Klik op het AI-assistentiepictogram.
- Vraag:
Make all teaser images always be 16:9
. - Klik
Apply the suggested change
en ga verder. - De knop moet gecentreerd zijn.
Een overloopprobleem oplossen
How can I make this element visible?
Element is niet zichtbaar?
- Open de chrome.dev/cinemai/devtools/-pagina en open DevTools .
- Zoek een duiker- afbeeldingselement.
- Klik op het AI-assistentiepictogram.
- Vraag:
How can I make this element visible without scrollbars?
- Klik
Apply the suggested change
en ga verder. - De duiker moet zichtbaar zijn op het scherm.
Demistify headers
Are there any security headers present?
Wilt u meer weten over de beveiligingsheaders van een bepaalde resource?
- Open de chrome.dev/cinemai/devtools/-pagina en open DevTools .
- Selecteer de
v4-chrome.dev.js
-aanvragen in het paneel Netwerk. - Klik op het AI-assistentiepictogram.
- Vraag:
Are there any security headers present?
- De LLM legt headers uit die betrekking hebben op de beveiliging van de resource.
Diepe duiken
Blijvende AI-chatgeschiedenis in Chrome 133-135
Wat is er nieuw in DevTools 130-132
Aan de slag
Vereisten
Aanmelden
Gegevens
Help ons beter te worden!
Deze functie is experimenteel en kan in de toekomst worden gewijzigd. Het kan onjuiste of aanstootgevende informatie opleveren die niet de mening van Google vertegenwoordigt. Stem op de reacties om ons te helpen de functie te verbeteren en blijf feedback geven!