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.

🚀 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 🐟

8,680 subscribers

13,259 views • 1 year ago •via X (Twitter)

Science & Technology #ChromeDevTools #GoogleGemini #CSS #webdevelopment #AI

Anya Rossi• Live Now

Private livecam show

2 Comments

Jecelyn Yeen 🐟1 year ago

🤖 AI Assistance gives you conversation prompts! Never struggle with what to say next. One click keeps your pair programming session flowing. [2/2] #ChromeDevTools #webdev #AI Learn more: 📜 🎮

kiran1 year ago

this is so great, will this be available with DevTools API?

Related Videos

Easily customize your website, dig into specific elements, and get AI generative fixes for CSS bugs with AI Assistance in #ChromeDevTools:

Easily customize your website, dig into specific elements, and get AI generative fixes for CSS bugs with AI Assistance in #ChromeDevTools:

Chrome for Developers

25,960 views • 1 year 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

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 Elements panel. 🧪 Instantly test changes live. 💾 Save those changes back to your source files on your computer with a connected workspace folder. This is a game-changer for rapid iteration.

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 Elements panel. 🧪 Instantly test changes live. 💾 Save those changes back to your source files on your computer with a connected workspace folder. This is a game-changer for rapid iteration.

Addy Osmani

36,854 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,867 views • 1 year ago

You can now play with CSS gap decorators in Chromium 139+! Learn more: Try it out (current Canary w/experimental web platform features flag):

You can now play with CSS gap decorators in Chromium 139+! Learn more: Try it out (current Canary w/experimental web platform features flag):

Una 🇺🇦

13,352 views • 1 year ago

CSS Wrapped 2024 one stop shop for the Chrome #CSS features launched in 2024!

CSS Wrapped 2024 one stop shop for the Chrome #CSS features launched in 2024!

Adam Argyle

31,206 views • 1 year ago

🚀 Introducing Panda CSS The modern CSS-in-JS styling engine! Say goodbye to runtime CSS-in-JS 🎨💪✨ 🔸Works with Server Components 🔸Recipes, Variants, and Patterns 🔸Design Tokens Support Works in Next.js, Vue, Qwik, Solid, Astro, and more.

🚀 Introducing Panda CSS The modern CSS-in-JS styling engine! Say goodbye to runtime CSS-in-JS 🎨💪✨ 🔸Works with Server Components 🔸Recipes, Variants, and Patterns 🔸Design Tokens Support Works in Next.js, Vue, Qwik, Solid, Astro, and more.

Sage ⚡️

413,033 views • 3 years ago

Introducing CSS Studio. A design tool that lives in your site. Runs in your browser. Writes code with your existing AI agent. All completely local - so no subscription. One price, lifetime updates.

Introducing CSS Studio. A design tool that lives in your site. Runs in your browser. Writes code with your existing AI agent. All completely local - so no subscription. One price, lifetime updates.

Motion

298,285 views • 2 months ago

Introducing Nuxt UI Playground: prototype and share components instantly, right in your browser ✨ Includes all 125+ components, composables, and Tailwind CSS theming out of the box. Try it now:

Introducing Nuxt UI Playground: prototype and share components instantly, right in your browser ✨ Includes all 125+ components, composables, and Tailwind CSS theming out of the box. Try it now:

Benjamin Canac

12,132 views • 2 months ago

🚀 Introducing Agent Creation Create your own AI Agent in minutes. NO-CODE (Only English). How it works - 🧵 1/6

🚀 Introducing Agent Creation Create your own AI Agent in minutes. NO-CODE (Only English). How it works - 🧵 1/6

Robots.Fun

18,792 views • 1 year ago

#CSS only carousels arrive in Chrome 135 ⤷

#CSS only carousels arrive in Chrome 135 ⤷

Adam Argyle

75,729 views • 1 year ago

#CSS only full URL page navigation with View Transitions - 5 minute prototype - 1 meta tag - a few lines of CSS - Open Props Behind a flag in Canary: chrome://flags/#view-transition-on-navigation It's not finished yet, but there's really rad opportunities already available 🤓

#CSS only full URL page navigation with View Transitions - 5 minute prototype - 1 meta tag - a few lines of CSS - Open Props Behind a flag in Canary: chrome://flags/#view-transition-on-navigation It's not finished yet, but there's really rad opportunities already available 🤓

Adam Argyle

30,398 views • 3 years ago

got html-in-canvas working with polyfill in all browsers including safari. and it works better than in canary(for now) send me your examples to try out

got html-in-canvas working with polyfill in all browsers including safari. and it works better than in canary(for now) send me your examples to try out

Palash Bansal

16,046 views • 2 months ago

Fit width text in 1 line of CSS `text-grow: per-line scale;` (prototype in Canary 165+)

Fit width text in 1 line of CSS `text-grow: per-line scale;` (prototype in Canary 165+)

Adam Argyle

92,826 views • 6 months ago

Today we're launching 2.0, the in-browser Postgres sandbox with AI assistance - now with bring-your-own-LLM 🚀

Today we're launching 2.0, the in-browser Postgres sandbox with AI assistance - now with bring-your-own-LLM 🚀

Greg Richardson

17,980 views • 1 year ago

Chrome 146 is now in Beta → This release brings CSS scroll-triggered animations, a new Sanitizer API to help build XSS-free apps, and WebGPU Compatibility mode to reach even more devices.

Chrome 146 is now in Beta → This release brings CSS scroll-triggered animations, a new Sanitizer API to help build XSS-free apps, and WebGPU Compatibility mode to reach even more devices.

Chrome for Developers

19,141 views • 3 months ago

Who's the best AI software engineer? Introducing RepoChat Arena: the live AI software engineering battle! 1. Input any Github link (repo/issue/PR) 2. Ask the models to fix bugs, add features or chat with repo 3. Vote for the better one Try it now at

Who's the best AI software engineer? Introducing RepoChat Arena: the live AI software engineering battle! 1. Input any Github link (repo/issue/PR) 2. Ask the models to fix bugs, add features or chat with repo 3. Vote for the better one Try it now at

lmarena.ai

90,534 views • 1 year ago

auto-growing <textarea> without JavaScript! CSS is getting field-sizing: content; to size inputs by their contents. Dropped in Chrome Canary today, demo here:

auto-growing <textarea> without JavaScript! CSS is getting field-sizing: content; to size inputs by their contents. Dropped in Chrome Canary today, demo here:

Wes Bos

203,517 views • 2 years ago

Introducing the open-source Next.js Audio Starter Kit Add Text to Speech, Speech to Text, Sound Effects and Conversational AI to your product in minutes. Built with: • ElevenLabs SDK • Next.js + shadcn/ui • Tailwind CSS v4 Repo link in the comments below:

Introducing the open-source Next.js Audio Starter Kit Add Text to Speech, Speech to Text, Sound Effects and Conversational AI to your product in minutes. Built with: • ElevenLabs SDK • Next.js + shadcn/ui • Tailwind CSS v4 Repo link in the comments below:

ElevenLabs Developers

145,836 views • 1 year ago

in Chrome 135 - Tomorrow Mar 26, 2025 customize all the parts of a <select> with #CSS! ⤷

in Chrome 135 - Tomorrow Mar 26, 2025 customize all the parts of a <select> with #CSS! ⤷

Adam Argyle

70,326 views • 1 year ago