Загрузка видео...

Не удалось загрузить видео

На главную

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,402 просмотров • 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 просмотров • 6 месяцев назад

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,881 просмотров • 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 просмотров • 8 месяцев назад

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 год назад

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,726 просмотров • 1 месяц назад

Chrome DevTools MCP in Cursor
0:30

Chrome DevTools MCP in Cursor

Alex Sidorenko

37,649 просмотров • 5 месяцев назад

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 месяцев назад

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

344,393 просмотров • 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 лет назад