Dans cette vidéo de 20mn, vous allez découvrir les DevTools, les outils de développement intégrés aux navigateurs. On y accède avec la touche F12, ou par clic droit puis Inspecter.
Cet outil est disponible sur la plupart des navigateurs modernes — Chrome, Firefox, Edge, Safari — donc ce qui est montré ici reste valable ailleurs, avec quelques différences d’interface.
Les DevTools permettent de consulter et modifier le DOM, c’est-à-dire la représentation en mémoire de la page sous forme d’objets construits par le navigateur à partir du HTML, de tester des modifications CSS en temps réel, et de récupérer du code HTML, CSS ou JS pour le réutiliser, par exemple dans un site WordPress.
C’est un outil utile pour comprendre la construction d’une page, effectuer des tests, ou réutiliser des éléments de code existants.