Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

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 görüntüleme • 1 yıl önce •via X (Twitter)

Haberler & PolitikaEğitimBilim & Teknoloji
LIVE

Anya Rossi• Live Now

Private livecam show

8 Yorum

Andrew Kordampalos profil fotoğrafı
Andrew Kordampalos1 yıl önce

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

Addy Osmani profil fotoğrafı
Addy Osmani1 yıl önce

@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 Architecture profil fotoğrafı
Enterprise Software Architecture1 yıl önce

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

Fisher profil fotoğrafı
Fisher1 yıl önce

@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 Osmani profil fotoğrafı
Addy Osmani1 yıl önce

@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 Kordampalos profil fotoğrafı
Andrew Kordampalos1 yıl önce

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

uncle shark profil fotoğrafı
uncle shark1 yıl önce

@ChromeDevTools In which Chrome version can it be used?

Addy Osmani profil fotoğrafı
Addy Osmani1 yıl önce

@ChromeDevTools Chrome 131 and above

Benzer Videolar

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 görüntüleme • 8 ay önce

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 görüntüleme • 5 ay önce

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 görüntüleme • 1 yıl önce

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,881 görüntüleme • 1 yıl önce

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 görüntüleme • 8 ay önce

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 görüntüleme • 1 yıl önce

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 görüntüleme • 8 ay önce

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 görüntüleme • 1 ay önce

Chrome DevTools MCP in Cursor
0:30

Chrome DevTools MCP in Cursor

Alex Sidorenko

37,649 görüntüleme • 5 ay önce

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 görüntüleme • 8 ay önce

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 görüntüleme • 8 ay önce

#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 görüntüleme • 2 yıl önce

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 görüntüleme • 7 ay önce

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 görüntüleme • 9 ay önce

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 görüntüleme • 5 ay önce

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,324 görüntüleme • 1 ay önce

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 görüntüleme • 2 yıl önce