Loading video...

Video Failed to Load

There was a problem loading this video. This could be due to a temporary network issue or the video might be unavailable.

Don't let a broken form frustrate users 😠 Here's how to use Chrome DevTools MCP to let your coding agent solve the problem → ➡️Let it use your local dev server ✍️Auto test w/ dummy data 🖥️cRead the console output & network log to find the server error

Chrome for Developers

418,355 subscribers

17,813 views • 8 months ago •via X (Twitter)

Education Science & Technology

Anya Rossi• Live Now

Private livecam show

0 Comments

No comments available

Comments from the original post will appear here

Related Videos

How to add Chrome DevTools MCP to Claude Code (Bookmark this post to follow the setup later) This lets Claude debug your web apps in a real browser... performance traces, network inspection, console errors. Requirements: - Node.js 22+ - Chrome browser In the video below I show you: - How to install the MCP server - How to verify the DevTools tools are available - How to use it with a real performance trace

How to add Chrome DevTools MCP to Claude Code (Bookmark this post to follow the setup later) This lets Claude debug your web apps in a real browser... performance traces, network inspection, console errors. Requirements: - Node.js 22+ - Chrome browser In the video below I show you: - How to install the MCP server - How to verify the DevTools tools are available - How to use it with a real performance trace

Daniel San

52,294 views • 8 months ago

Connect your agents directly to Chrome DevTools. 🛠️ The new Chrome DevTools MCP server allows agents to inspect the DOM and debug console errors in real-time using Gemini CLI or any compatible agent. Check out the documentation on GitHub →

Connect your agents directly to Chrome DevTools. 🛠️ The new Chrome DevTools MCP server allows agents to inspect the DOM and debug console errors in real-time using Gemini CLI or any compatible agent. Check out the documentation on GitHub →

Google for Developers

22,793 views • 6 months ago

🔧 Let your coding agent identify and fix INP issues for you → With Chrome DevTools MCP, your coding agent can measure performance for specific user interactions to find and resolve slow UI responses - on its own with the help of the browser!

🔧 Let your coding agent identify and fix INP issues for you → With Chrome DevTools MCP, your coding agent can measure performance for specific user interactions to find and resolve slow UI responses - on its own with the help of the browser!

Chrome for Developers

16,694 views • 8 months ago

Announcing our public preview of Chrome DevTools MCP! Experience the full power of DevTools in your AI coding agent → With Chrome DevTools MCP, your AI agent can run performance traces, inspect the DOM, & perform real-time debugging of your web pages.

Announcing our public preview of Chrome DevTools MCP! Experience the full power of DevTools in your AI coding agent → With Chrome DevTools MCP, your AI agent can run performance traces, inspect the DOM, & perform real-time debugging of your web pages.

Chrome for Developers

1,041,629 views • 9 months ago

Introducing the new dev-browser cli. The fastest way for an agent to use a browser is to let it write code. Just `npm i -g dev-browser` and tell your agent to "use dev-browser"

Introducing the new dev-browser cli. The fastest way for an agent to use a browser is to let it write code. Just `npm i -g dev-browser` and tell your agent to "use dev-browser"

Sawyer Hood

864,532 views • 3 months ago

Today we're launching the PlanetScale hosted MCP server. Use your favorite AI agent to explore your data, identify slow queries, and improve database performance.

Today we're launching the PlanetScale hosted MCP server. Use your favorite AI agent to explore your data, identify slow queries, and improve database performance.

PlanetScale

29,388 views • 4 months ago

Your dev experience now has full MCP support Use the the Shopify Dev MCP server to set up, code, and validate your app Demo with Darius Gai

Your dev experience now has full MCP support Use the the Shopify Dev MCP server to set up, code, and validate your app Demo with Darius Gai

Shopify Developers

23,238 views • 6 months ago

Those MCP totally 10x my Cursor workflow… - It reads my browser console / network log - It use Replicate to generate UI assets - It reads my supabase & figma ... Here I shared some of my fav MCP & how to install them, As well as the EASIST way to create your own MCP (Thanks to Cloudflare 's MCP-worker) 0:00 Cursor MCP overview 2:35 How to install common MCP 5:49 Let cursor read console/network log 7:24 Build yoru own MCP If you want to learn more about advanced AI coding workflow, join my community where I post tips weekly:

Those MCP totally 10x my Cursor workflow… - It reads my browser console / network log - It use Replicate to generate UI assets - It reads my supabase & figma ... Here I shared some of my fav MCP & how to install them, As well as the EASIST way to create your own MCP (Thanks to Cloudflare 's MCP-worker) 0:00 Cursor MCP overview 2:35 How to install common MCP 5:49 Let cursor read console/network log 7:24 Build yoru own MCP If you want to learn more about advanced AI coding workflow, join my community where I post tips weekly:

Jason Zhou

287,728 views • 1 year ago

You can now clone any website just by writing a prompt. Simply add the Firecrawl MCP server to your favorite AI coding tool for improved web data extraction, and let Claude code it for you. Here’s how:

You can now clone any website just by writing a prompt. Simply add the Firecrawl MCP server to your favorite AI coding tool for improved web data extraction, and let Claude code it for you. Here’s how:

Alvaro Cintas

83,031 views • 11 months ago

You can now clone any website just by writing a prompt. Simply add the new Firecrawl MCP server to your favorite AI coding tool for improved web data extraction, and let Claude code it for you. Here’s how:

You can now clone any website just by writing a prompt. Simply add the new Firecrawl MCP server to your favorite AI coding tool for improved web data extraction, and let Claude code it for you. Here’s how:

Alvaro Cintas

539,611 views • 1 year ago

Here is how to use Claude Code with Unity 6! 🤝 Unity has a native MCP server to let AI handle the boilerplate code while you focus on your game! 🤩 ➡️ Read more at: #unitytips #gamedev #unity3d #unity6 #ai

Here is how to use Claude Code with Unity 6! 🤝 Unity has a native MCP server to let AI handle the boilerplate code while you focus on your game! 🤩 ➡️ Read more at: #unitytips #gamedev #unity3d #unity6 #ai

Sunny Valley Studio

35,035 views • 2 months ago

Here's step-by-step instructions to use the apple-mcp server!

Here's step-by-step instructions to use the apple-mcp server!

Dhravya Shah

41,847 views • 1 year ago

You can connect your Supabase database via MCP server to Cursor! The Cursor agent can get the schema and any data from your database through the official Postgres MCP server! This helps Cursor understand your database better when it needs to modify it to add a new feature!

You can connect your Supabase database via MCP server to Cursor! The Cursor agent can get the schema and any data from your database through the official Postgres MCP server! This helps Cursor understand your database better when it needs to modify it to add a new feature!

Tyler Shukert

203,451 views • 1 year ago

Introducing developer mode for browser use in Chrome and the Codex in-app browser. Codex can use the Chrome DevTools Protocol (CDP) to debug browser issues by profiling JavaScript performance and inspecting console output, network traffic, and page state.

Introducing developer mode for browser use in Chrome and the Codex in-app browser. Codex can use the Chrome DevTools Protocol (CDP) to debug browser issues by profiling JavaScript performance and inspecting console output, network traffic, and page state.

OpenAI Developers

371,333 views • 13 days ago

Leverage the Dart MCP Server to enhance your Dart and Flutter development experience 💻✨ In this blog, explore useful tools provided by the Dart MCP Server and learn how to configure the server for use in popular development environments and tools →

Leverage the Dart MCP Server to enhance your Dart and Flutter development experience 💻✨ In this blog, explore useful tools provided by the Dart MCP Server and learn how to configure the server for use in popular development environments and tools →

Flutter

18,878 views • 11 months ago

😂 How It use To Be When Your Girl Use To Let You Use Her Car Back In The Day. 😂🚗

😂 How It use To Be When Your Girl Use To Let You Use Her Car Back In The Day. 😂🚗

Desi Banks

1,961,007 views • 2 years ago

Here's how to deploy your own MCP server in 30 seconds: 1. Remix the Replit template 2. Prompt Agent "create a server that does xyz" 3. Select "Publish" Voila - a streamable HTTP server deployed with API key auth Connect to your sever in your client of choice

Here's how to deploy your own MCP server in 30 seconds: 1. Remix the Replit template 2. Prompt Agent "create a server that does xyz" 3. Select "Publish" Voila - a streamable HTTP server deployed with API key auth Connect to your sever in your client of choice

matt palmer

80,137 views • 7 months ago

⚡day 5 of launch week: from (zero) MCP server to ChatGPT app this is peak developer experience 🤌🏼 1. define your UI in a single react file. 2. test it instantly with hot reload in the built-in Inspector 3. deploy it in one click on mcp-use Cloud 4. ship it directly to ChatGPT with: npx create-mcp-use-app@latest my-server --template apps-sdk you can go from zero to a deployed mcp server with apps sdk widgets in just 5 minutes here's how 🧵

⚡day 5 of launch week: from (zero) MCP server to ChatGPT app this is peak developer experience 🤌🏼 1. define your UI in a single react file. 2. test it instantly with hot reload in the built-in Inspector 3. deploy it in one click on mcp-use Cloud 4. ship it directly to ChatGPT with: npx create-mcp-use-app@latest my-server --template apps-sdk you can go from zero to a deployed mcp server with apps sdk widgets in just 5 minutes here's how 🧵

pederzh

22,647 views • 8 months ago

Select. Ask. Solve ✅ Your coding agent can now connect directly to your active browser session. Whether it's a wonky div in the Elements panel or a failed API call, just select it and let the agent get to work →

Select. Ask. Solve ✅ Your coding agent can now connect directly to your active browser session. Whether it's a wonky div in the Elements panel or a failed API call, just select it and let the agent get to work →

Chrome for Developers

35,410 views • 6 months ago

Coding agents can now automatically fix issues reported by DevTools → The MCP server now accesses the issues panel to detect and resolve problems like cookie errors or missing form labels.

Coding agents can now automatically fix issues reported by DevTools → The MCP server now accesses the issues panel to detect and resolve problems like cookie errors or missing form labels.

Chrome for Developers

32,331 views • 6 months ago