正在加载视频...

视频加载失败

加载此视频时出现问题。这可能是由于临时网络问题，或视频可能不可用。

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

415,432 subscribers

19,286 次观看 • 7 个月前 •via X (Twitter)

Anya Rossi• Live Now

Private livecam show

0 条评论

暂无评论

原始帖子的评论将显示在这里

相关视频

🔧 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,689 次观看 • 7 个月前

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,058 次观看 • 8 个月前

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

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

Michał Pierzchała

12,573 次观看 • 3 个月前

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 次观看 • 7 个月前

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.

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 次观看 • 5 个月前

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.

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 次观看 • 2 个月前

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.

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 次观看 • 1 年前

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

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 次观看 • 7 个月前

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.

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 次观看 • 1 年前

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

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

jhey ʕ•ᴥ•ʔ

272,683 次观看 • 2 年前

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

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 次观看 • 5 个月前

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!

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 次观看 • 1 个月前

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

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

Addy Osmani

14,800 次观看 • 1 年前

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.

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

240,542 次观看 • 3 个月前

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?

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 次观看 • 9 个月前

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 😂

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 次观看 • 5 个月前

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

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 次观看 • 1 年前

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.

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 次观看 • 1 年前

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! ➡️

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 次观看 • 1 年前