Supercharge your development workflow with Gemini integrated directly into Chrome DevTools. Streamline debugging with AI assistance for styling, performance, network and sources.

Get started Explore prompts

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

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

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

Get AI assistance wherever you are

Look for the Ask AI button to get help from Gemini with your current task.

Demos

Check out our interactive demos to learn how to get started with AI assistance in your projects.
Try AI-powered styling fixes to transform a static plane into a soaring marvel - while making sure safety measures are taken!
Explore demo
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.

Deep dives

Explore videos explaining how to use AI assistance in DevTools to solve common web development problems.
Explore persistent AI chat history in Chrome 133-135
Join Jecelyn, Oliver, and Matthias as they introduce AI assistance in Chrome 130-132

Get started

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
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
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