正在加载视频...

视频加载失败

返回首页

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 次观看 • 1 年前 •via X (Twitter)

新闻政治教育科学技术
LIVE

Anya Rossi• Live Now

Private livecam show

8 条评论

Andrew Kordampalos 的头像
Andrew Kordampalos1 年前

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

Addy Osmani 的头像
Addy Osmani1 年前

@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 的头像
Enterprise Software Architecture1 年前

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

Fisher 的头像
Fisher1 年前

@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 的头像
Addy Osmani1 年前

@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 的头像
Andrew Kordampalos1 年前

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

uncle shark 的头像
uncle shark1 年前

@ChromeDevTools In which Chrome version can it be used?

Addy Osmani 的头像
Addy Osmani1 年前

@ChromeDevTools Chrome 131 and above

相关视频

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,332 次观看 • 8 个月前

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 次观看 • 5 个月前

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 次观看 • 1 年前

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 次观看 • 1 年前

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 次观看 • 1 年前

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 次观看 • 7 个月前

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 次观看 • 8 个月前

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,620 次观看 • 1 个月前

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 次观看 • 8 个月前

Chrome DevTools MCP in Cursor
0:30

Chrome DevTools MCP in Cursor

Alex Sidorenko

37,649 次观看 • 4 个月前

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 次观看 • 8 个月前

#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 次观看 • 2 年前

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 次观看 • 7 个月前

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 次观看 • 9 个月前

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 次观看 • 5 个月前

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

343,233 次观看 • 1 个月前

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 次观看 • 2 年前