Google's new web dev tools, explained

An AI coding agent can write a web page in seconds. But until recently it could not look at the page it just built. It could not click a button, read a network error, or measure how slow the page loads. It wrote code blind.

The tools in this guide close that gap. They come from four talks at Google I/O Connect Berlin (25 June 2026), the Chrome stage in particular. The centerpiece — and the tool you will set up yourself in this guide — is Chrome DevTools for agents.

Understand · 1Why these tools exist

Think back to when you learned web development. You opened Chrome DevTools (that is: the panel that opens when you right-click a page and choose Inspect), clicked through the elements, broke things, and watched what happened. That loop — try, observe, fix — is how most developers actually learn. Matthias Rohmer, the Chrome engineer who gave the centerpiece talk, calls it a closed feedback loop.

Coding agents never had that loop. An agent like Claude Code (that is: an AI assistant that reads your files and runs commands in a loop until a task is done) has been writing code for a few years now. But it wrote that code without ever opening the page. It was, in Rohmer's words, a developer "three years into their career who never touched DevTools."

That single gap explains every tool in this guide. Give the agent the feedback loop, and it stops guessing.

Understand · 2The big idea, in one sentence

Everything below is a variation on that sentence. Some tools give the agent eyes on a running page (DevTools for agents). Some give it up-to-date knowledge of how to build well (Modern Web Guidance). One gives it a home to work in (Antigravity). And one moves the intelligence into the browser itself (built-in AI). If you get lost later, come back to this sentence.

Understand · 3The toolkit at a glance

Four tools, four jobs. Here is the whole cast before we go deep on each.

Centerpiece · 4Chrome DevTools for agents

In September 2025, the DevTools you already know grew a new surface. Alongside the panel you get from right-click → Inspect, there is now DevTools for agents: the same debugging power, exposed to your coding agent instead of to you.

The point is the feedback loop from Section 1. Take the APP_ERR_1003 sign-up bug. A plain agent, told "fix APP_ERR_1003 in the sign-up code", searches the files, finds nothing useful, and spirals. With DevTools for agents you change the prompt to point at the running page instead:

Now the agent opens the page in a real Chrome window, fills the form, submits it, reads the failed network request, finds the hidden message: "Password too short" in the response, and fixes the code — then re-runs the flow to confirm its own fix. That is the closed feedback loop, running without you.

Centerpiece · 5How it is built

DevTools for agents is new, but it stands on old, well-tested foundations. Knowing the three layers helps you reason about what it can do — and, later, about its security.

The foundation: Puppeteer and Chrome for Testing

Underneath everything sits Puppeteer (that is: a long-standing Chrome library for driving the browser from code — clicking, typing, navigating) and Chrome for Testing (a clean build of Chrome made for automation). The Chrome team has maintained both for years. DevTools for agents wraps them; Puppeteer does the real work of touching the page.

The package: one npm install, two ways to use it

DevTools for agents ships as a single npm package (that is: a reusable code package installed with Node.js). It runs on any machine with a recent Node.js. Your agent talks to it in one of two ways, both in the same package:

The glue: skills

A skill (that is: a short instruction file that teaches an agent how and when to use a tool) is what makes the agent actually reach for DevTools at the right moment. DevTools for agents ships with six, in two groups:

The full stack, top to bottom: your coding agent → DevTools for agents → skills → MCP server or CLI → Puppeteer → Chrome.

Centerpiece · 6What it can do

Puppeteer's abilities are wrapped into clearly-named tools, in six categories. You rarely call them by hand; the agent picks them. The categories:

Three everyday jobs those categories unlock:

Fix a broken flow

The sign-up example: input automation + navigation + network, combined into one fix-and-verify run.

Validate a bug report across devices

Emulation + debugging. Instead of resizing your browser by hand, you prompt:

The agent resizes to each viewport, screenshots, opens the mobile burger menu, cross-checks, and reports back — no manual clicking.

Scale your expertise into areas you don't know

This is the one to remember. Say you are weak on performance, accessibility or SEO. A vague prompt like "improve performance" makes the agent read random files and burn tokens for little gain. Instead, let DevTools measure the running page:

Now the agent works against real measurements — the actual Largest Contentful Paint (that is: how long the biggest thing on screen takes to appear), the real audit failures — and starts where it matters. The same pattern works for accessibility and SEO audits.

Centerpiece · 7AutoConnect: share your screen with the agent

By default DevTools for agents opens its own fresh, anonymous Chrome window. Useful, but sometimes you are already on the broken page, staring at the error. Why write a prompt to get the agent back to a state you can already see?

AutoConnect fixes that. Think of it as sharing your screen with the agent: it connects to a Chrome instance that is already running and picks up where you left off. You turn it on in two places:

1. In Chrome, go to chrome://inspect, choose Remote debugging in the sidebar, and tick Allow remote debugging for this browser instance.
2. Add --autoConnect to your MCP config (or include it in your CLI prompt).

Do it yourself · 8Set it up locally and use it with Claude

This is the hands-on section. By the end you will have Chrome DevTools for agents running on your machine, connected to Claude Code, and you will watch it inspect a real page in a live browser. Once the prerequisites below are in place, the steps take about 10 minutes.

# run this in your terminal
claude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest

# inside a project folder
claude
# then, at the Claude prompt:
/mcp

# run in your terminal
claude mcp remove chrome-devtools
claude mcp add chrome-devtools --scope user -- npx chrome-devtools-mcp@latest --autoConnect

If it didn't work

Toolkit · 9Modern Web Guidance

DevTools for agents helps the agent debug. Modern Web Guidance helps it build well in the first place. The problem it solves: left alone, agents write outdated code. They reach for JavaScript to solve things that modern CSS and HTML now handle natively, because their training data is full of old answers.

Modern Web Guidance (that is: a skill pack that injects Chrome's current best practices and Baseline compatibility data into your agent) fixes that. It bundles 128 web-platform features into more than 100 expert-verified use cases, and lifts best-practice adherence by 37 percentage points in Chrome's own tests. It is Apache-2.0 licensed and works with Claude Code, Antigravity, Gemini CLI, GitHub Copilot CLI and more.

The talk's demo: a dark/light-mode toggle, built twice.

// state + animation
// all in JavaScript
let mode = 'light';
btn.addEventListener(
  'click', () => { /* … */ });

/* modern platform primitives:
   @starting-style, anchor
   positioning, light-dark() */
/* No JavaScript needed */

Same look, same behaviour. The guided version is dozens of times smaller because the agent used CSS features like @starting-style, anchor positioning and the light-dark() function — instead of hand-rolling it all in JavaScript.

Toolkit · 10Antigravity: the agent-first IDE

Antigravity (that is: Google's new agent-first IDE — an integrated development environment, the app you write code in — launched November 2025 with Gemini 3) is where all of this comes together. It looks like a familiar AI editor, but agents are promoted to a first-class surface with direct access to the editor, terminal and browser. They plan, execute and verify whole tasks on their own.

It runs on Mac, Windows and Linux, free in public preview. You can choose your model: Gemini 3 Pro, Anthropic's Claude Sonnet 4.5, or GPT-OSS. A "Build with Google" screen lets you switch on packaged plugins — including Modern Web Guidance and Chrome DevTools — with one click, so the whole toolkit is present without any config file. Get it at antigravity.google.

Toolkit · 11Built-in AI & the Agentic Web

The last piece moves AI into the browser. Chrome built-in AI runs Gemini models — including the on-device Gemini Nano — right inside Chrome. Pages can call small AI features with no server and no API key. At the Berlin booth, a fashion site ran image search "curated by Gemini Nano" entirely in the browser.

For developers, this arrives as a set of built-in JavaScript APIs, each for one common job:

Alongside them is the Agentic Web idea: making sites work for AI agents as well as humans. Its headline is WebMCP (that is: a way for a website to expose its own actions as tools an agent can call), plus a push on agent readiness and accessibility — because clean, semantic pages are exactly what agents read best.

Go further · 12Scale it: from one-off prompts to custom skills

The prompts so far are handy one-offs. The real gain comes when you bake a workflow into your own custom skills, so the agent does it your way every time. The talk's case study: Pepper, a company in Germany, built 14 specialized skills and changed how fast they ship.

Their github-issue-test skill even plans for failure. It defines three scenarios up front — A: the MCP server is available; B: it is not; C: the agent is running low on token budget. With the fallbacks written down, the agent switches to plan B or C instead of wandering off.

Three rules for writing skills that work

Go further · 13Common misconceptions

"An agent with browser access can read my saved passwords."

No. DevTools for agents works through Puppeteer, which does not expose Chrome's password manager as a capability. And by default it uses a separate, anonymous browser profile with no saved passwords in the first place. The risk people imagine is not the real one.

"So it's completely safe."

Also no — and this is the one that matters. The default is safe. But turn on AutoConnect against your personal profile, and the agent can act as logged-in you. The real rule is not "browsers are dangerous"; it is carefully decide what you give agents access to.

"Modern Web Guidance is just another prompt trick."

No. It is verified best-practice data plus Baseline compatibility, measured to lift adherence by 37 points and to cut a real component from 172 kB to 2.6 kB. That is an engineering outcome, not a vibe.

Go further · 14One example, all the way through

Here is how the pieces work together on a single realistic task — a bug that reproduces only at runtime.

1. You see a bug. Your sign-up form fails with APP_ERR_1003. You are already on the page in Chrome.
2. AutoConnect (Section 7). Claude attaches to the tab you have open — no re-navigating.
3. DevTools for agents (Section 4–6). You prompt: "debug and fix the sign-up error." The agent fills the form, submits, and reads the failed network response.
4. Runtime beats source. The response holds message: "Password too short". Source maps point the agent to the right file.
5. Modern Web Guidance (Section 9). When it writes the fix, the agent reaches for a modern :user-invalid CSS validation state instead of a JavaScript listener.
6. It verifies itself. The agent re-runs the sign-up, sees it pass, and reports back. Loop closed.

No step needed you to read a stack trace, resize a window, or look up a CSS feature. That is the whole point of the toolkit.

ReferenceReference card

Claude Code setup, one line: claude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest

Prompt patterns: point at the runtime, not the file — "go to localhost, run a performance trace, act on all findings"; "check nav is visible on desktop, tablet and mobile".

ReferenceGlossary

Agents & tooling

Coding agent

An AI assistant that reads your files and runs commands in a loop until a task is done. Claude Code, Antigravity, Gemini CLI and Codex are all coding agents.

MCP (Model Context Protocol)

A shared standard that lets an agent call external tools. DevTools for agents ships an MCP server so any MCP-capable agent can use it.

Skill

A short instruction file that teaches an agent how and when to use a tool or workflow. The unit both DevTools for agents and Modern Web Guidance ship as.

Token

The unit an AI model reads and writes in — roughly ¾ of a word. Costs and limits are counted in tokens, so "token-efficient" means cheaper and faster.

Browser & runtime

Chrome DevTools

The debugging panel that opens on right-click → Inspect: elements, console, network, performance. DevTools for agents exposes the same power to an agent.

Puppeteer

A long-standing Chrome library for driving the browser from code — clicking, typing, navigating. The engine underneath DevTools for agents.

Source map

A file that maps the running, built page back to your original source code, so a tool can jump from a runtime symptom to the exact source file.

LCP (Largest Contentful Paint)

How long the biggest visible element takes to appear. A core web-performance measure DevTools can trace.

localhost

The address of a web server running on your own computer, not the public internet. An app you start locally usually appears at a localhost address such as localhost:3000.

Accessibility tree (a11y)

The structured view of a page that assistive tech — and coding agents — read to understand it. Good accessibility helps both.

The new tools

Modern Web Guidance

A skill pack of Chrome's current best practices and Baseline data, so agents write modern CSS/HTML instead of outdated JavaScript.

Baseline

A shared signal for which web features are safely usable across the major browsers. Modern Web Guidance targets it.

Antigravity

Google's agent-first IDE (launched Nov 2025 with Gemini 3), giving agents direct editor, terminal and browser access.

Gemini Nano

A small Gemini model that runs on-device inside Chrome, powering built-in AI with no server call.

WebMCP

An emerging way for a website to expose its own actions as tools an AI agent can call directly.

ReferenceResources