How to use the DevTools MCP server for AI debugging #DevToolsTips // TRAIN BRAIN

How to use the DevTools MCP server for AI debugging #DevToolsTips

Chrome DevTools now has a Model Context Protocol (MCP) server that lets AI agents interact directly with your browser. Learn how to connect tools like Gemini and VS Code to Chrome for real-time debugging. Matthias covers how to set up the server and use it to fix performance issues and bugs.
Chapters:
0:00 - Intro
0:46 What is MCP?
2:04 - Example: INP
3:10 - Example: Multi-step interactions
4:19 - Available tools
Resources:
https://chrome.dev/devtools-time
Watch more DevTools Tips → https://goo.gle/DevToolsTips
Subscribe to Chrome for Developers → https://goo.gle/ChromeDevs
#ChromeForDevelopers #Chrome
Speaker: Matthias Rohmer
Products Mentioned: Chrome, Chrome DevTools,

Chrome for Developers

Making the web more awesome....

How to use the DevTools MCP server for AI debugging #DevToolsTips

Extension Update Testing Tool in action

How to know if permissions are safe to request in your Chrome Extension

AI experimentation in Chrome Extensions

Scala.js to Wasm—Exploring the Wasm backend for Scala.js with Sébastien Doeraene

Everything that happened with Chrome Extensions in 2025

Customizable select #CSSWrapped 2025

Request conditions

Create Carousels with a few lines of CSS

DOM State-Preserving Move #CSSWrapped 2025

What’s new in DevTools 142 - 144

Custom functions #CSSWrapped 2025

Acting rapidly on your feedback

Invoker Commands #CSSWrapped 2025

Choosing an AI model for your project

Create Scroll-Triggered Animations with CSS

Can you make a cross-browser Chrome Extension?

Keep API keys safe in the server

How can you keep API keys safe in a Chrome Extension?

Re-imagine the web with Scoped View Transitions

Why ratings are important in the Chrome Web Store

Built-in AI in the wild: A Mastodon translation success story

Web AI on the IDE

Offline vector search with SQLite and EmbeddingGemma

Mind-controlled drones with Web AI & TensorFlow

Accelerating human-centered AI + XR innovation with XR Blocks

It doesn’t need to be a chatbot: Unlocking the product value of smaller AI models

Running Google's Gemma LLMs in the browser with MediaPipe Web

Let’s fix airplanes with CSS #DevToolsTips

Kotlin/Wasm with Zalim Bashorov - WasmAssembly Podcast

Answering your questions about Chrome Web Store discoverability

Where are passkeys stored?

Built-in AI: The next frontier for web experiences presented by Miravia

Real-time video upscaling using CNNs and WebGPU

Bangle.js - an Open Source Smartwatch

InferenceJS: Real-time computer vision in your browser

LiteRT.js, Google’s high performance WebAI runtime

Transformers.js: Building Next-Generation WebAI Applications

Web AI leaps forward on Intel AI PCs

What if you lose the device with a passkey?

Hangar CSS debugging #DevToolsTips

How biometrics relate to passkeys

Are passkeys based on biometrics?

Wasm, WebGPU, & WebNN: How compute abstraction are enabling client side AI

Don't let AI agents push your buttons - use webMCP instead!

Building a VR Assistant and llms.txt widget

Accelerating Web AI on Arm

Beyond the demo: Building the WebAI Playbook

Chrome: Browsing, building, and web in the AI era

Web AI Summit 2025: State of client side AI

Re-imagine the web with Popover

Speed up your site #DevToolsTips

Performance optimization Pitstop #DevToolsTips

WebAssembly from the Ground Up with Patrick Dubroy and Mariano Guerra

Slow server problems? Try this #DevToolsAI

Baseline is now in DevTools

Debug FCP #DevToolsAI

Debug TFFB #DevToolsAI

What is CrUX #DevToolsAI

Discover Web AI: Client side Agents, Gen AI, and machine learning in the browser

Debug INP #DevToolsAI

Debug CLS #DevToolsAI

What’s new in DevTools 139-141

Debug LCP #DevToolsAI

CG, WG, W3C, Lively—Wasm standardization with Thomas Lively - WasmAssembly

Meet the team behind Chrome for Developers

Introducing Built-in Language APIs

Built-in AI APIs overview

Benefits of client-side AI

Baseline: The simple way to check browser compatibility

What does cookie blocking mean for your site?

What are third-party cookies?

Pixel Pirate: Interactive DevTools demo

What are cookies?

Pixel Pirate #DevToolTips

Dart, Flutter, and WasmGC with Ömer Ağacan and Martin Kustermann

Go behind the scenes of your website’s CSS

Develop identity solutions without third-party cookies

Privacy pro in prep mode: Catch Natalia at #GoogleIO

How to format console logs with CSS and ANSI #DevToolsTips