Loading video...

Video Failed to Load

Go Home

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.

ChromiumDev's profile picture

Chrome for Developers

415,432 subscribers

19,286 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

🔧 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,689 views • 7 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.
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,332 views • 8 months ago

Agents can now easily: → analyze a native crash → fix it → verify the fix without guessing » npx agent-device@0.6.1
0:46

Agents can now easily: → analyze a native crash → fix it → verify the fix without guessing » npx [email protected]

Michał Pierzchała

12,573 views • 3 months ago

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
1:01

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

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,446 views • 5 months ago

CSS Studio. A visual editor in your browser that streams updates to your local AI agent. Your browser, your agent, your source code. Coming soon.
0:36

CSS Studio. A visual editor in your browser that streams updates to your local AI agent. Your browser, your agent, your source code. Coming soon.

Motion

56,094 views • 2 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 • 7 months ago

New in Chrome DevTools: Gemini can modify and save CSS changes directly to your source! Tired of manually copying CSS changes from DevTools back to your editor? Gemini to the rescue! You can now ask Gemini in the AI Assistance panel to: ✨ Modify and fix CSS within the Elements panel. 🧪 Instantly test changes live. 💾 Save those changes back to your source files on your computer with a connected workspace folder. This is a game-changer for rapid iteration.
0:33

New in Chrome DevTools: Gemini can modify and save CSS changes directly to your source! Tired of manually copying CSS changes from DevTools back to your editor? Gemini to the rescue! You can now ask Gemini in the AI Assistance panel to: ✨ Modify and fix CSS within the Elements panel. 🧪 Instantly test changes live. 💾 Save those changes back to your source files on your computer with a connected workspace folder. This is a game-changer for rapid iteration.

Addy Osmani

36,854 views • 1 year ago

Errors!! That's the most stressful part about AI coding We lose 40% credits in debugging code We tried to solve it with CodeGuide Debug Agent Just screenshot your error message and upload/paste it The Agent will write a detailed debug prompt Copy & paste it. Error solved.
0:43

Errors!! That's the most stressful part about AI coding We lose 40% credits in debugging code We tried to solve it with CodeGuide Debug Agent Just screenshot your error message and upload/paste it The Agent will write a detailed debug prompt Copy & paste it. Error solved.

CJ Zafir

12,118 views • 1 year ago

Want to debug device-controlled CSS parallax effects without using a device? Simulate device orientation in Chrome DevTools 👇
0:27

Want to debug device-controlled CSS parallax effects without using a device? Simulate device orientation in Chrome DevTools 👇

jhey ʕ•ᴥ•ʔ

272,683 views • 2 years ago

This update quietly changed coding forever. Here’s the new flow ⤵️ 1. Install Chrome DevTools MCP 2. Connect Cursor or Claude or Copilot 3. AI launches Chrome 4. AI inspects DOM + console 5. AI fixes and validates bugs No screenshots. No guessing. Save this video, you’ll automate debugging. Want the SOP? DM me. 💬
8:03

This update quietly changed coding forever. Here’s the new flow ⤵️ 1. Install Chrome DevTools MCP 2. Connect Cursor or Claude or Copilot 3. AI launches Chrome 4. AI inspects DOM + console 5. AI fixes and validates bugs No screenshots. No guessing. Save this video, you’ll automate debugging. Want the SOP? DM me. 💬

Julian Goldie SEO

28,793 views • 5 months ago

We've been shipping a lot with our Visual Studio Code weekly releases! 🚀 Here's a roundup of some of the highlights from the past month: 🤖 Autopilot 🌐 Integrated browser debugging 🎨 Refreshed themes 📸 Images & video in chat … and much more!
1:53

We've been shipping a lot with our Visual Studio Code weekly releases! 🚀 Here's a roundup of some of the highlights from the past month: 🤖 Autopilot 🌐 Integrated browser debugging 🎨 Refreshed themes 📸 Images & video in chat … and much more!

Visual Studio Code

32,398 views • 2 months ago

Improving Chrome DevTools debugging with AI: a quick overview of new features we recently shipped.
2:42

Improving Chrome DevTools debugging with AI: a quick overview of new features we recently shipped.

Addy Osmani

14,800 views • 1 year ago

Studio MCP Server now supports full agentic loops, and Assistant can connect to external LLMs via Bring Your Own Key (BYOK). This allows creators to automatically edit, test, and refine their code with AI in plain language on Roblox using their preferred tools. The simple video shows a full loop with analyze, test, bug found, fix, test, pass.
0:24

Studio MCP Server now supports full agentic loops, and Assistant can connect to external LLMs via Bring Your Own Key (BYOK). This allows creators to automatically edit, test, and refine their code with AI in plain language on Roblox using their preferred tools. The simple video shows a full loop with analyze, test, bug found, fix, test, pass.

David Baszucki

241,020 views • 3 months ago

Move over, Playwright? Meet MCP-Chrome by Hangwin — an open-source AI agent tool that can fully control your Chrome browser: cross-tab context, session auth, history & more. In this video, AJ @ Augment Code: - Sets up MCP-Chrome & connects it to Auggie CLI - Gives the agent a multi-step task across Reddit & X - Generates a full report in a web app Perfect for automated testing, research & dev workflows. What’s your favorite underrated MCP tool right now?
4:31

Move over, Playwright? Meet MCP-Chrome by Hangwin — an open-source AI agent tool that can fully control your Chrome browser: cross-tab context, session auth, history & more. In this video, AJ @ Augment Code: - Sets up MCP-Chrome & connects it to Auggie CLI - Gives the agent a multi-step task across Reddit & X - Generates a full report in a web app Perfect for automated testing, research & dev workflows. What’s your favorite underrated MCP tool right now?

Augment Code

49,325 views • 9 months ago

goose + the Chrome DevTools MCP server is a cheat code. It fixes all my Docusaurus and TailwindCSS issues, then checks desktop, tablet, and mobile to confirm the fix actually worked. The future is now 😂
1:10

goose + the Chrome DevTools MCP server is a cheat code. It fixes all my Docusaurus and TailwindCSS issues, then checks desktop, tablet, and mobile to confirm the fix actually worked. The future is now 😂

Rizèl Scarlett 🇦🇬🇬🇾

75,408 views • 5 months ago

MCP servers take vibe coding to the next level! It's amazing what you can do with MCP combined with a good coding agent. Here is CodeLLM in action - literally builds a feature request in one shot! Everyone is all-in on MCP - expect a lot more cool stuff in the coming weeks
0:38

MCP servers take vibe coding to the next level! It's amazing what you can do with MCP combined with a good coding agent. Here is CodeLLM in action - literally builds a feature request in one shot! Everyone is all-in on MCP - expect a lot more cool stuff in the coming weeks

Bindu Reddy

19,498 views • 1 year ago

Available now in Visual Studio Code Insiders, you can select and add elements directly to Chat! After opening any locally-hosted site via the built-in Simple Browser, click "Start" on the toolbar and select the element you want. This will attach a screenshot of the selected element, as well as the HTML and CSS of that element.
0:26

Available now in Visual Studio Code Insiders, you can select and add elements directly to Chat! After opening any locally-hosted site via the built-in Simple Browser, click "Start" on the toolbar and select the element you want. This will attach a screenshot of the selected element, as well as the HTML and CSS of that element.

Visual Studio Code

75,499 views • 1 year ago

See how Brooke Jamieson uses the #AmazonQ Developer CLI agent to create a custom workshop guide. Watch to see the agent analyze workshop code content, create a workbook with progress tracking, & add encouraging notes...all in the terminal! ➡️
1:13

See how Brooke Jamieson uses the #AmazonQ Developer CLI agent to create a custom workshop guide. Watch to see the agent analyze workshop code content, create a workbook with progress tracking, & add encouraging notes...all in the terminal! ➡️

Amazon Web Services

10,426 views • 1 year ago