La curiosité est une des meilleures qualités d’un bon développeur web. Je dirais même que c’est une qualité essentielle pour quiconque veut comprendre les arcanes du web.
Aujourd’hui, je vais vous parler d’un outil qui va aiguiser cette curiosité et vous faire explorer les entrailles des sites web comme jamais auparavant. J’ai nommé: « View Rendered Source« .
« View Rendered Source », c’est une extension Chrome légère qui vous montre comment le navigateur a construit la page HTML d’origine en un Document Object Model (DOM) fonctionnel. Et non pas uniquement le code renvoyé par le serveur que vous auriez avec les outils de dev classique de Chrome.
Si, comme moi, vous aimez savoir comment les choses fonctionnent, vous allez adorer ce truc !
Pour les non-initiés, le DOM est comme la colonne vertébrale d’une page web. Il s’agit d’une représentation structurée de la page qui permet à JavaScript de la modifier à la volée. C’est comme le plan d’une maison que l’architecte utilise pour savoir où placer les murs, les fenêtres et les portes.
L’extension « View Rendered Source » vous permet de voir ce plan, mais pas seulement. Elle vous montre aussi comment il a été modifié en temps réel par JavaScript.
L’extension se divise en trois sections : le code source brut, la page rendue après interprétation en DOM, et la différence entre les deux. L’extension offre également une solution pour émuler le code source à destination des appareils mobiles.
Si ça vous dit de tester, allez sur le Chrome Web Store et installez « View Rendered Source ».