Publicado em 21 de outubro de 2024
Na semana passada, apresentamos um painel totalmente novo ao DevTools: a assistência por IA pode ajudar você a depurar problemas de estilo com o Gemini diretamente no DevTools.
Quer saber o que ele pode fazer? Confira cinco maneiras incríveis de usar esse novo recurso para estilizar sua página, desde a compreensão de layouts até a correção de aviões.
1. Entender os layouts
Ao criar sites, nem sempre você começa do zero. Muitas vezes, você precisa criar em cima de um código que não conhece, e, no pior dos casos, ninguém ao seu redor também não conhece.
Pergunte à IA sobre o layout de um elemento e entenda por que ele é exibido da maneira
que é até o último nó e por que esse overflow: hidden; em um elemento está
presente por um motivo. 👀
Comando para tentar
Give me a summary of how this element and its children are laid out and re-create the layout in ASCII.
2. Programação em pares
O CSS ficou muito poderoso. Com tantas possibilidades, é normal se confundir
às vezes: é align-items que eu preciso? Ou justify-items? Ou
justify-self ou align-content?
Às vezes, você sabe o que quer fazer, mas não consegue encontrar o conjunto correto de propriedades CSS. Na próxima vez que você estiver nessa situação, explique seu problema para a IA e deixe que ela resolva as coisas para você.
A assistência de IA vai investigar seu código atual e compará-lo com o que você está tentando alcançar, sugerindo as correções necessárias para você analisar, aplicar e copiar na sua base de código.
3. Consultor de acessibilidade
É importante tornar seu site acessível e fácil de usar com tecnologia auxiliar. Considere a acessibilidade desde o início do desenvolvimento, em vez de pensar nisso depois, e tente seguir as Diretrizes de Acessibilidade para Conteúdo Web (WCAG, na sigla em inglês) ao longo do processo de desenvolvimento.
Use a assistência de IA para receber dicas sobre onde um <div> pode ser substituído por um
elemento HTML mais semântico, como um atributo aria-* adicional pode ser útil
ou como o contraste de cores pode ser melhorado.
Comando para tentar
What about color contrast in this element?
4. Personalizar um relatório
As tendências vêm e vão: houve gradientes, sombras e bordas rígidas, seguidos por design plano, que deu lugar à era atual do design com cores de néon brilhantes em segundos planos escuros.
Mas às vezes não é cansativo ver como as coisas podem parecer uniformes na Web? Se você estiver com vontade de mudar um pouco, peça para a assistência por IA mudar as coisas e tornar a Web um pouco mais divertida, como em um parque temático!
Comando para tentar
This element looks a little boring. Can you make it look like a pirates theme park ride?
5. Torne-se um mecânico de aeronaves
Explicar problemas de estilo, ajudar a corrigi-los, dar conselhos sobre acessibilidade e mudar estilos existentes: já há muitas coisas que a assistência por IA pode ajudar você, e ainda há mais! Você acredita que a assistência de IA ajuda a consertar aviões? Não é necessário ter experiência anterior. Coloque seu uniforme e coloque a mão na massa no Hangar do Chrome DevTools.
Conte sua experiência no nosso Issue Tracker público.