Chrome for Developers

Design WebMCP tools that guide real-world agentic workflows reliably. @bandarra.me shares how a structured design framework and roleplaying interactions before writing production code leads to tools that help keep agents on track.

Tell agents exactly how to use your site, so they act faster and more reliably💡 Kasper Kulikowski shows you how! With WebMCP, your site explicitly registers available actions like search, form fills, or bookings directly to an agent → goo.gle/webmcp-docs

Filtering thousands of items shouldn't freeze your UI ⏱️ When tasked with complex features, basic coding agents tend to miss performance opportunities. With Modern Web Guidance, agents find best practice guides on how to break up long tasks and yield control back to the browser → goo.gle/mwg

No, WebMCP isn't replacing MCP. MCP connects agents to your services. WebMCP connects agents to your website while it's open and the user's in the loop. Here's how they fit together ⤵️

Ever hovered over a button, switched to DevTools, and watched its :hover styles vanish? 🎨 Turn on inactive styles in Settings, and the Elements panel will keep showing rules that no longer apply, clearly marked with an inactive indicator → goo.gle/4i2xbRL

Clicking a link in a single-page app doesn't trigger a full page load. That's why it's tricky to measure. Chrome DevTools now analyzes these soft navigations in Performance Insights, alongside Live Metrics and trace views → goo.gle/4i2xbRL

Now you can render live, accessible HTML buttons inside a 3D scene without losing screen reader support 🤯 The HTML-in-Canvas API makes it possible! Natalia breaks down how to use the API to keep performance high and accessibility intact → goo.gle/4dV0Km1

If ads are slowing down your site, DevTools can now identify the scripts responsible → goo.gle/4i2xbRL In Chrome DevTools, open Application > Ads to check experimental CrUX ad metrics (including CPU and Network usage), browse a table of ad scripts, and highlight every ad on the page.

Important updates for the Email Verification origin trial, including a new dedicated docs section → goo.gle/4s5Y2Qb

That failing API call in the Network panel? Rewrite it in the Console in two clicks → goo.gle/4i2xbRL Right-click any request and select "Edit and resend as fetch". DevTools opens the Console with the fetch() call ready to edit, parameter comments included, and a reference link.

🧪 We've expanded Core Web Vitals to include support for soft navigation (SPA)! Since SPAs are handled differently in implementation, they have required bespoke custom measurement, making it hard to compare directly across sites. Measuring performance is a little art, a little science. 1/2

Chrome 155 adds support for JPEG XL (.jxl) → goo.gle/4yYpSjW Expect 30-50% smaller file sizes than traditional JPEGs, native HDR, progressive rendering, and lossless JPEG transcoding. Under the hood, Chrome uses jxl-rs, a pure Rust decoder built for maximum memory safety and performance.

The `unload` event no longer fires in Chrome by default! Since the advent of the mobile web this has become increasingly unreliable and we think that's a footgun for devs who might think it works. We've spent the last 3 years carefully removing it from Chrome. developer.chrome.com/blog/unload-...

I'm super excited to announce that today we've added experimental versions of Core Web Vitals metrics including soft navigations to the Chrome User Experience Report! You can see them in BigQuery, the APIs, and CrUX Vis. Check it out! web.dev/blog/crux-ex...

Install two key updates to modernize extension builds with Antigravity: 1️⃣ Modern Web Guidance to share best practices directly with your coding agent 2️⃣ Chrome DevTools for agents, which allows your agent to install and test extensions in a real Chrome browser

If you're testing the 📧 Email Verification origin trial in Chrome then you need to renew your origin trial token. We've extended the origin trial to Chrome 160, so head over to the Origin Trial site and click that Renew button! https://developer.chrome.com/origintrials/#/trials/my

WebGPU in Chrome 153 and 154 brought major WGSL language upgrades → goo.gle/4hGkYAU You can now write directly to vector swizzles like position.xy = vec2f(10.0, 20.0) with the new swizzle_assignment extension.

The Split View API is here! Arriving in Chrome 155 and developed in close collaboration with Mozilla and browser vendors in the WebExtensions Community Group, this API integrates directly into the browser.tabs namespace without requiring any extra manifest permissions → goo.gle/47fdSOW

🆕 The 202609 Chrome User Experience (CrUX) release is now live on BigQuery, and we also have an exciting addition to CrUX this month! Check out the announcement post for the full info: groups.google.com/a/chromium.o... Highlights below 👇 🧵 1/10

📐 Embed third-party content without extraneous scrollbars → goo.gle/4jT0nvM Chrome now offers support for frame-sizing, letting cross-site iframes grow as internal content expands. Try it out as a progressive enhancement.

Side-by-side test for building dialogs: standard agent vs. agent with Modern Web Guidance 🏁 Both generate similar UIs, but the guided version skips four separate event listeners in favor of `commandfor` and `command` attributes, with less code overall → goo.gle/mwg

Say goodbye to "Replay XHR" in DevTools and hello to "Resend" → goo.gle/4hPB1MQ Instantly refire web requests while preserving all headers, cookies, and payloads. Or choose "Edit and Resend as Fetch" if you want to modify them.

Some CSS features are notoriously hard to detect when they update underlying behaviors. But now you can with `@supports named-feature()` → goo.gle/4AFfqiR This new function gives you a clean way to check for specific capabilities without complex JavaScript hacks.

Two Modern Web Guidance releases in one week?! v0.0.193 is out, teaching coding agents how to: • restrict outbound network connections (Connection-Allowlist) • validate origins without string parsing (Origin API) • verify email address ownership without OTPs • build draggable floating elements

PayPal recently tested the WebMCP proposed standard to streamline agentic commerce. By replacing more than 30 complex interface-interaction steps with 3 structured tool calls, they delivered a significantly faster and more consistent E2E checkout experience for AI assistants → goo.gle/4yXHc8E

Modern Web Guidance v0.0.192 is out. With it your coding agent now knows how to: • build SMS one-time-code forms that autofill (WebOTP) • make dark mode toggles that follow the OS • honor the OS text size setting • reduce INP and lazy-load video/audio • feature-detect CSS at-rules with @supports

After 7.5 months of tweaking, reviewing, and rewriting, the docs for Scroll-Triggered Animations have landed on @developer.mozilla.org (MDN)! → developer.mozilla.org/en-US/docs/W... Congrats and thanks to Chris Mills and @estelle.bsky.social for their hard work and sweating the details on this!

Ensure your coding agent creates more accessible, progressively enhanced web forms, with Modern Web Guidance→ goo.gle/mwg Discover how Modern Web Guidance skills help agents handle: ⌨️ Adding the Enter key hint attribute 🏷️ Correct autocomplete values 🎨 Autofill styling as a progressive enhancement

Well well, what do we have here? Try it Chrome Canary. #CSS #AnchorPositioning #DevTools

Stop adding !important to solve CSS specificity issues → goo.gle/4729nY4 Starting in Chrome 151, DevTools breaks down the exact specificity calculation right inside the Styles tab.

Speed up your web debugging workflow with the latest DevTools features → goo.gle/4hApcKj 🧠 Debug memory issues with new tools in DevTools for agents 🧭 Track soft navigations in the Performance panel 🔄 Replay network requests instantly with new context menu options

Loved scroll-driven animations? Meet their scroll-triggered sibling. Instead of tying animation progress directly to the scrollbar, you can trigger full time-based CSS animations when crossing a scroll offset. See how to build them with pure CSS → goo.gle/4dhcvmh

Build JS-free interactive carousels with new CSS APIs → goo.gle/47reBwt Learn how to use scroll buttons, scroll markers, :target-current, and scroll-target-group to create built-in, responsive scrollers without writing a single line of JavaScript.

Teach your coding agent to write scroll-driven animations with Modern Web Guidance → goo.gle/mwg See how Modern Web Guidance helps your coding agent build resilient scroll animations that won't break on different screen sizes.

v0.0.191 of Modern Web Guidance is out and it's a big one! *16* new guides covering: web components by @castastrophe.bsky.social Cross-Origin Storage by @tomayac.com security by @rowan.fyi UI and PWA by @jamessw.com and @sturobson.com Wasm by @sbc100.bsky.social github.com/GoogleChrome...

Connection Allowlists announcement blog post has been published. developer.chrome.com/blog/connect...

See how Modern Web Guidance helps your coding agent write a swipe-to-remove feature. Compare side-by-side with an unassisted agent. Modern Web Guidance provides best practices, smooth web animation patterns, and cross-browser fallbacks directly to your coding agent → goo.gle/mwg

Build interactive components like sticky headers and overflow indicators with state-based container queries → goo.gle/4d53htk In this episode, learn how to use scroll state queries for stuck, snapped, and scrollable UI elements to create dynamic web experiences without relying on extra JavaScript.

See what new web platform features arrived in August → goo.gle/4iIdCis Highlights reaching Baseline: - Precision text-box alignment controls - Dynamic sibling-count() and sibling-index() functions - Global autocorrect HTML attribute support

Building dynamic touch gestures like swipe-to-remove often causes coding agents to generate overly complex JavaScript, leading to janky animations. Modern Web Guidance solves this by providing your agent with structured, up-to-date implementation guides → goo.gle/mwg

We launched our new two-week release cycle → goo.gle/4hsULH0 Here's what this means for web devs: * Smaller, more manageable release scopes * Modern Web Platform capabilities land sooner * Speedier delivery for critical security patches

Is browser scroll-locking helping your site users, or just frustrating their diagonal gestures? 📐 @bram.us breaks down how `scroll-axis-lock: none` gives you control over 2D panning behavior. Check out the interactive demos → goo.gle/46SrOOC