5 choses intéressantes à faire avec l'assistance IA des outils de développement

Publié le 21 octobre 2024

La semaine dernière, nous avons lancé un tout nouveau panneau dans DevTools: l'assistance IA peut vous aider à déboguer les problèmes de style avec Gemini directement dans DevTools.

Vous souhaitez en savoir plus sur ses fonctionnalités ? Découvrez cinq façons géniales d'utiliser cette nouvelle fonctionnalité pour styliser plus facilement votre page, de la compréhension des mises en page à la correction des avions.

Enregistrement d'écran montrant comment l'assistance par l'IA permet d'implémenter un effet de mèche à l'aide d'animations CSS

1. Comprendre les mises en page

Lorsque vous créez des sites Web, vous ne partez pas toujours de zéro. Il arrive souvent que vous deviez vous appuyer sur du code existant dont vous n'avez aucune connaissance préalable, et dans le pire des cas, personne autour de vous n'en a non plus.

Demandez à l'IA pourquoi la mise en page d'un élément est telle qu'elle est, jusqu'au dernier nœud, et pourquoi cet élément overflow: hidden; est présent pour une raison. 👀

Invite à essayer

Give me a summary of how this element and its children are laid out and re-create the layout in ASCII.

2. Programmation en binôme

Le CSS est devenu vraiment puissant. Avec autant de possibilités, il est normal de se sentir parfois confus: est-ce que j'ai besoin de align-items ? Ou justify-items ? Ou plutôt justify-self ou align-content ?

Parfois, vous savez exactement ce que vous voulez faire, mais vous ne parvenez pas à trouver le bon ensemble de propriétés CSS. La prochaine fois que vous vous trouverez dans cette situation, expliquez votre problème à l'IA et laissez-la vous aider.

L'assistance IA examine votre code existant et le compare à ce que vous essayez d'accomplir. Elle vous suggère les corrections requises que vous pouvez examiner, appliquer et copier dans votre codebase.

3. Conseiller en accessibilité

Il est important de rendre votre site Web accessible et facile à utiliser avec les technologies d'assistance. Tenez compte de l'accessibilité dès le début du développement, plutôt que de l'ajouter en dernier, et veillez à suivre les Consignes d'accessibilité des contenus Web (WCAG) tout au long de votre processus de développement.

Utilisez l'assistance de l'IA pour obtenir des conseils sur les cas où un élément <div> peut être remplacé par un élément HTML plus sémantique, sur l'utilité d'un attribut aria-* supplémentaire ou sur l'amélioration du contraste des couleurs.

Invite à essayer

What about color contrast in this element?

4. Personnaliser votre rapport

Les tendances vont et viennent: il y a eu les dégradés, les ombres et les bordures vives, suivis du design plat, puis de l'ère actuelle du design avec des couleurs néon vives sur des arrière-plans sombres.

Boutons tels que conçus dans Bootstrap de la version 1 à la version 5.
Styles de boutons Bootstrap au fil du temps, de la version 1 à la version 5, de haut en bas.

Mais n'est-il pas parfois fatigant de voir à quel point les choses peuvent être uniformes sur le Web ? Si vous avez envie de vous amuser, demandez à l'assistance IA de changer les choses et de rendre le Web un peu plus amusant, comme dans un parc d'attractions.

Invite à essayer

This element looks a little boring. Can you make it look like a pirates theme park ride?

5. Devenir mécanicien aéronautique

Expliquer les problèmes de style, vous aider à les résoudre, vous conseiller sur l'accessibilité et modifier les styles existants : l'assistance par IA peut déjà vous aider dans de nombreux domaines, et il y en a encore plus ! Pouvez-vous croire que l'assistance IA peut même vous aider à réparer des avions ? Aucune expérience préalable n'est requise. Enfilez votre combinaison et mettez-vous au travail dans le hangar des outils pour les développeurs Chrome.

Le hangar Chrome DevTools : un espace de jeu interactif pour l'assistance par IA.

N'hésitez pas à nous faire part de votre expérience dans notre outil public de suivi des problèmes.