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.

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

420,357 subscribers

15,193 views • 1 month ago •via X (Twitter)

Anya Rossi• Live Now

Private livecam show

0 Comments

No comments available

Comments from the original post will appear here

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,041,647 views • 9 months ago

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

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

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

Addy Osmani

20,392 views • 1 year ago

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

Want to know if your website or product is accessible? There’s a tool for that. Here are some of the best accessibility tools to audit your design, find issues, and improve usability: - axe DevTools → A browser extension that scans your site for accessibility issues and provides fixes. - WebAIM Contrast Checker → Quickly checks if your text meets contrast requirements for readability. - Screen Reader Plugins → Test how your site works with screen readers like NVDA, JAWS, or VoiceOver. - WCAG Guidelines → The official accessibility standard, used to assess compliance levels (A, AA, AAA). - Lighthouse Audits → Built into Chrome DevTools, offering accessibility scores alongside performance metrics. - WAVE Browser Extension → Provides visual feedback by adding icons and indicators to your page showing accessibility issues and attributes. Many are free and take just minutes to implement. What’s your go-to accessibility testing tool? PS – We've compiled our favorites here: 🔗 #Accessibility #UXDesign #InclusiveDesign #WebAccessibility #UserExperience

Want to know if your website or product is accessible? There’s a tool for that. Here are some of the best accessibility tools to audit your design, find issues, and improve usability: - axe DevTools → A browser extension that scans your site for accessibility issues and provides fixes. - WebAIM Contrast Checker → Quickly checks if your text meets contrast requirements for readability. - Screen Reader Plugins → Test how your site works with screen readers like NVDA, JAWS, or VoiceOver. - WCAG Guidelines → The official accessibility standard, used to assess compliance levels (A, AA, AAA). - Lighthouse Audits → Built into Chrome DevTools, offering accessibility scores alongside performance metrics. - WAVE Browser Extension → Provides visual feedback by adding icons and indicators to your page showing accessibility issues and attributes. Many are free and take just minutes to implement. What’s your go-to accessibility testing tool? PS – We've compiled our favorites here: 🔗 #Accessibility #UXDesign #InclusiveDesign #WebAccessibility #UserExperience

G I Ξ G Ξ Ɍ

23,738 views • 1 year ago

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

372,555 views • 19 days ago

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

Agentic Browser will be lived tomorrow! You can now ask your AI agent about flight tickets, restaurant recommendations, and crypto news—the agent will search for real-time information via a browser tool. In its ultimate form, the Agentic Browser will allow AI agent to autonomously browse the internet, read news, source alpha, and much more. We’re one step closer to fully sentient AI agents.

Agentic Browser will be lived tomorrow! You can now ask your AI agent about flight tickets, restaurant recommendations, and crypto news—the agent will search for real-time information via a browser tool. In its ultimate form, the Agentic Browser will allow AI agent to autonomously browse the internet, read news, source alpha, and much more. We’re one step closer to fully sentient AI agents.

delaunch

30,986 views • 1 year ago

Run system commands and AI coding agents directly inside MATLAB desktop and Simulink Canvas ➡️ - Run CLI tools without leaving MATLAB and Simulink - Launch your AI coding agents from a terminal docked in MATLAB or Simulink. - Free and open source

Run system commands and AI coding agents directly inside MATLAB desktop and Simulink Canvas ➡️ - Run CLI tools without leaving MATLAB and Simulink - Launch your AI coding agents from a terminal docked in MATLAB or Simulink. - Free and open source

MATLAB

13,312 views • 11 days ago

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.

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

19,286 views • 8 months ago

Jules, Google’s experimental AI-powered code agent designed to assist developers in fixing bugs and optimizing code. Using Gemini 2.0 AI, Jules automatically identifies and fixes issues, streamlining the debugging process. Currently available to a select group of trusted testers, this innovation promises to accelerate software development. #AI #Coding #SoftwareDevelopment #BugFixes #Jules #Gemini #TechInnovation #DevTools

Jules, Google’s experimental AI-powered code agent designed to assist developers in fixing bugs and optimizing code. Using Gemini 2.0 AI, Jules automatically identifies and fixes issues, streamlining the debugging process. Currently available to a select group of trusted testers, this innovation promises to accelerate software development. #AI #Coding #SoftwareDevelopment #BugFixes #Jules #Gemini #TechInnovation #DevTools

Wissam Hussein

28,158 views • 1 year ago

Announcing Chrome DevTools MCP! 🚀 Connect your AI coding agent to Chrome's powerful automation & debugging capabilities with ease. Key features: ✅ Reliable automation: It can programmatically handle clicks, form fills, dialogs, and page navigation with ease. ✅ Performance insights: Go beyond simple audits. Instruct your agent to record a performance trace and extract actionable insights to optimize your web apps. ✅ Advanced debugging: Empower your AI to analyze network requests, list console messages, take screenshots, and even evaluate scripts in the browser context. ✅ Browser emulation: Easily test different conditions by emulating CPU slowdowns, network throttling, or various screen sizes. Works well with modern web apps and believe this will unlock new workflows for automated testing, AI-driven debugging, and interactive web development. And there's much more to come!

Announcing Chrome DevTools MCP! 🚀 Connect your AI coding agent to Chrome's powerful automation & debugging capabilities with ease. Key features: ✅ Reliable automation: It can programmatically handle clicks, form fills, dialogs, and page navigation with ease. ✅ Performance insights: Go beyond simple audits. Instruct your agent to record a performance trace and extract actionable insights to optimize your web apps. ✅ Advanced debugging: Empower your AI to analyze network requests, list console messages, take screenshots, and even evaluate scripts in the browser context. ✅ Browser emulation: Easily test different conditions by emulating CPU slowdowns, network throttling, or various screen sizes. Works well with modern web apps and believe this will unlock new workflows for automated testing, AI-driven debugging, and interactive web development. And there's much more to come!

Addy Osmani

268,619 views • 9 months ago

Introducing Cohere's first open-source coding model: North Mini Code Small & efficient, designed for agentic performance and built for community input.

Introducing Cohere's first open-source coding model: North Mini Code Small & efficient, designed for agentic performance and built for community input.

Cohere

591,102 views • 21 days ago

The Blackbox CLI is now open source. Smart debugging, automated project setup, and multi-agent execution to run multiple coding agents in parallel. Check out the code, contribute, or report any issues here

The Blackbox CLI is now open source. Smart debugging, automated project setup, and multi-agent execution to run multiple coding agents in parallel. Check out the code, contribute, or report any issues here

BLACKBOX AI

14,117 views • 6 months ago

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 →

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

🧲 Meet Magnet — the AI workspace for agentic coding. Build software with Claude Code, Cursor, Codex & co. → Write a ticket → Magnet assembles context → Fires to Claude Code, Deep Research, and other agent sessions in parallel Git worktree sandboxes → PRs appear → Use agents to help you spec, research, and decompose tasks Let your agents cook!

🧲 Meet Magnet — the AI workspace for agentic coding. Build software with Claude Code, Cursor, Codex & co. → Write a ticket → Magnet assembles context → Fires to Claude Code, Deep Research, and other agent sessions in parallel Git worktree sandboxes → PRs appear → Use agents to help you spec, research, and decompose tasks Let your agents cook!

Nicolae Rusan

16,608 views • 11 months ago

Today we're introducing the world's first SEO Agent Enter your website and it audits your site across 100+ data points, fixes issues, finds keyword gaps, and publishes optimized content to grow your organic traffic Try it now at

Today we're introducing the world's first SEO Agent Enter your website and it audits your site across 100+ data points, fixes issues, finds keyword gaps, and publishes optimized content to grow your organic traffic Try it now at

Okara

229,479 views • 1 month ago

📣 Introducing SWE-PolyBench: A new open-source multilingual benchmark for evaluating #AI coding agents SWE-PolyBench is the first benchmark to evaluate AI coding agents' ability to understand complex codebases, helping advance AI performance in the real world. Learn more. 👉

📣 Introducing SWE-PolyBench: A new open-source multilingual benchmark for evaluating #AI coding agents SWE-PolyBench is the first benchmark to evaluate AI coding agents' ability to understand complex codebases, helping advance AI performance in the real world. Learn more. 👉

Amazon Web Services

10,866 views • 1 year ago

Introducing AI Assistance in Chrome DevTools! 🤯🚀 Ever wish you could have a coding buddy to help you with CSS and layout? Well, your wish is granted! The new AI Assistance in Chrome DevTools is here to make your life as a developer easier, powered by Gemini. The new panel aims to help you find and fix issues. Just ask it questions about your code, and it provides tailored explanations and even suggests solutions. This is our first exploration into agentic AI in DevTools and we're excited to hear what you think of it. Some key features: 1. Conversational prompts: Get tailored suggestions and code snippets. 2. Contextual understanding: AI understands the code you're working on. 3. Step-by-step guidance: Get help with everything from styling to debugging. Want to see it in action? Check out my screencast below to see how I used it to add a dark mode.

Introducing AI Assistance in Chrome DevTools! 🤯🚀 Ever wish you could have a coding buddy to help you with CSS and layout? Well, your wish is granted! The new AI Assistance in Chrome DevTools is here to make your life as a developer easier, powered by Gemini. The new panel aims to help you find and fix issues. Just ask it questions about your code, and it provides tailored explanations and even suggests solutions. This is our first exploration into agentic AI in DevTools and we're excited to hear what you think of it. Some key features: 1. Conversational prompts: Get tailored suggestions and code snippets. 2. Contextual understanding: AI understands the code you're working on. 3. Step-by-step guidance: Get help with everything from styling to debugging. Want to see it in action? Check out my screencast below to see how I used it to add a dark mode.

Addy Osmani

95,907 views • 1 year ago