Loading video...

Video Failed to Load

There was a problem loading this video. This could be due to a temporary network issue or the video might be unavailable.

🔧 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

424,630 subscribers

16,721 views • 1 year ago •via X (Twitter)

Anya Rossi• Live Now

Private livecam show

5 Comments

Contextrix1 year ago

Cool!

Joan León 🏞️⚡️1 year ago

@gilberto_cocchi I will talk about them at the DevFest of @GDGGirona and @GDGBarcelona ☺️ #DevFest #DevTools #WebPerf #INP #MCP

Mrugesh Mohapatra 🇮🇳1 year ago

How do I get it to access an iframe? That is I am trying to debug my app which also has an iframe embedded (all localhost) Any specific prompt I could use? On Claude Code if matters

Kanmi Ọbasa1 year ago

:)

mustafa başar11 months ago

Is there any guide to install it to wsl? Because mcp is not able to connect to the wsl chrome.

Related Videos

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,443 views • 1 year ago

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

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,481 views • 4 months ago

Introducing Sarvam Voice Agents MCP. Describe the voice agent you want, and your coding tool builds it. The MCP connects your coding tool to Sarvam, so you can create agents, run campaigns, and analyse calls from the environment you already code in. Watch Sarvam Voice Agents MCP build a voice agent, call a list of people and report back. Build your first voice agent with the MCP:

Introducing Sarvam Voice Agents MCP. Describe the voice agent you want, and your coding tool builds it. The MCP connects your coding tool to Sarvam, so you can create agents, run campaigns, and analyse calls from the environment you already code in. Watch Sarvam Voice Agents MCP build a voice agent, call a list of people and report back. Build your first voice agent with the MCP:

Sarvam

18,720 views • 6 days ago

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.

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 views • 10 months ago

Introducing the first agent-to-agent code review solution: Qodo’s Agentic Toolbox. Get full codebase context, your coding rules, and AI code review, brought directly to your coding agent. Available now for Claude Code, OpenAI’s Codex, and Kiro, with support for any MCP-compatible client.

Introducing the first agent-to-agent code review solution: Qodo’s Agentic Toolbox. Get full codebase context, your coding rules, and AI code review, brought directly to your coding agent. Available now for Claude Code, OpenAI’s Codex, and Kiro, with support for any MCP-compatible client.

Qodo

49,613 views • 1 month ago

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 views • 1 year ago

Introducing coding sessions. Linear Agent can now triage issues, investigate the cause, write the fix, open a PR, and bring the code back for review. All shared with your team in Linear.

Introducing coding sessions. Linear Agent can now triage issues, investigate the cause, write the fix, open a PR, and bring the code back for review. All shared with your team in Linear.

Linear

309,083 views • 4 months ago

this is insane. just toggle this button and any coding agent can use your browser > no more Chrome extensions > One button, connect Claude Code to your browser all you need is the right harness... try it with the Browser Use CLI right now!

this is insane. just toggle this button and any coding agent can use your browser > no more Chrome extensions > One button, connect Claude Code to your browser all you need is the right harness... try it with the Browser Use CLI right now!

shawn

640,899 views • 7 months ago

Introducing Tidewave Web for Rails and Phoenix: a coding agent that runs in the browser alongside your web application, with full page and code context. Tidewave deeply integrates with your stack, from the database to the UI, making AI development more seamless and efficient.

Introducing Tidewave Web for Rails and Phoenix: a coding agent that runs in the browser alongside your web application, with full page and code context. Tidewave deeply integrates with your stack, from the database to the UI, making AI development more seamless and efficient.

José Valim

101,322 views • 1 year ago

🚨 Create Your Own Custom Coding Agent - Mix Fable 5, GPT 5.6 sol and Grok 4.5! Our newest feature allows you to mix and match your favorite LLMs and create your custom coding agent Create your favorite cocktail such as - Fable 5 for hard coding - 5.6 sol for backend - Opus 4.8 for frontend - Grok 4.5 for easy coding You can also only choose cheap LLMs for a cost optimized experience. Your use custom agent in API, chat or our agent platform

🚨 Create Your Own Custom Coding Agent - Mix Fable 5, GPT 5.6 sol and Grok 4.5! Our newest feature allows you to mix and match your favorite LLMs and create your custom coding agent Create your favorite cocktail such as - Fable 5 for hard coding - 5.6 sol for backend - Opus 4.8 for frontend - Grok 4.5 for easy coding You can also only choose cheap LLMs for a cost optimized experience. Your use custom agent in API, chat or our agent platform

Bindu Reddy

7,809,250 views • 3 months ago

8 rules to improve your AI coding agent. All of these rules work with Claude Code, Cursor, VS Code, and with most programming languages. Automating these rules will 10x the code quality and security produced by your AI coding agents. 1. Dependency checks - Prevent your agent from suggesting insecure libraries based on outdated training data. 2. Secret exposure - Auto-fix the use of hardcoded credentials introduced by your coding agent. 3. File and function size - Automatically refactor any files or functions that exceed a reasonable length. 4. Complexity and parameter limits - Simplify overly complex code written by the agent. 5. SQL Injection - Auto-fix all database interactions with unsanitized user input. 6. Unused variables and imports - Detect and remove dead code. 7. Detect invisible unicode characters in AI rules files - Remove zero-width spaces, direction overrides, and other invisible characters that can hide malicious behavior. 8. Insecure OpenAI API usage - Enforce use of secure OpenAI endpoints, proper authentication, and context isolation Here is how you can automate this: Install the Codacy extension. This will give you access to a CLI for local scanning and an MCP server for agent communication. From here on out, every time you need to generate some code: 1. Your agent will write the code 2. It will then call Codacy's CLI to check it 3. It will find any issues in real time 4. Your coding agent will fix the issues 5. When the code passes all checks, you are done Level of effort on your side: literally zero! Code quality and security because of this: 100x better! Here is the link to download the extension for your IDE: Thanks to the Codacy team for collaborating with me on this post.

8 rules to improve your AI coding agent. All of these rules work with Claude Code, Cursor, VS Code, and with most programming languages. Automating these rules will 10x the code quality and security produced by your AI coding agents. 1. Dependency checks - Prevent your agent from suggesting insecure libraries based on outdated training data. 2. Secret exposure - Auto-fix the use of hardcoded credentials introduced by your coding agent. 3. File and function size - Automatically refactor any files or functions that exceed a reasonable length. 4. Complexity and parameter limits - Simplify overly complex code written by the agent. 5. SQL Injection - Auto-fix all database interactions with unsanitized user input. 6. Unused variables and imports - Detect and remove dead code. 7. Detect invisible unicode characters in AI rules files - Remove zero-width spaces, direction overrides, and other invisible characters that can hide malicious behavior. 8. Insecure OpenAI API usage - Enforce use of secure OpenAI endpoints, proper authentication, and context isolation Here is how you can automate this: Install the Codacy extension. This will give you access to a CLI for local scanning and an MCP server for agent communication. From here on out, every time you need to generate some code: 1. Your agent will write the code 2. It will then call Codacy's CLI to check it 3. It will find any issues in real time 4. Your coding agent will fix the issues 5. When the code passes all checks, you are done Level of effort on your side: literally zero! Code quality and security because of this: 100x better! Here is the link to download the extension for your IDE: Thanks to the Codacy team for collaborating with me on this post.

Santiago

49,331 views • 1 year ago

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

133,969 views • 1 month ago

Finally rolling out the full Agent Session Explorer OSS next week 👀 Visualize every coding agent trace Identify root cause errors Feed it back to your coding agents to improve with every agent trace

Finally rolling out the full Agent Session Explorer OSS next week 👀 Visualize every coding agent trace Identify root cause errors Feed it back to your coding agents to improve with every agent trace

Aiswarya Sankar

35,252 views • 11 days ago

Custom animation styles for your design system → Save an animation style and publish to your libraries → Apply automatically with Figma agent and coding agents via MCP → Reference styles with skills

Custom animation styles for your design system → Save an animation style and publish to your libraries → Apply automatically with Figma agent and coding agents via MCP → Reference styles with skills

Figma

1,532,535 views • 21 days ago

The new GitHub Copilot coding agent can work in the background while you focus on other tasks. Assign it tasks via GitHub Issues or ad hoc in Visual Studio Code. Watch this demo and then optimize your workflow with the Copilot coding agent. 🚀 ⬇️

The new GitHub Copilot coding agent can work in the background while you focus on other tasks. Assign it tasks via GitHub Issues or ad hoc in Visual Studio Code. Watch this demo and then optimize your workflow with the Copilot coding agent. 🚀 ⬇️

GitHub

55,411 views • 1 year ago

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 views • 8 months ago

Now in terminal-browser: Agent Recordings Record an open browser tab, then point out issues in the video for your agent to fix

Now in terminal-browser: Agent Recordings Record an open browser tab, then point out issues in the video for your agent to fix

Rob Pruzan

11,776 views • 2 months ago

This is such a powerful AI coding workflow. You can now use Cursor or Windsurf for coding, and let CodeRabbit’s AI agent refactor messy code, help you debug, and find security vulnerabilities. Here’s how:

This is such a powerful AI coding workflow. You can now use Cursor or Windsurf for coding, and let CodeRabbit’s AI agent refactor messy code, help you debug, and find security vulnerabilities. Here’s how:

Alvaro Cintas

79,862 views • 1 year ago

.Postman is now natively available in your favorite coding agent! The new Postman CLI is designed to bring API engineering for agents: 1️⃣ Works in Git and your code repo - Just drop Postman where your agent lives and works. 2️⃣ No GUI - Work in your coding agent. Bring up the Postman UI for review and approval. 3️⃣ No sign-up - Get started right away. Sign-up when you have to save your work and want more. Install once, work in your agent. Run npm install -g postman-cli, then postman init. This loads Postman's skills into your coding agent so it can create collections, write tests, and much more. Available as a plugin for all coding agents! The skills cover the API lifecycle: find APIs your org already has, generate tests that catch regressions, mock an API before it exists, watch live endpoints for downtime and drift, run checks in CI on every commit, and run performance tests. You can also extend the abilities of your agent with the Context Graph. An agent often sees only the code that is accessible to them. The Context Graph API gives it a map of your team's infrastructure, APIs, and services, and how they depend on each other. As your agent works, you stay the reviewer. Your agent does the work from the command line. Open Postman when you want to review or approve it. Check out more at

.Postman is now natively available in your favorite coding agent! The new Postman CLI is designed to bring API engineering for agents: 1️⃣ Works in Git and your code repo - Just drop Postman where your agent lives and works. 2️⃣ No GUI - Work in your coding agent. Bring up the Postman UI for review and approval. 3️⃣ No sign-up - Get started right away. Sign-up when you have to save your work and want more. Install once, work in your agent. Run npm install -g postman-cli, then postman init. This loads Postman's skills into your coding agent so it can create collections, write tests, and much more. Available as a plugin for all coding agents! The skills cover the API lifecycle: find APIs your org already has, generate tests that catch regressions, mock an API before it exists, watch live endpoints for downtime and drift, run checks in CI on every commit, and run performance tests. You can also extend the abilities of your agent with the Context Graph. An agent often sees only the code that is accessible to them. The Context Graph API gives it a map of your team's infrastructure, APIs, and services, and how they depend on each other. As your agent works, you stay the reviewer. Your agent does the work from the command line. Open Postman when you want to review or approve it. Check out more at

Abhinav Asthana

493,460 views • 21 days ago