WeAreDevelopers Logo WeAreDevelopers
Sign in
For You LIVE
World Congress 2026 Europe • Jul 10, 2026 • Session details

Prompt, Render, Debug: AI-Powered React Development with Chrome DevTools

Suchitra Swain

Is manual debugging slowing down your AI-assisted React workflow? Learn how DevTools MCP gives AI agents live browser access to instantly test, trace, and troubleshoot the active DOM.

Pause
Mute Enter Fullscreen
#1 about 2 min

The debugging gap in AI-generated code

Generating front-end code with AI is fast, but debugging it efficiently remains a major bottleneck.

#2 about 3 min

Introduction to DevTools MCP and features

DevTools MCP is an open-source tool that allows AI agents to directly access and inspect runtime browsers.

#3 about 2 min

Connecting DevTools MCP to Chrome for remote debugging

Enable remote debugging in Chrome and configure a JSON file to grant local browser access to an agent.

#4 about 1 min

Configuring live browser and WebSocket connection endpoints

Use autoconnect configurations to instantly attach AI agents to live pages and WebSocket endpoints.

#5 about 2 min

Automating web form inputs and validation with AI agents

Prompt an AI agent to fill and validate registration forms in real-time without relying on mock data.

#6 about 4 min

Testing localization using geolocation and sensor emulators

Configure browser sensor emulators to test localization features like currencies without altering operating system preferences.

#7 about 2 min

Running responsive audits across device viewports

Command an agent to automatically check UI component layouts and navigational states across mobile and desktop breakpoints.

#8 about 3 min

Generating real-time website performance traces with AI

Analyze runtime metrics by instructing an AI agent to run and summarize a performance trace from within the IDE.

#9 about 2 min

Running Lighthouse audits for SEO and accessibility

Execute complete Lighthouse audits through conversational commands to generate actionable suggestions for accessibility and visibility.

#10 about 4 min

Debugging runtime errors with beta Web MCP

Enable the experimental Web MCP standard in Chrome to analyze API failures and console errors interactively.

#11 about 4 min

Audience Q&A on browser support and token consumption

The audience questions cover Chromium plugin compatibility, token consumption levels, and using MCP as a Playwright replacement.

Matching moments

3:31 min

Recreating React components using AI and dev tools

Chris Heilmann Chris Heilmann +2 · LIVE

1:46 min

Debugging WebMCP implementations using the tool inspector extension

Andre Cipriani Bandarra +1 · Coffee With Developers

2:21 min

Core concepts and mechanics behind Web MCP

Alex Nahas · Coffee With Developers

4:20 min

Automating tasks securely through agentic browser protocols

Christian Liebel Christian Liebel · World Congress 2026 Europe

3:46 min

Integrating AI into web performance engineering workflows

Perf + AI

57 sec

Mastering advanced browser developer tools for deeper JavaScript debugging

Chris Heilmann Chris Heilmann +2 · LIVE

More from World Congress 2026 Europe

Building the Nervous System of AI - Michael Kagan (NVIDIA) thumbnail
29:17
3 months ago

Building the Nervous System of AI - Michael Kagan (NVIDIA)

Michael Kagan, Sead Ahmetović

Five Things in Tech that Matter Now - WeAreDevelopers World Congress 2026 Closing Keynote thumbnail
19:41
3 months ago

Five Things in Tech that Matter Now - WeAreDevelopers World Congress 2026 Closing Keynote

Christian Heilmann

The Sound of Your Secrets: Teaching Your Model to Spy, So You Can Learn to Defend thumbnail
32:06
3 months ago

The Sound of Your Secrets: Teaching Your Model to Spy, So You Can Learn to Defend

David vonThenen

Super scaling for the Super Bowl: How to survive 30 million users hitting your backend in 30 minutes thumbnail
35:13
3 months ago

Super scaling for the Super Bowl: How to survive 30 million users hitting your backend in 30 minutes

Irina Branovic

Running Secure Life Science Research at Scale using Hybrid GPU HPC and Kubernetes 🧬 thumbnail
24:23
3 months ago

Running Secure Life Science Research at Scale using Hybrid GPU HPC and Kubernetes 🧬

Jeremy Murray

Angstfreude - AI and Corporate Culture - The Thrill and the Threat thumbnail
30:26
3 months ago

Angstfreude - AI and Corporate Culture - The Thrill and the Threat

Axel Ebert, Karin Krobath

Related videos

WeAreDevelopers LIVE - Web Performance in an AI World thumbnail
1:07:59
LIVE • 3 months ago

WeAreDevelopers LIVE - Web Performance in an AI World

Chris Heilmann, Daniel Cranney

WebMCP - Making Agents a First-Class Citizen of the Web - Andre Cipriani Bandarra & François Beaufort thumbnail
30:42
Coffee With Developers • 8 months ago

WebMCP - Making Agents a First-Class Citizen of the Web - Andre Cipriani Bandarra & François Beaufort

Andre Cipriani Bandarra, François Beaufort

AI in Your Browser: Exploring Chrome's Built-In LLM thumbnail
29:59
World Congress 2026 Europe • 3 months ago

AI in Your Browser: Exploring Chrome's Built-In LLM

Daniel Ostrovsky

API, MCP or MCP App? Choosing the right surface for AI agents thumbnail
29:59
World Congress 2026 Europe • 3 months ago

API, MCP or MCP App? Choosing the right surface for AI agents

Rishabh Budhiraja, Rishi Deorukhkar

From Zero to MCP UI Hero: Building Context-Aware AI Apps That Actually Work thumbnail
20:59
Europe 2026 Virtual • 3 months ago

From Zero to MCP UI Hero: Building Context-Aware AI Apps That Actually Work

Vishal Dodiya

MCP Mashups: How AI Agents are Reviving the Programmable Web thumbnail
23:17
World Congress 2025 • about 1 year ago

MCP Mashups: How AI Agents are Reviving the Programmable Web

Angie Jones

Related articles

From learning to earning

Jobs that call for the skills explored in this talk.