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.

New in Chrome DevTools: Gemini can modify and save CSS changes directly to your source! Tired of manually copying CSS changes from DevTools back to your editor? Gemini to the rescue! You can now ask Gemini in the AI Assistance panel to: ✨ Modify and fix CSS within the... show more

Addy Osmani

378,193 subscribers

36,854 views • 1 year ago •via X (Twitter)

News & Politics Science & Technology Education

Anya Rossi• Live Now

Private livecam show

8 Comments

ςЎβξЯиęł1 year ago

@ChromeDevTools 5 years from now chrome is going to be like 4GB in size

Alex ZAP1 year ago

🚀 Revolutionize your QA testing with ZAPTEST AI! ZAPTEST automates testing, slashes costs & boosts ROI up to 10X. No coding needed—just faster, smarter automation. 📅 Book your live demo now:

Arjun Bharti1 year ago

@ChromeDevTools much needed

Kaushik Barodiya1 year ago

@ChromeDevTools Amazing :)

Stephen Burke1 year ago

@ChromeDevTools Can you share a link to this? Interesting!

milad khanmohammadi1 year ago

@ChromeDevTools Super helpful feature, no more copy paste hassle 👊

milad khanmohammadi1 year ago

@ChromeDevTools @sarvinrz

codeOfArmz1 year ago

@ChromeDevTools So I'd guess excluding memory-served apps?

Related Videos

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

Gemini CLI now integrates into VS Code. Get intelligent, context-aware suggestions and native in-editor diffing to review and modify changes directly in your IDE. Learn more:

Gemini CLI now integrates into VS Code. Get intelligent, context-aware suggestions and native in-editor diffing to review and modify changes directly in your IDE. Learn more:

Google AI Developers

143,844 views • 10 months ago

In Chrome DevTools, AI via Gemini can now help you understand what the problem is and how to fix it, straight from the Console!

In Chrome DevTools, AI via Gemini can now help you understand what the problem is and how to fix it, straight from the Console!

Addy Osmani

154,063 views • 2 years ago

Little CSS DevTools Trick: "Show Changes" ⭐️ Copy style changes you make in DevTools by running "Show Changes" from the command palette and hitting "Copy" 🧾 Very useful when you are debugging or trying things out!

Little CSS DevTools Trick: "Show Changes" ⭐️ Copy style changes you make in DevTools by running "Show Changes" from the command palette and hitting "Copy" 🧾 Very useful when you are debugging or trying things out!

jhey ʕ•ᴥ•ʔ

80,322 views • 2 years 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

New in Chrome DevTools: Annotate performance findings with Gemini! You can now ask Gemini to explain performance traces. Specifically you can generate annotations about events in the performance trace. This is a total game-changer. Double-click an event in the Main track, then click Generate label next to the input field. Gemini can suggest a label based on the stack trace and context. Try it out and let us know what you think!

New in Chrome DevTools: Annotate performance findings with Gemini! You can now ask Gemini to explain performance traces. Specifically you can generate annotations about events in the performance trace. This is a total game-changer. Double-click an event in the Main track, then click Generate label next to the input field. Gemini can suggest a label based on the stack trace and context. Try it out and let us know what you think!

Addy Osmani

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

Tip: Chrome DevTools has a CSS Animations inspector! We just added support for CSS scroll-driven animations. Modify timing, delays, durations and more.

Tip: Chrome DevTools has a CSS Animations inspector! We just added support for CSS scroll-driven animations. Modify timing, delays, durations and more.

Addy Osmani

79,674 views • 2 years ago

🚀 Introducing the new AI Assistance in #ChromeDevTools! Pair program with #GoogleGemini to fix your CSS woes in a flash. Try it out now in Chrome Canary! Even better [1/2] 🧵 #CSS #webdevelopment #AI

🚀 Introducing the new AI Assistance in #ChromeDevTools! Pair program with #GoogleGemini to fix your CSS woes in a flash. Try it out now in Chrome Canary! Even better [1/2] 🧵 #CSS #webdevelopment #AI

Jecelyn Yeen 🐟

13,260 views • 1 year ago

Get Gemini up to speed on what matters most to you with memory import. Bring an understanding of your key preferences, relationships, and personal context directly into Gemini. Once you import these memories, Gemini will understand the same key facts you’ve shared with other AI apps, like your dietary restrictions, your sibling’s names, or where you grew up and securely save those details for your next chat. To get started: 1) Head to your Settings in Gemini and select “Import memory to Gemini.” 2) Ask your current AI: Copy our suggested prompt and paste it into your other AI app to generate a summary of your preferences and style. 3) Copy the response: Copy the personalized summary it creates for you. 4) Paste into Gemini: Go back to “Import memory to Gemini,” paste the text, and start a new chat.

Get Gemini up to speed on what matters most to you with memory import. Bring an understanding of your key preferences, relationships, and personal context directly into Gemini. Once you import these memories, Gemini will understand the same key facts you’ve shared with other AI apps, like your dietary restrictions, your sibling’s names, or where you grew up and securely save those details for your next chat. To get started: 1) Head to your Settings in Gemini and select “Import memory to Gemini.” 2) Ask your current AI: Copy our suggested prompt and paste it into your other AI app to generate a summary of your preferences and style. 3) Copy the response: Copy the personalized summary it creates for you. 4) Paste into Gemini: Go back to “Import memory to Gemini,” paste the text, and start a new chat.

Google Gemini

48,686 views • 2 months ago

Serving your CSS/JS from a different subdomain (assets.mydomain...) than your document (www.mydomain...) is costing you 100+ milliseconds on your LCP for no good reason. Here's how to use DevTools to inspect and repro this, and why you need to use chrome://net-internals:

Serving your CSS/JS from a different subdomain (assets.mydomain...) than your document (www.mydomain...) is costing you 100+ milliseconds on your LCP for no good reason. Here's how to use DevTools to inspect and repro this, and why you need to use chrome://net-internals:

Nate Berkopec

10,298 views • 1 year ago

Aider v0.67.0 works in your favorite IDE or editor. Ask aider to make changes by adding "// AI comments" to your source files. Aider will immediately get to work. Aider wrote 61% of the code in this release.

Aider v0.67.0 works in your favorite IDE or editor. Ask aider to make changes by adding "// AI comments" to your source files. Aider will immediately get to work. Aider wrote 61% of the code in this release.

Paul Gauthier

17,875 views • 1 year ago

Creating, remixing, and editing a video is easier than ever with Gemini Omni. It offers a fluid, conversational way to create and edit. Just upload a video from your camera roll and ask Gemini to make changes.

Creating, remixing, and editing a video is easier than ever with Gemini Omni. It offers a fluid, conversational way to create and edit. Just upload a video from your camera roll and ask Gemini to make changes.

Google Gemini

1,322,841 views • 25 days ago

You can now generate a variety of downloadable files, including PDFs, Google Workspace files, Microsoft Word & Excel, and more directly in your chats with Gemini. Tell Gemini what content to create and the file format you want when you prompt without having to upload a template.

You can now generate a variety of downloadable files, including PDFs, Google Workspace files, Microsoft Word & Excel, and more directly in your chats with Gemini. Tell Gemini what content to create and the file format you want when you prompt without having to upload a template.

Google Gemini

27,061,590 views • 1 month ago

Agentic trading is now live on Gemini 🤖 Connect your AI model of choice directly to the exchange, train it with plain language, and run your own trading systems directly on the exchange Built to get you trading in minutes

Agentic trading is now live on Gemini 🤖 Connect your AI model of choice directly to the exchange, train it with plain language, and run your own trading systems directly on the exchange Built to get you trading in minutes

Gemini

165,911 views • 1 month ago

We redesigned Reve. Editing is easier than ever. Now all your tools are in one panel on the right. And you can make changes to anything just by clicking directly and prompting.

We redesigned Reve. Editing is easier than ever. Now all your tools are in one panel on the right. And you can make changes to anything just by clicking directly and prompting.

Reve

374,040 views • 3 months ago

Chrome has received a massive AI update Gemini in Chrome can see your screen live and interact with you to explain things. Discussion is extremely natural and is a game-changer for learning. Here's how to access it: 1. Use a Gemini Pro/Ultra account 2. Log in to this account on Chrome 3. The icon should appear in the top right-hand corner 4. Click on it or use the shortcut Alt+G At the end of your conversation, the entire transcript is available: It's easy to find information in the future!

Chrome has received a massive AI update Gemini in Chrome can see your screen live and interact with you to explain things. Discussion is extremely natural and is a game-changer for learning. Here's how to access it: 1. Use a Gemini Pro/Ultra account 2. Log in to this account on Chrome 3. The icon should appear in the top right-hand corner 4. Click on it or use the shortcut Alt+G At the end of your conversation, the entire transcript is available: It's easy to find information in the future!

Paul Couvert

277,519 views • 1 year ago

Tremendous alpha in having AI write storybook pages that allow designers to tweak layout of dynamic UI. Kit Langton does this kind of stuff for everything, inspired me! Even wrote a vite plugin that writes back the CSS changes to source so David can send PRs.

Tremendous alpha in having AI write storybook pages that allow designers to tweak layout of dynamic UI. Kit Langton does this kind of stuff for everything, inspired me! Even wrote a vite plugin that writes back the CSS changes to source so David can send PRs.

Adam

32,307 views • 2 months ago

A whole new way to talk to Gemini 🗣️ Available on #Pixel9 phones and with a Gemini Advanced subscription for other Pixel phones, Gemini Live can now help you make sense of what’s on your screen📱 or in your camera view¹ 📷 See what all the talk is about:

A whole new way to talk to Gemini 🗣️ Available on #Pixel9 phones and with a Gemini Advanced subscription for other Pixel phones, Gemini Live can now help you make sense of what’s on your screen📱 or in your camera view¹ 📷 See what all the talk is about:

Made by Google

268,977 views • 1 year ago