Inspecter le code d’un site web revient à regarder sous trois couches distinctes : le HTML brut envoyé par le serveur, le DOM reconstruit par JavaScript, et les ressources réellement exécutées en arrière-plan. Confondre ces trois niveaux fausse toute analyse, qu’il s’agisse d’un simple débogage CSS ou d’un audit de sécurité complet.
HTML source, DOM généré et ressources exécutées : trois couches à distinguer
Quand un navigateur reçoit une page, il télécharge d’abord un document HTML statique. C’est ce que la commande « Afficher la source » (Ctrl+U sur Chrome, Firefox ou Edge) restitue. Ce fichier ne contient souvent qu’un squelette minimal, surtout sur les applications monopages.
A lire également : Qu'est-ce qu'on appelle le web ?
Le DOM affiché dans le panneau Elements des DevTools est une tout autre réalité. Les scripts chargés par la page modifient, ajoutent ou suppriment des nœuds HTML après le chargement initial. Le DOM inspecté dans DevTools reflète l’état après exécution du JavaScript, pas le code source d’origine.
La troisième couche concerne les ressources réellement exécutées : scripts tiers, pixels de suivi, appels réseau déclenchés dynamiquement. Elles n’apparaissent ni dans la source brute ni toujours dans le DOM, mais figurent dans l’onglet Network et la Console.
A lire en complément : Combien dois-je payer quelqu’un pour créer un site Web pour moi
| Méthode | Ce qu’elle montre | Ce qu’elle ignore |
|---|---|---|
| Afficher la source (Ctrl+U) | HTML brut envoyé par le serveur | Modifications JavaScript, contenu injecté dynamiquement |
| Panneau Elements (Inspecter) | DOM en temps réel après exécution des scripts | Requêtes réseau, scripts tiers non insérés dans le DOM |
| Onglet Network | Toutes les ressources chargées (JS, CSS, images, API) | Structure HTML, styles calculés |
| Onglet Sources | Fichiers JS/CSS avec cartes source | Rendu visuel, état du DOM |
Ce tableau résume pourquoi aucune méthode unique ne suffit. Un audit sérieux combine systématiquement plusieurs panneaux.
Inspecter un élément HTML avec les DevTools de Chrome, Firefox et Edge
L’accès le plus direct reste le clic droit sur un élément visible, suivi de « Inspecter ». Cette action ouvre le panneau Elements (ou Inspecteur sous Firefox) et met en surbrillance le nœud DOM correspondant.
- Sur Chrome et Edge, le raccourci Ctrl+Shift+C (Cmd+Shift+C sur macOS) active le mode inspection : le curseur survole la page et affiche un tooltip avec les dimensions, la police, le contraste et le rôle d’accessibilité de chaque élément.
- Sur Firefox, la même logique s’applique avec un inspecteur qui met davantage l’accent sur les grilles CSS et les propriétés Flexbox, facilitant le débogage de mises en page complexes.
- Sur Safari, il faut d’abord activer le menu Développement dans les préférences avancées avant d’accéder à l’inspecteur web, ce qui constitue un piège fréquent pour les débutants.
Le panneau Elements affiche le DOM vivant, pas le code source. Toute modification faite via JavaScript y apparaît. Si une balise de validation Google Analytics est injectée par un script, elle ne figurera que dans le DOM inspecté, jamais dans la source brute.
Modifier le CSS en direct pour tester un rendu
L’onglet Styles, adjacent au DOM, permet de modifier n’importe quelle propriété CSS et d’observer le résultat en temps réel. Ces modifications restent temporaires et disparaissent au rechargement.
Cette approche sert particulièrement lors d’un débogage responsive. En combinant le mode appareil (Device Mode) et l’édition CSS en direct, on vérifie le comportement d’un site sur différentes tailles d’écran sans toucher au code source.
Audit de sécurité : inspecter le code au-delà du DOM visible
Un audit de sécurité web ne peut pas se limiter au panneau Elements. Les scripts publicitaires et trackers tiers chargent du code invisible dans le DOM, et leur analyse relève de l’onglet Network combiné à l’onglet Sources.
L’onglet Network enregistre chaque requête émise par la page : appels API, chargement de bibliothèques externes, pixels de suivi. En filtrant par type (XHR, JS, Img), on identifie rapidement les domaines tiers contactés et les données transmises.
Désactiver JavaScript pour révéler le HTML réel
L’inspection peut être réalisée sans exécuter le JavaScript de la page. Dans les DevTools de Chrome, la commande « Disable JavaScript » (accessible via Ctrl+Shift+P puis recherche) bloque l’exécution de tous les scripts. Le DOM affiché se rapproche alors du HTML brut initial.
Cette technique révèle ce que le serveur envoie réellement avant toute transformation côté client. Pour les applications monopages construites avec React, Vue ou Angular, la page sans JavaScript est souvent quasi vide, ce qui confirme que le contenu visible dépend entièrement du rendu côté client.
Cartes source et analyse mémoire
Les cartes source (source maps) permettent de remonter du JavaScript minifié au code original. Les versions récentes des DevTools permettent de charger les cartes source à la demande ou de les désactiver, ce qui réduit la consommation mémoire lors de l’analyse de sites volumineux.
L’analyse des fuites mémoire est aussi devenue accessible directement dans le navigateur. Les instantanés de tas (heap snapshots) peuvent être interrogés par nom de propriété ou taille mémoire retenue, puis croisés avec les contextes d’exécution V8. Cette fonctionnalité dépasse l’inspection visuelle, mais elle fait désormais partie de la boîte à outils standard pour tout audit de performance ou de sécurité.
Soft navigations et applications monopages : inspecter le code d’un site en SPA
Les applications monopages ne déclenchent pas de rechargement complet lors d’un changement de vue. Ce mécanisme, appelé « soft navigation », complique l’inspection car le DOM se transforme sans que l’onglet Network ne montre un nouveau chargement de page.
Pour observer ces transitions, il faut activer l’enregistrement continu dans l’onglet Network avant de naviguer dans le site. Chaque changement de vue déclenche des appels API (souvent en XHR ou Fetch) qui remplacent le contenu du DOM sans toucher au document HTML initial.
Le panneau Elements reste le meilleur endroit pour observer ces mutations en temps réel. En plaçant un point d’arrêt sur les modifications de sous-arbre (Break on subtree modifications, accessible par clic droit sur un nœud DOM), le navigateur met en pause l’exécution chaque fois qu’un script modifie la branche sélectionnée.
L’écart entre le HTML source et le DOM inspecté constitue la donnée la plus révélatrice lors d’un audit. Un site dont la source brute ne contient presque rien mais dont le DOM affiche des centaines de nœuds repose entièrement sur JavaScript pour son rendu. Cette dépendance a des conséquences directes sur l’indexation par les moteurs de recherche, sur l’accessibilité et sur la surface d’attaque en cas de faille dans un script tiers.
