正在加载视频...

视频加载失败

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

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

418,355 subscribers

17,813 次观看 • 1 年前 •via X (Twitter)

教育科学技术

Anya Rossi• Live Now

Private livecam show

0 条评论

暂无评论

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

相关视频

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

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

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 →

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

Tell your agent to use the Expo MCP Server. It will make your dev experience more smooth and your apps will improve.

Tell your agent to use the Expo MCP Server. It will make your dev experience more smooth and your apps will improve.

Expo

21,764 次观看 • 3 个月前

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

Introducing the new dev-browser cli. The fastest way for an agent to use a browser is to let it write code. Just `npm i -g dev-browser` and tell your agent to "use dev-browser"

Introducing the new dev-browser cli. The fastest way for an agent to use a browser is to let it write code. Just `npm i -g dev-browser` and tell your agent to "use dev-browser"

Sawyer Hood

871,913 次观看 • 7 个月前

Those MCP totally 10x my Cursor workflow… - It reads my browser console / network log - It use Replicate to generate UI assets - It reads my supabase & figma ... Here I shared some of my fav MCP & how to install them, As well as the EASIST way to create your own MCP (Thanks to Cloudflare 's MCP-worker) 0:00 Cursor MCP overview 2:35 How to install common MCP 5:49 Let cursor read console/network log 7:24 Build yoru own MCP If you want to learn more about advanced AI coding workflow, join my community where I post tips weekly:

Those MCP totally 10x my Cursor workflow… - It reads my browser console / network log - It use Replicate to generate UI assets - It reads my supabase & figma ... Here I shared some of my fav MCP & how to install them, As well as the EASIST way to create your own MCP (Thanks to Cloudflare 's MCP-worker) 0:00 Cursor MCP overview 2:35 How to install common MCP 5:49 Let cursor read console/network log 7:24 Build yoru own MCP If you want to learn more about advanced AI coding workflow, join my community where I post tips weekly:

Jason Zhou

287,998 次观看 • 1 年前

Today we're launching the PlanetScale hosted MCP server. Use your favorite AI agent to explore your data, identify slow queries, and improve database performance.

Today we're launching the PlanetScale hosted MCP server. Use your favorite AI agent to explore your data, identify slow queries, and improve database performance.

PlanetScale

29,528 次观看 • 9 个月前

Your dev experience now has full MCP support Use the the Shopify Dev MCP server to set up, code, and validate your app Demo with Darius Gai

Your dev experience now has full MCP support Use the the Shopify Dev MCP server to set up, code, and validate your app Demo with Darius Gai

Shopify Developers

23,238 次观看 • 11 个月前

You can now clone any website just by writing a prompt. Simply add the Firecrawl MCP server to your favorite AI coding tool for improved web data extraction, and let Claude code it for you. Here’s how:

You can now clone any website just by writing a prompt. Simply add the Firecrawl MCP server to your favorite AI coding tool for improved web data extraction, and let Claude code it for you. Here’s how:

Alvaro Cintas

83,031 次观看 • 1 年前

You can now clone any website just by writing a prompt. Simply add the new Firecrawl MCP server to your favorite AI coding tool for improved web data extraction, and let Claude code it for you. Here’s how:

You can now clone any website just by writing a prompt. Simply add the new Firecrawl MCP server to your favorite AI coding tool for improved web data extraction, and let Claude code it for you. Here’s how:

Alvaro Cintas

541,797 次观看 • 1 年前

You built a Chrome extension using an AI agent. Now, how do you let that agent test it? We updated Chrome DevTools for agents so your agent can install extensions & interact with content inside popups automatically →

You built a Chrome extension using an AI agent. Now, how do you let that agent test it? We updated Chrome DevTools for agents so your agent can install extensions & interact with content inside popups automatically →

Chrome for Developers

134,660 次观看 • 2 个月前

Here is how to use Claude Code with Unity 6! 🤝 Unity has a native MCP server to let AI handle the boilerplate code while you focus on your game! 🤩 ➡️ Read more at: #unitytips #gamedev #unity3d #unity6 #ai

Here is how to use Claude Code with Unity 6! 🤝 Unity has a native MCP server to let AI handle the boilerplate code while you focus on your game! 🤩 ➡️ Read more at: #unitytips #gamedev #unity3d #unity6 #ai

Sunny Valley Studio

35,833 次观看 • 7 个月前

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.

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

378,636 次观看 • 5 个月前

who needs an MCP when you can just let your agent call the API get your agent connected to google search console with

who needs an MCP when you can just let your agent call the API get your agent connected to google search console with

Rhys

93,542 次观看 • 4 个月前

Build, deploy, and verify a smart contract on Injective in one prompt. The Injective MCP server gives your coding agent the tools to do it. Tell it what the contract should do, ask it to deploy and verify, and it hands back a live contract address. Let the agent do the work. 🥷

Build, deploy, and verify a smart contract on Injective in one prompt. The Injective MCP server gives your coding agent the tools to do it. Tell it what the contract should do, ask it to deploy and verify, and it hands back a live contract address. Let the agent do the work. 🥷

Injective 🥷

29,105 次观看 • 4 个月前

You can connect your Supabase database via MCP server to Cursor! The Cursor agent can get the schema and any data from your database through the official Postgres MCP server! This helps Cursor understand your database better when it needs to modify it to add a new feature!

You can connect your Supabase database via MCP server to Cursor! The Cursor agent can get the schema and any data from your database through the official Postgres MCP server! This helps Cursor understand your database better when it needs to modify it to add a new feature!

Tyler Shukert

203,451 次观看 • 1 年前

Your agent needs context. Your application needs data. Walrus Console connects the two. Here's a quick tutorial on how to wire Walrus Console into Cursor using MCP so your agent can read and write files directly in your workflow: Try Walrus Console:

Your agent needs context. Your application needs data. Walrus Console connects the two. Here's a quick tutorial on how to wire Walrus Console into Cursor using MCP so your agent can read and write files directly in your workflow: Try Walrus Console:

Walrus

18,739 次观看 • 28 天前

Select. Ask. Solve ✅ Your coding agent can now connect directly to your active browser session. Whether it's a wonky div in the Elements panel or a failed API call, just select it and let the agent get to work →

Select. Ask. Solve ✅ Your coding agent can now connect directly to your active browser session. Whether it's a wonky div in the Elements panel or a failed API call, just select it and let the agent get to work →

Chrome for Developers

35,410 次观看 • 10 个月前