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.

Improving Chrome DevTools debugging with AI: a quick overview of new features we recently shipped.

Addy Osmani

393,902 subscribers

14,800 views • 1 year ago •via X (Twitter)

News & Politics Education Science & Technology

Anya Rossi• Live Now

Private livecam show

8 Comments

Andrew Kordampalos1 year ago

@ChromeDevTools Is there anyway to copy the applied CSS/markup changes, to apply them to my code?

Addy Osmani1 year ago

@ChromeDevTools If you check the DevTools Changes panel it should list the diff of CSS changes made to the page (including ones that were applied using AI):

Enterprise Software Architecture1 year ago

@ChromeDevTools 👀 There is a remarkable blend of aesthetic sensibility and analytical thinking present. A rare combination.

Fisher1 year ago

@ChromeDevTools @addyosmani has the "Ask AI" feature in the sources panel been pushed yet? I don't see it 😞 on Chrome 131.0.6778.109. (CSS & Console AI are activated & working)

Addy Osmani1 year ago

@ChromeDevTools The feature shipped to Chrome 131 and above. In case helpful we do have an FAQ to debug why you’re not seeing it

Andrew Kordampalos1 year ago

@ChromeDevTools We are all now youtubers for our products. Great job!

uncle shark1 year ago

@ChromeDevTools In which Chrome version can it be used?

Addy Osmani1 year ago

@ChromeDevTools Chrome 131 and above

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

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. 💬

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 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

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

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

We’re rolling out the biggest upgrade to Chrome in its history with all-new AI features, including: ✨ Gemini in Chrome 🔎 Search with AI Mode right from the address bar 🔐 One-click updates for compromised passwords, plus more safety features And more →

We’re rolling out the biggest upgrade to Chrome in its history with all-new AI features, including: ✨ Gemini in Chrome 🔎 Search with AI Mode right from the address bar 🔐 One-click updates for compromised passwords, plus more safety features And more →

Google

219,649 views • 8 months ago

We gave Jigar Thakkar, VP of Agentic AI for Business 30 seconds to introduce the new features in Amazon Quick. Spoiler: he's quick. New desktop app. Custom apps with natural language. Integrations with Google Workspace, Microsoft 365, Zoom, and Salesforce. Learn more about Quick:

We gave Jigar Thakkar, VP of Agentic AI for Business 30 seconds to introduce the new features in Amazon Quick. Spoiler: he's quick. New desktop app. Custom apps with natural language. Integrations with Google Workspace, Microsoft 365, Zoom, and Salesforce. Learn more about Quick:

AWS Newsroom

39,726 views • 1 month ago

Chrome DevTools MCP in Cursor

Chrome DevTools MCP in Cursor

Alex Sidorenko

37,649 views • 5 months ago

Join us as we pull back the curtain on a new chapter of Chrome in Behind the Browser: AI Edition 🎬 More AI features on more devices for a faster and more secure online experience. Watch now:

Join us as we pull back the curtain on a new chapter of Chrome in Behind the Browser: AI Edition 🎬 More AI features on more devices for a faster and more secure online experience. Watch now:

Chrome

21,424 views • 8 months 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,387 views • 8 months ago

#GeometryNodes has been extended with a few new features recently. First up, the new Bake node allows caching an intermediate geometry on disk. Next steps are to keep material assignments intact and to provide a higher level overview of the bakes in a scene. #b3d #devfund

#GeometryNodes has been extended with a few new features recently. First up, the new Bake node allows caching an intermediate geometry on disk. Next steps are to keep material assignments intact and to provide a higher level overview of the bakes in a scene. #b3d #devfund

Jacques Lucke

50,499 views • 2 years ago

We just shipped a brand new API key and Projects page inside of Google AI Studio, making it easier to create, import, and manage projects along with nice quality of life features like naming API keys 🔑! Live now and fully rolled out : )

Logan Kilpatrick

73,008 views • 7 months ago

we spent $100k on the cutest domain in tech and shipped a brand new way to code with ai

justin

180,540 views • 9 months 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 • 5 months ago

We recently shipped Shopify Design. Here's a technical breakdown of how I built it. 🧵

We recently shipped Shopify Design. Here's a technical breakdown of how I built it. 🧵

Johnny Slack

344,470 views • 1 month ago

Quick walkthrough of two new Microsoft Entra features that became Generally Available today. ➡️ Conditional Access Overview dashboard ➡️Conditional Access Templates More info over on this blog post

Quick walkthrough of two new Microsoft Entra features that became Generally Available today. ➡️ Conditional Access Overview dashboard ➡️Conditional Access Templates More info over on this blog post

Merill Fernando

15,711 views • 2 years ago