Загрузка видео...

Не удалось загрузить видео

На главную

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 просмотров • 8 месяцев назад •via X (Twitter)

LIVE

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!
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 просмотров • 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.
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 просмотров • 8 месяцев назад

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 просмотров • 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
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 просмотров • 8 месяцев назад

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 просмотров • 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.
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 просмотров • 2 месяцев назад

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 просмотров • 7 месяцев назад

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 просмотров • 1 год назад

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 просмотров • 1 год назад

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 просмотров • 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. 💬
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 просмотров • 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!
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 просмотров • 1 месяц назад

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 просмотров • 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.
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 просмотров • 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?
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 просмотров • 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 😂
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 просмотров • 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
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 просмотров • 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.
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 просмотров • 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! ➡️
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 просмотров • 1 год назад