Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

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

13,259 görüntüleme • 1 yıl önce •via X (Twitter)

Bilim & Teknoloji#ChromeDevTools#GoogleGemini#CSS#webdevelopment#AI
LIVE

Anya Rossi• Live Now

Private livecam show

2 Yorum

Jecelyn Yeen 🐟 profil fotoğrafı
Jecelyn Yeen 🐟1 yıl önce

🤖 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 profil fotoğrafı
kiran1 yıl önce

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

Benzer Videolar

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 görüntüleme • 1 yıl önce

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 görüntüleme • 1 yıl önce

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 görüntüleme • 1 yıl önce

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,867 görüntüleme • 1 yıl önce

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 görüntüleme • 1 yıl önce

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 görüntüleme • 1 yıl önce

🚀 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 görüntüleme • 3 yıl önce

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,285 görüntüleme • 2 ay önce

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 görüntüleme • 2 ay önce

🚀 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 görüntüleme • 1 yıl önce

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

#CSS only carousels arrive in Chrome 135 ⤷

Adam Argyle

75,729 görüntüleme • 1 yıl önce

#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 görüntüleme • 3 yıl önce

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,046 görüntüleme • 2 ay önce

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,826 görüntüleme • 6 ay önce

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 görüntüleme • 1 yıl önce

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 görüntüleme • 3 ay önce

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 görüntüleme • 1 yıl önce

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,517 görüntüleme • 2 yıl önce

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 görüntüleme • 1 yıl önce

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 görüntüleme • 1 yıl önce