AI in Chrome DevTools: Apply CSS Changes Directly to Your Local Source Code with AI Assistance

Chrome DevTools introduced AI Assistance in October 2024. Initially, AI assistance could only modify page content, but it couldn't apply those changes directly to your local source code. At Google I/O 2025, a new feature was introduced, allowing you to apply changes from AI assistance directly to your local source code. This means any modifications made with AI assistance will now be persistent. To enable this, you need to connect your source code to Chrome DevTools via Workspace. Automatic Workspace Folders Manually connecting source code can be inconvenient, especially when working on multiple projects. Fortunately, you can now automatically connect your source code to Chrome DevTools using Automatic Workspace Folders. For Automatic Workspace Folders to work, you need to create a com.chrome.devtools.json file inside a .well-known/appspecific folder. The com.chrome.devtools.json file should look like this: { "workspace": { "root": "/Users/foo/bar", "uuid": "53b029bb-c989-4dca-969b-835fecec3717" } } workspace.root is the absolute path to your project folder (where your source code is located). workspace.uuid is a valid UUID, ideally a randomly generated v4 UUID, which you should generate when setting up your project folder. You can generate a UUID using any online UUID generator tool, by running the command npx --package uuid uuid v4 in your terminal, or by calling crypto.randomUUID() in JavaScript. Alternatively, you can generate the com.chrome.devtools.json file using the following script: mkdir -p .well-known/appspecific echo "{\"workspace\":{\"root\":\"${PWD}\",\"uuid\":\"`npx --package uuid uuid v4`\"}}" > .well-known/appspecific/com.chrome.devtools.json If you are using Vite, you can install Vite Plugin for DevTools Project Settings (npm install -D vite-plugin-devtools-json). Add this plugin to your Vite configuration, and it will automatically create the .well-known/appspecific folder in your Vite cache with a randomly generated UUID. import {defineConfig} from 'vite'; import devtoolsJson from 'vite-plugin-devtools-json'; export default defineConfig({ plugins: [ devtoolsJson(), // ... ] }); AI Assistance in Action Once your source code is connected to Chrome DevTools (either manually or automatically), and you've confirmed AI assistance is enabled in Chrome DevTools, you can begin using AI assistance for persistent CSS fixes. Here's how to use it: Open Chrome DevTools. In the Elements panel, right-click the element you want to modify, and select "AI Assistance." Enter a prompt to make styling changes to your element (e.g., "Change font color to red" or "Set the image aspect ratio to letterbox"). Follow the conversation to apply the changes temporarily. Click "Apply to workspace" to make the changes persistent in your local source code. Conclusion Getting AI to help with CSS changes right in Chrome DevTools is a good step forward for web developers. While AI can't do everything yet, but this small feature stops you from manually copying and pasting CSS from AI Assistance. This makes your work smoother and helps you get things done a bit faster. It's a handy tool to have.

May 21, 2025 - 20:00

AI in Chrome DevTools: Apply CSS Changes Directly to Your Local Source Code with AI Assistance

Chrome DevTools introduced AI Assistance in October 2024. Initially, AI assistance could only modify page content, but it couldn't apply those changes directly to your local source code.

At Google I/O 2025, a new feature was introduced, allowing you to apply changes from AI assistance directly to your local source code. This means any modifications made with AI assistance will now be persistent.

To enable this, you need to connect your source code to Chrome DevTools via Workspace.

Automatic Workspace Folders

Manually connecting source code can be inconvenient, especially when working on multiple projects. Fortunately, you can now automatically connect your source code to Chrome DevTools using Automatic Workspace Folders.

For Automatic Workspace Folders to work, you need to create a com.chrome.devtools.json file inside a .well-known/appspecific folder. The com.chrome.devtools.json file should look like this:

{
  "workspace": {
    "root": "/Users/foo/bar",
    "uuid": "53b029bb-c989-4dca-969b-835fecec3717"
  }
}

workspace.root is the absolute path to your project folder (where your source code is located).
workspace.uuid is a valid UUID, ideally a randomly generated v4 UUID, which you should generate when setting up your project folder.

You can generate a UUID using any online UUID generator tool, by running the command npx --package uuid uuid v4 in your terminal, or by calling crypto.randomUUID() in JavaScript.

Alternatively, you can generate the com.chrome.devtools.json file using the following script:

mkdir -p .well-known/appspecific
echo "{\"workspace\":{\"root\":\"${PWD}\",\"uuid\":\"`npx --package uuid uuid v4`\"}}" > .well-known/appspecific/com.chrome.devtools.json

If you are using Vite, you can install Vite Plugin for DevTools Project Settings (npm install -D vite-plugin-devtools-json). Add this plugin to your Vite configuration, and it will automatically create the .well-known/appspecific folder in your Vite cache with a randomly generated UUID.

import {defineConfig} from 'vite';
import devtoolsJson from 'vite-plugin-devtools-json';

export default defineConfig({
  plugins: [
    devtoolsJson(),
    // ...
  ]
});

AI Assistance in Action

Once your source code is connected to Chrome DevTools (either manually or automatically), and you've confirmed AI assistance is enabled in Chrome DevTools, you can begin using AI assistance for persistent CSS fixes.

Here's how to use it:

Open Chrome DevTools.
In the Elements panel, right-click the element you want to modify, and select "AI Assistance."
Enter a prompt to make styling changes to your element (e.g., "Change font color to red" or "Set the image aspect ratio to letterbox").
Follow the conversation to apply the changes temporarily.
Click "Apply to workspace" to make the changes persistent in your local source code.

Conclusion

Getting AI to help with CSS changes right in Chrome DevTools is a good step forward for web developers. While AI can't do everything yet, but this small feature stops you from manually copying and pasting CSS from AI Assistance. This makes your work smoother and helps you get things done a bit faster. It's a handy tool to have.