Published: October 21, 2024
Last week we introduced a whole new panel to DevTools: AI assistance can help you debug styling issues with Gemini directly in DevTools.
Curious to see what it can do? Check out these 5 awesome ways this new feature can make styling your page easier - from understanding layouts to fixing airplanes.
1. Understand layouts
When building websites you are not always starting from scratch. Often enough you need to build on top of existing code that you have no prior knowledge of - and in the worst case no one around you has either.
Ask AI about an element's layout and understand why it's displayed the way it is
down to the last node - and why this overflow: hidden; on an element is
actually there for a reason. 👀
Prompt to try
Give me a summary of how this element and its children are laid out and re-create the layout in ASCII.
2. Pair-programming
CSS really got powerful by now. With so many possibilities it's all okay to get
confused sometimes: is it align-items that I need? Or justify-items? Or
rather justify-self or align-content?
Sometimes you really know what you want to do but just can't get the right set of CSS properties. Next time you find yourself in this situation, explain your problem to AI and let it figure out things for you.
AI assistance will investigate your existing code and compare it to what you are trying to achieve, suggesting the required fixes for you to review, apply, and copy into your codebase.
3. Accessibility advisor
Making your website accessible and easy to use with assistive technology is important. Consider accessibility from the start of development, rather than as an afterthought and aim to follow the Web Content Accessibility Guidelines (WCAG) throughout your development process.
Use AI assistance to get tips on where a <div> could be replaced with a
more semantic HTML element, how an additional aria-* attribute can be helpful,
or how color contrast can be improved.
Prompt to try
What about color contrast in this element?
4. Make it yours
Trends come and go: there were gradients, shadows and harsh borders, followed by flat design, moving into today's design era with bright neon colors on dark backgrounds.
But isn't it sometimes tiring how uniform things can look on the web? If it's one of those days for you, maybe ask AI assistance to switch things up and make the web a little more fun again - like on a theme park ride!
Prompt to try
This element looks a little boring. Can you make it look like a pirates theme park ride?
5. Become an aircraft mechanic
Explaining styling issues, helping to fix them, advising on accessibility and changing existing styles - there is already a bunch that AI assistance can support you with - and there is even more! Can you believe AI assistance even helps you fix airplanes? No previous experience required, put on your overall and get your hands dirty in the Chrome DevTools Hangar!
And make sure to let us know about your own experience in our public issue tracker!