Uploaded October 2024 | Updated September 2026, 2 hours ago

---

A detailed guide to using the AI assistance panel in Chrome DevTools outlining how to use AI Console Insights and AI Assistance for CSS styles on practical, real-world examples.

@AddyOsmani's guide on implementing Dark Theme using AI Assistance: youtube.com/watch?v=RSyZA3VV6UM

🔥 CSS Stickers: cssw.io/stickers
🏷️ 20% Off Coupon: devtoolsai

Subscribe to CSS Weekly Newsletter:
💌 css-weekly.com

📖 Chapters
00:00 How to enable AI features in Chrome DevTools
01:16 How to use AI Console Insights in Chrome DevTools
03:29 How to use AI StyleSheets Assistance in DevTools
04:36 How to test image optimization
07:25 How to get general AI suggestions for the page
08:23 How to get help with implementing a new feature
08:50 How to debug layout shift using AI Assistance in DevTools
13:21 Is it possible to get non-contextual AI assistance?
13:53 How to use AI to better understand page code
15:56 CSS Stickers
16:15 Is AI in Chrome DevTools good?

Help support my channel
👨‍🎓 Get a course: masteringlinting.com
🪧 Buy a CSS sticker pack: stickers.css-weekly.com
💖 Support me on Patreon: patreon.com/cssweekly

Keep up-to-date with CSS Weekly:
🐦 Twitter: twitter.com/@cssweekly
🎶 TikTok: tiktok.com/@cssweekly
🎇 Instagram: instagram.com/cssweekly
📘 Facebook: facebook.com/CSSWeekly

Keep up to date with what I'm up to:
👨‍💼 Blog: zoranjambor.com
💼 LinkedIn: linkedin.com/in/zoranjambor

- Zoran Jambor
#css #devtools