Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

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 →

googledevs's profile picture

Google for Developers

2,573,926 subscribers

22,793 görüntüleme • 6 ay önce •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

0 Yorum

Yorum bulunmuyor

Orijinal gönderinin yorumları burada görünecek

Benzer Videolar

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,402 görüntüleme • 8 ay önce

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,476 görüntüleme • 1 ay önce

Chrome DevTools MCP in Cursor
0:30

Chrome DevTools MCP in Cursor

Alex Sidorenko

37,649 görüntüleme • 5 ay önce

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

733,844 görüntüleme • 25 gün önce

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 görüntüleme • 2 yıl önce

Coding agents can now automatically fix issues reported by DevTools → The MCP server now accesses the issues panel to detect and resolve problems like cookie errors or missing form labels.
0:22

Coding agents can now automatically fix issues reported by DevTools → The MCP server now accesses the issues panel to detect and resolve problems like cookie errors or missing form labels.

Chrome for Developers

32,331 görüntüleme • 6 ay önce

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 görüntüleme • 6 ay önce

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 görüntüleme • 8 ay önce

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

365,188 görüntüleme • 6 gün önce

AI assistance in Chrome DevTools is here with Chrome 131! 🚀 Using Gemini, it helps you debug styling issues, understand layouts, and get AI-generated fixes for CSS bugs. Learn more →
0:24

AI assistance in Chrome DevTools is here with Chrome 131! 🚀 Using Gemini, it helps you debug styling issues, understand layouts, and get AI-generated fixes for CSS bugs. Learn more →

Google for Developers

17,235 görüntüleme • 1 yıl önce

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 görüntüleme • 2 yıl önce

I’m extremely pleased to announce the release of Scroll-Driven Animations Debugger, a Chrome DevTools extension to visualize and debug Scroll-Driven Animations. 🔗 Get the extension from the Chrome Web Store and start inspecting
1:54

I’m extremely pleased to announce the release of Scroll-Driven Animations Debugger, a Chrome DevTools extension to visualize and debug Scroll-Driven Animations. 🔗 Get the extension from the Chrome Web Store and start inspecting

Bramus

40,932 görüntüleme • 2 yıl önce

Introducing "Ask AI" across Chrome DevTools + save changes directly to your source code! #googleio
3:52

Introducing "Ask AI" across Chrome DevTools + save changes directly to your source code! #googleio

Addy Osmani

20,392 görüntüleme • 1 yıl önce

🔧 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 görüntüleme • 7 ay önce

this has been the most requested feature for years now. FlutterFlow MCP is here. you can now bring your agents directly into FlutterFlow and switch between them: Claude Code, Gemini CLI, Codex, or any MCP-compatible client. can’t wait to see what y’all build.
1:00

this has been the most requested feature for years now. FlutterFlow MCP is here. you can now bring your agents directly into FlutterFlow and switch between them: Claude Code, Gemini CLI, Codex, or any MCP-compatible client. can’t wait to see what y’all build.

Abel Mengistu

686,071 görüntüleme • 1 ay önce

Chrome DevTools MCP is going to be a Swiss-Army knife MCP. Watch me use it here with Gemini CLI to open Google Scholar, search for a term, and save the top 5 PDFs to a local folder. I cannot stop thinking of all sorts of personal automation possibilities with this. Amazing release from the Chrome for Developers team!
2:02

Chrome DevTools MCP is going to be a Swiss-Army knife MCP. Watch me use it here with Gemini CLI to open Google Scholar, search for a term, and save the top 5 PDFs to a local folder. I cannot stop thinking of all sorts of personal automation possibilities with this. Amazing release from the Chrome for Developers team!

Delip Rao e/σ

238,890 görüntüleme • 8 ay önce

The TANSTACK form devtools are here!!! 🔥🎊 New addition to the TanStack devtools family is finally out! 🚀 Debug your forms like never before! 🤖 Check out the docs how to add them to your project here:
0:22

The TANSTACK form devtools are here!!! 🔥🎊 New addition to the TanStack devtools family is finally out! 🚀 Debug your forms like never before! 🤖 Check out the docs how to add them to your project here:

Alem Tuzlak 🇧🇦

44,878 görüntüleme • 9 ay önce

I created a small tool to automatically set breakpoints in Chrome using the CDP (Chrome DevTools Protocol). It’s still in beta, but I’m actively working on a complete version..
0:46

I created a small tool to automatically set breakpoints in Chrome using the CDP (Chrome DevTools Protocol). It’s still in beta, but I’m actively working on a complete version..

m4ll0k

12,165 görüntüleme • 1 yıl önce

Devtools for AI Agents Nicolas Dessaigne AI agents are the next wave: autonomous tools that reason, decide, and amplify human productivity. We’re funding startups building devtools for agents, whether you’re creating agent builders or building blocks to perform complex tasks.
1:20

Devtools for AI Agents Nicolas Dessaigne AI agents are the next wave: autonomous tools that reason, decide, and amplify human productivity. We’re funding startups building devtools for agents, whether you’re creating agent builders or building blocks to perform complex tasks.

Y Combinator

113,401 görüntüleme • 1 yıl önce

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 görüntüleme • 1 yıl önce