BROWSER / 01
Code source
Permet d'examiner le document HTML initial transmis par le serveur au navigateur.
HTML / SOURCE
Cyber Lab · Web · Browser · DevTools
Regardez derrière la page Web.
Code source, inspecteur, réseau, ressources, requêtes et mécanismes permettant de comprendre ce qu'une page Web affiche et reçoit.
Le navigateur n'affiche pas simplement une page : il reçoit des données, interprète du HTML et du CSS, exécute éventuellement du JavaScript et charge différentes ressources nécessaires au fonctionnement du site.
RENDERED PAGE
Elements
Console
Sources
Network
<html
lang="fr">
<body>
<main>
<h1>
Cyber Lab
</h1>
<img
src="image.webp">
</main>
</body>
</html>
NETWORK ACTIVITY
page
200
doc
style.css
200
css
app.js
200
js
image.webp
200
img
data.json
200
fetch
Fonctionnement
Le navigateur est aussi un outil d'observation.
Chrome, Edge, Firefox et les autres navigateurs modernes ne servent pas uniquement à consulter des sites Web. Ils permettent également d'observer une partie des mécanismes techniques nécessaires à l'affichage d'une page.
Le navigateur reçoit notamment un document HTML, charge des feuilles de style, des images, des scripts et éventuellement des données supplémentaires demandées pendant l'utilisation de la page.
Les outils de développement permettent d'examiner ces éléments et de mieux comprendre la différence entre ce qui apparaît à l'écran et les données qui participent à cet affichage.
BROWSER / FUNDAMENTALS
HTML
Structure initiale du document
transmis au navigateur.
CSS
Règles utilisées pour déterminer
la présentation visuelle des éléments.
JAVASCRIPT
Code pouvant modifier la page,
gérer des interactions ou demander
de nouvelles données.
DOM
Représentation du document utilisée
par le navigateur après son traitement.
NETWORK
Échanges nécessaires au chargement
des documents et ressources.
Outils du navigateur
Plusieurs vues pour comprendre une même page.
Chaque outil répond à une question différente. Le code source, l'inspecteur et le panneau réseau ne montrent pas exactement la même chose.
BROWSER / 02
Inspecteur
Permet d'explorer la structure actuelle de la page, ses éléments HTML et les règles CSS qui leur sont appliquées.
DOM / ELEMENTS
BROWSER / 03
Réseau
Affiche les différentes requêtes réalisées par la page et les ressources reçues par le navigateur.
NETWORK / HTTP
BROWSER / 04
Sources
Permet d'examiner différents fichiers utilisés par la page, notamment JavaScript et feuilles de style.
JS / CSS / FILES
BROWSER / 05
Console
Affiche notamment des messages, avertissements et erreurs produits pendant l'exécution de la page.
JS / DEBUG
BROWSER / 06
Stockage
Les outils du navigateur permettent également d'examiner certaines données enregistrées localement pour le site consulté.
STORAGE / WEB
Source et DOM
Le code source et l'inspecteur peuvent être différents.
Le code source permet généralement d'observer le document HTML initial reçu par le navigateur.
Après le chargement, du JavaScript peut ajouter, modifier ou supprimer des éléments. L'inspecteur présente alors la structure actuelle du document, appelée DOM.
Cette distinction est importante lorsqu'une information visible à l'écran ne se trouve pas directement dans le code source initial.
VIEW SOURCE
<body>
<div
id="app">
</div>
<script
src="app.js">
</script>
</body>
Document initial reçu.
INSPECTOR / DOM
<body>
<div
id="app">
<h1>
Cyber Lab
</h1>
</div>
</body>
Document après traitement.
Inspecteur
Examiner la structure de ce qui est affiché.
L'inspecteur permet de sélectionner un élément visible dans une page et de retrouver sa position dans la structure du document.
On peut ainsi observer le type d'élément, ses attributs, ses classes, certains liens, les ressources associées et les règles utilisées pour sa présentation.
Modifier localement un élément dans l'inspecteur ne modifie pas le site distant : la modification concerne seulement la représentation présente dans le navigateur.
ELEMENTS / DOM TREE
<main>
<article
class="post">
<h1>
Comprendre le navigateur
</h1>
<img
src="media/image.webp"
alt="Exemple">
<p>
Contenu de la page...
</p>
</article>
</main>
Réseau
Une page Web peut recevoir de nombreuses ressources.
Lorsqu'une page est chargée, le navigateur peut effectuer plusieurs requêtes afin de récupérer les éléments nécessaires à son fonctionnement.
Le panneau réseau permet notamment d'observer le document principal, les images, feuilles de style, scripts, polices, médias ou données demandées par les applications Web.
Cette vue aide à comprendre d'où provient une ressource effectivement reçue par le navigateur et à quel moment elle intervient dans le chargement.
NETWORK / REQUESTS
● RECORDING
Name
Status
Type
Size
page
200
document
18 KB
style.css
200
stylesheet
7 KB
application.js
200
script
41 KB
header.webp
200
image
96 KB
content.json
200
fetch
12 KB
video-segment.mp4
206
media
1.4 MB
Chargement
De l'adresse Web à la page affichée.
De manière simplifiée, plusieurs étapes interviennent entre la saisie d'une adresse et l'affichage final de la page.
01 / URL
Adresse
Le navigateur reçoit l'adresse de la ressource que l'utilisateur souhaite consulter.
02 / REQUEST
Requête
Une requête est envoyée au serveur concerné afin d'obtenir la ressource.
03 / RESPONSE
Réponse
Le serveur retourne une réponse, par exemple un document HTML.
04 / RESOURCES
Ressources
Le document peut entraîner le chargement de fichiers et de données supplémentaires.
05 / RENDER
Affichage
Le navigateur interprète les éléments reçus et construit la page présentée à l'utilisateur.
Observation technique
Que peut-on chercher avec les outils du navigateur ?
Lorsqu'une information est légitimement accessible dans votre navigateur, les outils de développement peuvent aider à comprendre la manière dont la page la représente ou les ressources qu'elle utilise.
HTML
Examiner un lien
Observer l'adresse réellement
associée à un élément de la page.
IMAGE
Identifier une ressource
Voir quel fichier image est
effectivement utilisé par la page.
DOM
Comprendre un élément
Examiner sa structure et les
attributs présents dans le document.
NETWORK
Observer une requête
Identifier une ressource demandée
et le type de réponse reçu.
SCRIPT
Comprendre une page dynamique
Repérer les scripts participant
au fonctionnement de l'interface.
ERROR
Observer une anomalie
La console et le réseau peuvent
aider à comprendre certains
problèmes de chargement.
Limites
Voir une information technique ne suffit pas à l'interpréter.
Comme pour les métadonnées, le contexte reste essentiel. Une information affichée par les outils du navigateur doit être comprise avant d'être utilisée.
Le DOM peut évoluer
Une application JavaScript peut modifier la structure de la page après son chargement initial.
Une URL n'explique pas nécessairement l'origine d'un contenu
Les ressources peuvent être servies par différentes infrastructures ou générées dynamiquement.
Une requête n'identifie pas automatiquement une personne
Le panneau réseau décrit avant tout des échanges techniques entre le navigateur et des services.
L'inspecteur n'est pas le serveur
Modifier localement le DOM ou une propriété CSS ne modifie pas les données enregistrées sur le serveur.
Tout n'est pas nécessairement présent dans le HTML initial
Certaines données sont obtenues ou construites après le chargement du document principal.
Accessibilité ne signifie pas absence de règles
L'utilisation des informations observées reste soumise au contexte, aux droits d'accès et aux règles applicables à l'activité concernée.
Tutoriels
Apprendre à lire une page Web.
Cette rubrique peut accueillir les futurs tutoriels pratiques du Cyber Lab consacrés au navigateur et aux technologies Web.
Ouvrir l'inspecteur du navigateur
Découvrir les outils de développement intégrés à Chrome, Edge et Firefox.
Lire le tutoriel →Afficher le code source d'une page
Comprendre ce que montre le code source et pourquoi il peut différer du DOM.
Lire le tutoriel →Comprendre le panneau Réseau
Lire les principales colonnes et identifier les ressources reçues par le navigateur.
Lire le tutoriel →Comprendre les codes HTTP
200, 301, 404, 403 ou 500 : comprendre simplement ce que signifient les principaux codes de réponse.
Lire le tutoriel →Identifier les ressources d'une page
Images, CSS, JavaScript et médias : comprendre comment le navigateur assemble les différents éléments.
Lire le tutoriel →Navigateur et traces numériques
Replacer les informations observées dans le navigateur parmi les autres formes de traces numériques.
Explorer →
À retenir
Ce qui apparaît à l'écran n'est que le résultat final.
Derrière une page Web peuvent se trouver un document HTML, des styles, des scripts, des images, des données et plusieurs échanges réseau. Les outils du navigateur permettent d'observer une partie de cette mécanique et de comprendre comment l'information affichée est construite.
Mais une donnée technique doit toujours être interprétée avec prudence : observer une ressource, une requête ou un attribut ne suffit pas nécessairement à déterminer son origine, son auteur ou sa portée.
Cyber Lab
Comprendre le Web commence souvent par regarder ce que reçoit le navigateur.
Continuez avec les traces numériques, les métadonnées, l'OSINT et les autres technologies étudiées dans le Cyber Lab.