Chrome DevTools  |  Chrome for Developers
Skip to main content
Docs
Build with Chrome
Learn how Chrome works, participate in origin trials, and build with Chrome everywhere.
Web Platform
Capabilities
ChromeDriver
Extensions
Chrome Web Store
Chromium
Web on Android
Origin trials
Release notes
Productivity
Create the best experience for your users with the web's best tools.
DevTools
Lighthouse
Chrome UX Report
Accessibility
Modern Web Guidance
Get things done quicker and neater, with our ready-made libraries.
Workbox
Puppeteer
Experience
Design a beautiful and performant web with Chrome.
AI
Performance
CSS and UI
Identity
Payments
Privacy and security
Resources
More from Chrome and Google.
All documentation
Baseline
web.dev
PageSpeed Insights audit
Isolated Web Apps (IWA)
Case studies
Blog
New in Chrome
/
English
Deutsch
Español – América Latina
Français
Indonesia
Italiano
Nederlands
Polski
Português – Brasil
Tiếng Việt
Türkçe
Русский
עברית
العربيّة
فارسی
हिंदी
বাংলা
ภาษาไทย
中文 – 简体
中文 – 繁體
日本語
한국어
Sign in
Docs
Chrome DevTools
Discover and explore latest news about and use cases for AI assistance in DevTools
DevTools
Get started
AI assistance
Overview
Get started
Chat with AI assistance
Generate code in Console and Sources
Data usage
Panels
Popular
Elements
Console
Lighthouse
Memory
Network
Performance
Recorder
Rendering
Security
Sources
All
Autofill
Animations
Application
Changes
Coverage
CSS overview
Developer resources
Issues
Layers
Lighthouse
Media
Memory Inspector
Network conditions
Request conditions
Performance monitor
Protocol monitor
Quick source
Sensors
WebAudio
WebAuthn
What's new
Settings
Accessibility
For agents
Docs
More
DevTools
Get started
AI assistance
More
Panels
More
Settings
Accessibility
For agents
Case studies
Blog
New in Chrome
Build with Chrome
Web Platform
Capabilities
ChromeDriver
Extensions
Chrome Web Store
Chromium
Web on Android
Origin trials
Release notes
Productivity
DevTools
Lighthouse
Chrome UX Report
Accessibility
Modern Web Guidance
Workbox
Puppeteer
Experience
AI
Performance
CSS and UI
Identity
Payments
Privacy and security
Resources
All documentation
Baseline
web.dev
PageSpeed Insights audit
Isolated Web Apps (IWA)
Overview
Get started
Chat with AI assistance
Generate code in Console and Sources
Data usage
Popular
Elements
Console
Lighthouse
Memory
Network
Performance
Recorder
Rendering
Security
Sources
All
Autofill
Animations
Application
Changes
Coverage
CSS overview
Developer resources
Issues
Layers
Lighthouse
Media
Memory Inspector
Network conditions
Request conditions
Performance monitor
Protocol monitor
Quick source
Sensors
WebAudio
WebAuthn
What's new
Home
Docs
Chrome DevTools
AI assistance
Stay organized with collections
Save and categorize content based on your preferences.
AI assistance
Supercharge your development workflow with Gemini integrated directly into Chrome DevTools. Streamline debugging with AI assistance for styling, performance, network and sources.
Try it now
Run first prompts
Get the feeling of Gemini in Chrome DevTools by running the example prompts in the interactive tutorial below.
What can AI assistance help you with
Fix styling bugs
Styling issues can be difficult to debug. Get a detailed explanation of your element's styles and get help in fixing layout and styling bugs:
Can you center this element?
Learn more
Analyze network requests
Request and response headers often contain important information not obvious at a glance. Use AI assistance to dig in:
Why does this request fail?
Learn more
Understand source files
It's rare you wrote all the code on your website - not sure what a certain script is used for? AI assistance can help:
What is this file used for?
Learn more
Investigate page performance
Poor core web vitals? Finding the root cause for a sluggish website can be difficult. AI assistance can investigate and propose solutions for you:
Help me optimize my LCP score
Learn more
See AI assistance in action
Check out our interactive demos to learn how to get started with AI assistance in your projects.
Hangar
Try AI-powered styling fixes to transform a static plane into a soaring marvel - while making sure safety measures are taken!
Explore demo
Overflow
Will you conquer the scrollbar of doom with AI assistance, or will a diving team forever be trapped in a layout nightmare?
Explore demo
Not sure how to start?
Explore prompt ideas for the AI assistance in DevTools. Experiment with our demos or try on your own websites.
Fix aspect-ratio of an image
Make all teaser images always be 16:9
One of the images is not cropped the same way as the others?
Open chrome.dev/cinemai/devtools/ page and open DevTools.
Find and select the Learn more by watching section.
Click AI assistance icon.
Prompt: Make all teaser images always be 16:9.
Click Apply the suggested change and continue.
The button should be centered.
Fix an overflow issue
How can I make this element visible?
Element is not visible?
Open chrome.dev/cinemai/devtools/ page and open DevTools.
Find a scuba diver img element.
Click AI assistance icon.
Prompt: How can I make this element visible without scrollbars?.
Click Apply the suggested change and continue.
The diver should be visible on the screen.
Demistify headers
Are there any security headers present?
To learn more about security headers of a given resource...
Open chrome.dev/cinemai/devtools/ page and open DevTools.
In Network panel, select thev4-chrome.dev.js requests.
Click AI assistance icon.
Prompt: Are there any security headers present?
The LLM will explain headers related to security on the resource.
Create bug reports
Write a detailed bug report for this network error, include title, summary, steps to reproduce and expected vs. actual results.
Something went wrong? Quickly create a detailed bug report.
Open open DevTools for a web page with a network error.
In the Network panel, select the failing request.
Click AI assistance icon.
Prompt: Write a detailed bug report for this network error, include title, summary, steps to reproduce and expected vs. actual results.
The LLM will generate a bug report that you can directly copy into your issue tracker.
Deep dives
Explore videos explaining how to use AI assistance in DevTools to solve common web development problems.
Al-assisted debugging - DevToolTips
Explore the power of Al-assisted debugging with Chrome DevTools!
What's new in DevTools 130-132
Explore the Network Panel features, Baseline & CSS updates and AI innovations in Chrome 139-141 with Matthias!
Get started
Requirements
Make sure you're using the latest Chrome and are signed in. You need to be at least 18 years old and in one of the supported locations.
Check out the requirements
Opt-in
AI assistance is disabled by default. To enable, go the Settings  AI assistance section. You need to agree to Google Terms of Service to be able to use AI assistance.
Enable AI innovations
Data
An Enterprise policy can be used to control whether or not the data shared with Gemini is logged and used for training
Learn how your data is used
Help us get better!
This feature is experimental and subject to future changes. It may generate inaccurate or offensive information that doesn't represent Google's views. Vote on the responses to help us improve it and keep the feedback coming!
Share feedback
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],[],[],[]]
Contribute
File a bug
See open issues
Related content
Chromium updates
Case studies
Archive
Podcasts & shows
Follow
@ChromiumDev on X
YouTube
Chrome for Developers on LinkedIn
RSS
Terms
Privacy
Manage cookies
English
Deutsch
Español – América Latina
Français
Indonesia
Italiano
Nederlands
Polski
Português – Brasil
Tiếng Việt
Türkçe
Русский
עברית
العربيّة
فارسی
हिंदी
বাংলা
ภาษาไทย
中文 – 简体
中文 – 繁體
日本語
한국어