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

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

На главную

🚀 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,646 subscribers

13,261 просмотров • 1 год назад •via X (Twitter)

Наука и технологии#ChromeDevTools#GoogleGemini#CSS#webdevelopment#AI
LIVE

Anya Rossi• Live Now

Private livecam show

Комментарии: 2

Фото профиля Jecelyn Yeen 🐟
Jecelyn Yeen 🐟1 год назад

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

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

Похожие видео

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 просмотров • 1 год назад

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

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,854 просмотров • 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,898 просмотров • 1 год назад

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,352 просмотров • 1 год назад

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 просмотров • 1 год назад

🚀 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 ⚡️

413,033 просмотров • 3 лет назад

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

298,786 просмотров • 2 месяцев назад

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

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

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

Robots.Fun

18,792 просмотров • 1 год назад

#CSS only carousels arrive in Chrome 135 ⤷
1:27

#CSS only carousels arrive in Chrome 135 ⤷

Adam Argyle

75,735 просмотров • 1 год назад

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

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

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

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

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

Greg Richardson

17,980 просмотров • 1 год назад

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

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
0:54

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 просмотров • 1 год назад

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

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 просмотров • 1 год назад

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,326 просмотров • 1 год назад