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 +2 · LIVE

1:46 min

Debugging WebMCP implementations using the tool inspector extension

Andre Cipriani Bandarra +1 · 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 +2 · LIVE

2:49 min

Introduction to the model context protocol and WebMCP

Andre Cipriani Bandarra +1 · Coffee With Developers

More from World Congress 2026 Europe

Building the Nervous System of AI - Michael Kagan (NVIDIA) thumbnail
29:17
2 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
2 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
2 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
2 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
2 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
2 months ago

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

Axel Ebert, Karin Krobath

Upcoming sessions on this topic

Open session

World Congress 2026 North America

September 25, 2026 · 09:00–09:30

Stage 5

Reinventing Incident Response with AI Agents and MCP

Jayant Tyagi

Lead Member of Technical Staff at Salesforce

Jayant Tyagi
Open session

World Congress 2026 North America

September 25, 2026 · 13:30–14:00

Stage 4

From Model Selection to Smart Routing: How to Use the Right LLM for Every Task

Viktoria Semaan

Principal Technical Evangelist at Databricks

Viktoria Semaan
Open session

World Congress 2026 North America

September 24, 2026 · 11:40–12:10

Tech Leaders Stage

Rethinking Developer Tools for the Agent Era

Han Wang, Sam Bhagwat

Han Wang
Sam Bhagwat
Open session

World Congress 2026 North America

September 25, 2026 · 15:30–16:00

Stage 6

Small LLM in your Browser: Huge Opportunities for Web Applications

Daniel Ostrovsky

UI/UX Architect at Payoneer | AI Architect | Full Cycle Development Expert | Public Speaker | Open Source Contributor |

Daniel Ostrovsky
Open session

World Congress 2026 North America

September 24, 2026 · 11:00–11:30

Stage 6

Accelerating development and managing agents with the GitHub Copilot app

Christopher Harrison

Senior Developer Advocate at GitHub

Christopher Harrison
Open session

World Congress 2026 North America

September 25, 2026 · 10:20–10:50

Stage 3

Making (and Breaking) Agents by Adding 1,000 MCP Tools

Guillaume Lebedel

CTO & Co-Founder of StackOne

Guillaume Lebedel

Related videos

WeAreDevelopers LIVE - Web Performance in an AI World thumbnail
1:07:59
LIVE • about 2 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 • 7 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 • 2 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 • 2 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 • 2 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.