DevTools provides an AI assistance panel that helps you understand your website and fix issues by chatting with an AI agent.
With AI assistance, you can debug styling, networking, performance, and sources of your website.
To chat with Gemini in the AI assistance panel effectively, learn how to open the panel, prompt, and control the conversation flow.
Open the AI assistance panel
The AI assistance panel opens in the drawer.
To open the panel, click the AI assistance button located at the global entry point on the right of the main toolbar at the top.
You can also open the panel directly from the Elements, Network, Sources, or Performance panels by right-clicking an element or request and selecting Ask AI.
From the command menu
To open AI assistance from the command menu, type AI and then run the
Show AI assistance command, which has the Drawer badge next to it.
From the "More tools" menu
Alternatively, in the top right corner, select More options > More tools > AI assistance.
Prompting
When starting a new conversation, AI assistance offers example prompts to help you get started quickly.
Click any of the prompts to prefill the prompt input field at the bottom of the panel.
Alternatively, type your own prompt or question into the input field.
To send a prompt, either press Enter or click the arrow on the right hand side of the input field.
With the free chat box, you can ask higher-level questions like "how to use devtools to debug accessibility?" or "what network requests are slow?", as well as copying parts of a file from, for example, the Sources panel and pasting it into the chat to ask what it does.
AI assistance for styling
Use the AI assistance panel for styling to understand a website's overall layout, specific element styles and to get AI generated fixes for CSS bugs.
Open AI assistance from the Elements panel
To open AI assistance from the Elements panel, when inspecting a DOM node, right-click the node and select the Ask AI option.
When you open AI assistance like this, the inspected DOM element is already pre-selected as a context element for the conversation.
Alternatively, click the floating button attached to a hovered DOM node.
Conversation context
Chats with AI assistance always relate to the currently inspected element, which is the last element selected in the Elements panel DOM tree. A reference to this element is shown in the bottom left corner of the panel.
Change the context using the element picker next to the current element or by selecting from the Elements panel DOM tree.
With the context selected, you can capture a screenshot of the viewport and submit it to your chat. Click the Take screenshot button next to the chat input field.
You can use screenshots to provide additional visual context to your prompts, for example, to check if all visible buttons have the same spacing.
While the currently inspected element is the foundation of the conversation,
AI assistance has access to all web APIs to gather more information from the
inspected page. This includes querying other elements with
document.querySelector or evaluating computed styles.
AI assistance for network
Use the AI assistance panel for network to understand requests sent by your website.
Open AI assistance from the Network panel
To open AI assistance from the Network panel, right-click a request and select the Ask AI option.
When you open AI assistance like this, the selected network request is pre-selected as context for the conversation.
Alternatively, click the floating button next to the network request that you hover over.
Conversation context
Chats with AI assistance relate to the network request currently selected in the Network panel request list. A reference to this request is shown in the bottom left corner of the panel.
Change context by clicking on another request in the Network panel.
AI assistance is using the request URL, headers, timings and the request initiator chain to answer your questions.
Important: headers that could contain sensitive information are automatically redacted.
Click the Expand button
in the Analyzing network data chip after starting a conversation to see the raw
data used by AI assistance.
AI assistance for performance
Use the AI assistance panel for performance to understand performance profiles recorded in the Performance panel.
Open AI assistance from the Performance panel
To open AI assistance from the Performance panel, first record a performance profile.
Depending on what you want to investigate, you can either open the **AI assistance** panel from individual performance insights or for activities in the performance trace view.
Performance insights
In the Insights tab, open an insight, for example, **LCP by phase, then click the Ask AI** button.
DevTools opens the AI assistance panel with this performance insight pre-selected as context for the conversation.
Performance trace view
To open AI assistance from the trace view, right-click an activity and select the Ask AI option.
In this case, this activity is pre-selected as context for the conversation.
Conversation context
The selected performance activity is used as context for your conversation with AI assistance. A reference to this activity is shown in the bottom left corner of the panel.
Performance insights
If you clicked Ask AI for a specific performance insight, you will see this insight as selected context. You can click Ask AI under other insights to change your selection.
After starting a conversation, expand the Analyzing insight: ... section to see the raw data used by AI assistance.
Trace view
You can select different items in the performance trace and the context will change accordingly.
AI assistance is using timings from the selected call tree to answer your prompt.
Click the
button in the Analyzing call tree chip after starting a conversation to see
the raw data used by AI assistance.
AI assistance for sources
Use the AI assistance panel for sources to understand files loaded and used by your website.
Open AI assistance from the Sources panel
To open AI assistance from the Sources panel, right-click a file and select the Ask AI option.
When you open AI assistance like this, the selected file is pre-selected as context for the conversation.
Alternatively, click the floating button when hovering over a file.
Conversation context
The selected file is used as context for your conversation with AI assistance. A reference to this file is shown in the bottom left corner of the panel.
Change context by clicking on another file in the Sources panel.
AI assistance is using the selected file's name, URL, source map (if available) and content to answer your questions.
Click the button
in the Analyzing file chip after starting a conversation to see the raw
data used by AI assistance.
Conversation flow
Sending a prompt starts the conversation with the styling agent. To get the
information required to answer your prompt best, the agent generates and
executes JavaScript that calls web APIs. Agent progress is shown in steps. The
initial step status is Investigating….
The step label updates as the agent executes more specific actions to solve your question.
Once the agent comes to a final answer, the answer is displayed below the investigation steps, including suggestions for follow-up prompts.
Click any of the suggested prompts to continue the conversation. Click the
of an investigation step to get a better understanding of what AI assistance did behind the scenes.
When you expand a progress chip, you see the code the agent has executed, together with its return value. Copy the executed code for further use, like executing it with the Console panel.
Paused conversations
AI assistance might generate code with side effects. When that happens, the conversation is paused before the code is executed.
When the conversation pauses, review the code proposed by the agent. Click Continue to proceed or Cancel to prevent execution.
Save changes to your workspace
With a connected workspace folder, you can save style changes suggested by AI assistance back to CSS source files on your computer.
To do this:
First, generate a metadata file and connect a workspace folder.
Alternatively, you can add a folder manually.
Start a chat from the Elements panel.
Prompt AI assistance to modify your CSS.
AI assistance may generate code and pause execution. Review the code and click Continue to test changes live.
Expand the Unsaved changes section and click Apply to workspace.
Review the changes in a
diffand click Save all.
To learn this workflow, see:
No answer given
AI assistance might not provide answers due to various reasons.
If you think your prompt is something AI assistance should be able to discuss, file a bug.
Conversation history
Once you start a conversation, every next answer is based on your previous interactions between you and the AI.
AI assistance saves your conversation history between sessions, so you can access your previous chats even after DevTools or Chrome reload.
Use the controls in the top-left corner of the panel to control your conversation history.
Start new
To start a new conversation with the currently selected conversation context, click the button.
Continue
To continue a past conversation, click the button and select it from the context menu.
Delete
To delete a conversation from history, click the button.
Rate answers and provide feedback
AI assistance is an experimental feature. Therefore we are actively looking for your feedback to learn how we can improve answer quality and the overall experience.
Vote answers
Rate an answer using the Thumbs up and Thumbs down buttons below the answer.
Report answers
To report inappropriate content, click the button next to the voting buttons.