正在加载视频...

视频加载失败

返回首页

🚀 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 次观看 • 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,867 次观看 • 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,285 次观看 • 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 次观看 • 2 个月前

🚀 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,729 次观看 • 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,046 次观看 • 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,826 次观看 • 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 次观看 • 3 个月前

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,517 次观看 • 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 年前