Loading video...

Video Failed to Load

Go Home

๐Ÿš€ 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

jecfish's profile picture

Jecelyn Yeen ๐ŸŸ

8,581 subscribers

13,267 views โ€ข 2 years ago โ€ขvia X (Twitter)

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

Anya Rossiโ€ข Live Now

Private livecam show

2 Comments

Jecelyn Yeen ๐ŸŸ's profile picture
Jecelyn Yeen ๐ŸŸ2 years 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: ๐Ÿ“œ ๐ŸŽฎ

kiran's profile picture
kiran2 years 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:
0:38

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

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.
0:33

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,952 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.
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

96,044 views โ€ข 2 years 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):
0:35

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,361 views โ€ข 1 year ago

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

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.
1:11

๐Ÿš€ 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 โšก๏ธ

414,743 views โ€ข 3 years 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:
0:35

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,191 views โ€ข 7 months ago

The open-source library of CSS motion effects, Kinetics, now contains 99 motion effects. You can copy CSS to the clipboard or the prompt so it's easy to replicate in your AI tool.
0:51

The open-source library of CSS motion effects, Kinetics, now contains 99 motion effects. You can copy CSS to the clipboard or the prompt so it's easy to replicate in your AI tool.

Csaba Kissi

107,100 views โ€ข 3 months 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.
0:44

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

300,812 views โ€ข 7 months 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 ๐Ÿค“
0:33

#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,454 views โ€ข 3 years ago

#CSS only carousels arrive in Chrome 135 โคท
1:27

#CSS only carousels arrive in Chrome 135 โคท

Adam Argyle

75,841 views โ€ข 1 year 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
0:23

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,106 views โ€ข 6 months ago

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

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

Adam Argyle

92,884 views โ€ข 11 months 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.
0:26

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 โ€ข 8 months 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:
1:04

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,640 views โ€ข 2 years ago

in Chrome 135 - Tomorrow Mar 26, 2025 customize all the parts of a <select> with #CSS! โคท
0:56

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

Adam Argyle

70,470 views โ€ข 1 year ago

Master CSS Grid in 2 CSS lines!
0:59

Master CSS Grid in 2 CSS lines!

Ania Kubรณw #JavaScriptGames

67,448 views โ€ข 1 year 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:
1:01

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