Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

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.

ChromiumDev's profile picture

Chrome for Developers

422,620 subscribers

1,042,627 Aufrufe • vor 11 Monaten •via X (Twitter)

Wissenschaft & Technologie
LIVE

Anya Rossi• Live Now

Private livecam show

0 Kommentare

Keine Kommentare verfügbar

Kommentare vom Original-Post werden hier angezeigt

Ähnliche Videos

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

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 Aufrufe • vor 8 Monaten

🔧 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,706 Aufrufe • vor 10 Monaten

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,315 Aufrufe • vor 10 Monaten

Generic AI prompts burn tokens guessing at performance issues from raw source code 📉 Chrome DevTools for agents fixes this. Let your coding agent run real performance traces and agentic Lighthouse audits to catch actual speed, accessibility, and SEO blockers directly in the browser → #GoogleIO
1:54

Generic AI prompts burn tokens guessing at performance issues from raw source code 📉 Chrome DevTools for agents fixes this. Let your coding agent run real performance traces and agentic Lighthouse audits to catch actual speed, accessibility, and SEO blockers directly in the browser → #GoogleIO

Chrome for Developers

15,454 Aufrufe • vor 3 Monaten

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,815 Aufrufe • vor 1 Jahr

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 Aufrufe • vor 10 Monaten

Me: Debug this INP issue. AI: I can't see your screen! Me: Enables DevTools MCP AI: Analyzed trace. Problem solved 🕵️‍♂️ Give your agent eyes →
0:55

Me: Debug this INP issue. AI: I can't see your screen! Me: Enables DevTools MCP AI: Analyzed trace. Problem solved 🕵️‍♂️ Give your agent eyes →

Chrome for Developers

15,707 Aufrufe • vor 6 Monaten

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,948 Aufrufe • vor 8 Monaten

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

269,047 Aufrufe • vor 11 Monaten

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 Aufrufe • vor 10 Monaten

The future of web development is here! AI assistance is now available in Chrome 131. Learn how this feature can help you code more efficiently: #DevTools
0:27

The future of web development is here! AI assistance is now available in Chrome 131. Learn how this feature can help you code more efficiently: #DevTools

Chrome for Developers

2,621,406 Aufrufe • vor 1 Jahr

Wow, it actually *is* DOM (See me using Chrome DevTools to inspect the DOM) HTML is <canvas> is going to open a new era of web UIs
0:37

Wow, it actually *is* DOM (See me using Chrome DevTools to inspect the DOM) HTML is <canvas> is going to open a new era of web UIs

Steren

736,801 Aufrufe • vor 3 Monaten

I gave Codex the ability to open Chrome DevTools for any iOS website No more opening Safari just to inspect element or debug network requests. Just tell your agent to run: ~ / npx serve-sim
0:29

I gave Codex the ability to open Chrome DevTools for any iOS website No more opening Safari just to inspect element or debug network requests. Just tell your agent to run: ~ / npx serve-sim

Evan Bacon 🥓

52,894 Aufrufe • vor 3 Monaten

Introducing Agent React DevTools. AI agents can now inspect React apps beyond the UI: → Component tree and state → Renders and performance → Structured output for debugging Works with React and React Native. Learn more ⬇️
0:25

Introducing Agent React DevTools. AI agents can now inspect React apps beyond the UI: → Component tree and state → Renders and performance → Structured output for debugging Works with React and React Native. Learn more ⬇️

Callstack Engineers

18,242 Aufrufe • vor 4 Monaten

Codex can now take on more of your browser dev work. With the new Chrome plugin in the Codex app, it can test web apps, gather context across tabs, use web DevTools efficiently in parallel, and keep results organized without taking over your browser.
2:34

Codex can now take on more of your browser dev work. With the new Chrome plugin in the Codex app, it can test web apps, gather context across tabs, use web DevTools efficiently in parallel, and keep results organized without taking over your browser.

OpenAI Developers

231,082 Aufrufe • vor 3 Monaten

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 Aufrufe • vor 1 Jahr

Your coding agent can now make your website better for visiting AI agents. Lighthouse audits are now available inside DevTools for agents, including the new agentic browsing category. See how to build a closed feedback loop for this and 4 other categories of web fixes →
0:40

Your coding agent can now make your website better for visiting AI agents. Lighthouse audits are now available inside DevTools for agents, including the new agentic browsing category. See how to build a closed feedback loop for this and 4 other categories of web fixes →

Chrome for Developers

17,552 Aufrufe • vor 25 Tagen

Stop slowing down your entire app just to test one API. You can now throttle individual network requests in Chrome DevTools to simulate specific bottlenecks without affecting the rest of your session →
0:21

Stop slowing down your entire app just to test one API. You can now throttle individual network requests in Chrome DevTools to simulate specific bottlenecks without affecting the rest of your session →

Chrome for Developers

118,725 Aufrufe • vor 5 Monaten