Loading video...

Video Failed to Load

Go Home

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: -...

dani_avila7's profile picture

Daniel San

32,608 subscribers

52,294 views • 8 months ago •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

0 Comments

No comments available

Comments from the original post will appear here

Related Videos

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.
1:27

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

369,755 views • 9 days 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.
0:32

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,541 views • 9 months ago

You can now connect to Claude in Chrome using the VS Code extension. Use it to debug frontend apps, collect data or automate your browser. Install the extension and type @ browser to get started.
0:27

You can now connect to Claude in Chrome using the VS Code extension. Use it to debug frontend apps, collect data or automate your browser. Install the extension and type @ browser to get started.

Thariq

259,132 views • 4 months ago

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
0:23

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

17,813 views • 8 months ago

Advent of Claude Day 19 - Claude Code + Chrome Claude can now directly interact with your browser. Navigating pages, clicking buttons, reading console errors, inspecting the DOM, and more. "Fix the bug and verify it works" is now one prompt. /chrome to start.
0:36

Advent of Claude Day 19 - Claude Code + Chrome Claude can now directly interact with your browser. Navigating pages, clicking buttons, reading console errors, inspecting the DOM, and more. "Fix the bug and verify it works" is now one prompt. /chrome to start.

Ado

137,502 views • 6 months ago

Stop guessing & start debugging responsive styles automatically with Chrome DevTools MCP→ Learn how a coding agent can find a visual bug on a specific device size, analyze the source code, update the CSS, & verify the fix with a live browser screenshot.
0:22

Stop guessing & start debugging responsive styles automatically with Chrome DevTools MCP→ Learn how a coding agent can find a visual bug on a specific device size, analyze the source code, update the CSS, & verify the fix with a live browser screenshot.

Chrome for Developers

19,286 views • 8 months ago

Did you know HEY has a Progressive Web App or PWA? It lets you add the HEY website to your desktop, right alongside your other apps. This quick video shows you how to install it for your web browser.
1:00

Did you know HEY has a Progressive Web App or PWA? It lets you add the HEY website to your desktop, right alongside your other apps. This quick video shows you how to install it for your web browser.

37signals

19,841 views • 1 year ago

Using the extension, Claude Code can test code directly in the browser to validate its work. Claude can also see client-side errors via console logs. Try it out by running /chrome in the latest version of Claude Code.
0:37

Using the extension, Claude Code can test code directly in the browser to validate its work. Claude can also see client-side errors via console logs. Try it out by running /chrome in the latest version of Claude Code.

Claude

783,297 views • 6 months ago

We’re excited to introduce the DeMCP’s Browser Use MCP and share a demo on how to use it for auto-replying to X comments! 1️⃣This MCP can execute tasks on X through your local browser — without needing your password — keeping everything secure while running directly on your side. 2️⃣In this demo, we show how to install and use the MCP Server to automatically reply to a comment.This is a great tool for KOLs to engage more followers at low cost. 3️⃣And this is just the beginning — DeMCP will continue to release more MCPs built for real-world use cases. Code on Github👉 DeMCP Portal👉
1:07

We’re excited to introduce the DeMCP’s Browser Use MCP and share a demo on how to use it for auto-replying to X comments! 1️⃣This MCP can execute tasks on X through your local browser — without needing your password — keeping everything secure while running directly on your side. 2️⃣In this demo, we show how to install and use the MCP Server to automatically reply to a comment.This is a great tool for KOLs to engage more followers at low cost. 3️⃣And this is just the beginning — DeMCP will continue to release more MCPs built for real-world use cases. Code on Github👉 DeMCP Portal👉

DeMCP

32,565 views • 1 year 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!
0:31

🔧 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 • 7 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:
13:16

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

In Chrome DevTools, AI via Gemini can now help you understand what the problem is and how to fix it, straight from the Console!
0:30

In Chrome DevTools, AI via Gemini can now help you understand what the problem is and how to fix it, straight from the Console!

Addy Osmani

154,063 views • 2 years ago

Introducing Deep Graph MCP for Claude Code 🤩 Claude Code by Anthropic is excellent and arguably one of the best tools for working with code today but... It has one major limitation, its native code search capabilities don't scale well to large repositories. By adding Deep Graph MCP, Claude's ability to explore large codebases improves dramatically. In this thread 🧵 I’ll show you how easy it is to connect this MCP to Claude Code.
1:12

Introducing Deep Graph MCP for Claude Code 🤩 Claude Code by Anthropic is excellent and arguably one of the best tools for working with code today but... It has one major limitation, its native code search capabilities don't scale well to large repositories. By adding Deep Graph MCP, Claude's ability to explore large codebases improves dramatically. In this thread 🧵 I’ll show you how easy it is to connect this MCP to Claude Code.

Daniel San

31,352 views • 1 year ago

🚨 Someone just built a Claude Code skill that clones any website perfectly in one prompt. It uses the built-in Chrome MCP to go straight to the source. It pulls the exact fonts, colors, and layout directly from the browser. 100% Open Source.
1:14

🚨 Someone just built a Claude Code skill that clones any website perfectly in one prompt. It uses the built-in Chrome MCP to go straight to the source. It pulls the exact fonts, colors, and layout directly from the browser. 100% Open Source.

Oliver Prompts

472,291 views • 2 months ago

A Mini Crash-Course on MCP! Yesterday, I published a guide that covers: - What MCP is - How to build your own MCP server - How to create a 100% local MCP client - Using this to control & automate any browser Step-by-step guide...👇
0:25

A Mini Crash-Course on MCP! Yesterday, I published a guide that covers: - What MCP is - How to build your own MCP server - How to create a 100% local MCP client - Using this to control & automate any browser Step-by-step guide...👇

Akshay 🚀

66,623 views • 10 months ago

Announcing Chrome DevTools MCP! 🚀 Connect your AI coding agent to Chrome's powerful automation & debugging capabilities with ease. Key features: ✅ Reliable automation: It can programmatically handle clicks, form fills, dialogs, and page navigation with ease. ✅ Performance insights: Go beyond simple audits. Instruct your agent to record a performance trace and extract actionable insights to optimize your web apps. ✅ Advanced debugging: Empower your AI to analyze network requests, list console messages, take screenshots, and even evaluate scripts in the browser context. ✅ Browser emulation: Easily test different conditions by emulating CPU slowdowns, network throttling, or various screen sizes. Works well with modern web apps and believe this will unlock new workflows for automated testing, AI-driven debugging, and interactive web development. And there's much more to come!
3:34

Announcing Chrome DevTools MCP! 🚀 Connect your AI coding agent to Chrome's powerful automation & debugging capabilities with ease. Key features: ✅ Reliable automation: It can programmatically handle clicks, form fills, dialogs, and page navigation with ease. ✅ Performance insights: Go beyond simple audits. Instruct your agent to record a performance trace and extract actionable insights to optimize your web apps. ✅ Advanced debugging: Empower your AI to analyze network requests, list console messages, take screenshots, and even evaluate scripts in the browser context. ✅ Browser emulation: Easily test different conditions by emulating CPU slowdowns, network throttling, or various screen sizes. Works well with modern web apps and believe this will unlock new workflows for automated testing, AI-driven debugging, and interactive web development. And there's much more to come!

Addy Osmani

268,524 views • 9 months ago

I slapped together this quick chrome extension to embed the Spatie tinker package in DevTools. It feels like a native PHP console tab 🤩 Extension below 👇 if you want to use it as well.
0:21

I slapped together this quick chrome extension to embed the Spatie tinker package in DevTools. It feels like a native PHP console tab 🤩 Extension below 👇 if you want to use it as well.

Tony Lea

41,585 views • 1 year ago

Chrome DevTools MCP in Cursor
0:30

Chrome DevTools MCP in Cursor

Alex Sidorenko

37,649 views • 5 months ago

This is sick 🤯🤯🤯 You can monitor Claude Code tasks using a project management app Install the Linear MCP then ask Claude Code to make a plan first then save tasks to Linear. Ask it to update once each task is finished $ claude mcp add --transport sse linear-server
0:21

This is sick 🤯🤯🤯 You can monitor Claude Code tasks using a project management app Install the Linear MCP then ask Claude Code to make a plan first then save tasks to Linear. Ask it to update once each task is finished $ claude mcp add --transport sse linear-server

Melvin Vivas

107,215 views • 6 months ago

CLAUDE CAN NOW TEST ITS OWN CODE IN A REAL BROWSER AND SCREEN RECORD ITSELF DOING IT SO YOU NEVER HAVE TO VERIFY MANUALLY it opens a real browser, catches console errors, confirms network calls, and records every step, so it stops saying "this should work" and starts proving it does.
1:02

CLAUDE CAN NOW TEST ITS OWN CODE IN A REAL BROWSER AND SCREEN RECORD ITSELF DOING IT SO YOU NEVER HAVE TO VERIFY MANUALLY it opens a real browser, catches console errors, confirms network calls, and records every step, so it stops saying "this should work" and starts proving it does.

0xMarioNawfal

51,153 views • 12 days ago