Explore use cases for AI assistance in Chrome DevTools and learn how it can support your debugging workflow across styling, performance, and more.

Read docs

… for styling

Get a detailed explanation of your element's layout and how to modify it with prompts like this:

How is this element laid out?

Is it a flex item? Is it positioned absolutely? Is it part of a grid? AI assistance can summarize the layout of element trees and provide code examples to demonstrate how to modify it.

Got an animation that isn't working? Ask AI assistance about your animated element:

Why is my animation not working?

AI assistance will check relevant CSS properties, event listeners and more to find out what might be wrong and provide code examples to fix it.

DEMO

No project at hand to put AI assistance for styling to the test? Try it in the DevTools Hangar!

Find the right prompts to fix rectangular wheels, broken position lights and a fuming engine to make the DevTools plane fly again.

Explore demo

… for network

Request and response headers often contain important information not obvious at a glance. Ask AI assistance to explain them: 

Does this request have any notable headers?

Ever had a feeling a certain request just takes too long, but not quite sure why? Ask AI assistance to look into it for you:

Why is this request taking so long?

AI assistance investigates recorded timings and will let you know if anything is off.

… for performance

Finding the root cause for a sluggish website can be difficult. Can't get behind peaks in your performance profiles? AI assistance can boil down call trees for you:

Anything to improve in this call tree?

… for sources

It's rare you wrote all of the code your website uses - can't understand why a certain resource is loaded and what it's used for? AI assistance can help:

What is this file used for?

No matter if it's an analytics script, a social widget or a A/B testing library - AI assistance will dig in and find out.