Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

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

addyosmani's profile picture

Addy Osmani

393,902 subscribers

14,800 Aufrufe • vor 1 Jahr •via X (Twitter)

Nachrichten & PolitikBildungWissenschaft & Technologie
LIVE

Anya Rossi• Live Now

Private livecam show

8 Kommentare

Profilbild von Andrew Kordampalos
Andrew Kordampalosvor 1 Jahr

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

Profilbild von Addy Osmani
Addy Osmanivor 1 Jahr

@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):

Profilbild von Enterprise Software Architecture
Enterprise Software Architecturevor 1 Jahr

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

Profilbild von Fisher
Fishervor 1 Jahr

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

Profilbild von Addy Osmani
Addy Osmanivor 1 Jahr

@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

Profilbild von Andrew Kordampalos
Andrew Kordampalosvor 1 Jahr

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

Profilbild von uncle shark
uncle sharkvor 1 Jahr

@ChromeDevTools In which Chrome version can it be used?

Profilbild von Addy Osmani
Addy Osmanivor 1 Jahr

@ChromeDevTools Chrome 131 and above

Ähnliche 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.
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 Aufrufe • vor 8 Monaten

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,793 Aufrufe • vor 5 Monaten

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 Aufrufe • vor 1 Jahr

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.
7:00

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,867 Aufrufe • vor 1 Jahr

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.
0:22

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 Aufrufe • vor 8 Monaten

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 Aufrufe • vor 1 Jahr

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 →
0:45

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 Aufrufe • vor 8 Monaten

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:
0:38

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 Aufrufe • vor 1 Monat

Chrome DevTools MCP in Cursor
0:30

Chrome DevTools MCP in Cursor

Alex Sidorenko

37,649 Aufrufe • vor 5 Monaten

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:
0:39

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 Aufrufe • vor 8 Monaten

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!
3:34

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 Aufrufe • vor 8 Monaten

#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
0:22

#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 Aufrufe • vor 2 Jahren

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 : )
2:13

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 Aufrufe • vor 7 Monaten

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

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

justin

180,540 Aufrufe • vor 9 Monaten

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 →
1:01

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 Aufrufe • vor 5 Monaten

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

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

Johnny Slack

344,292 Aufrufe • vor 1 Monat

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
2:33

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 Aufrufe • vor 2 Jahren