DevTools n'est pas réservé aux programmeurs
Vous avez probablement entendu parler des "Developer Tools" (DevTools) et supposé que c'était réservé aux programmeurs. Mais la vérité est que many fonctionnalités de DevTools fonctionnent sans aucune connaissance en programmation. Imaginez ces scénarios :- Vous ouvrez un site web et la page est vide — vous voulez savoir si le site est en panne ou si c'est votre réseau
- Vous remplissez un formulaire, cliquez sur envoyer, et rien ne se passe — vous voulez savoir si le bouton est cassé ou si le serveur ne l'a jamais reçu
- Vous voyez une mise en page étrange sur une page — vous voulez savoir s'il s'agit d'un problème de navigateur ou d'un bug dans le code du site
Étape 1 : Comment ouvrir DevTools
Chrome / Edge
Trois façons, choisissez la plus confortable :F12 ou Ctrl + Shift + I (Mac : Cmd + Option + I)Firefox
F12 ou Ctrl + Shift + ISafari
Activez d'abord le menu Développement : Safari → Préférences → Avancées → cochez "Afficher le menu Développement dans la barre des menus"Cmd + Option + IVous n'avez besoin de connaître que 3 onglets
DevTools a une douzaine d'onglets, mais les non-développeurs n'en ont besoin que de trois :| Onglet | Ce qu'il fait | Ce pour quoi vous pouvez l'utiliser |
|---|---|---|
| Console | Affiche les erreurs et avertissements du site | Savoir si le code du site a erreur |
| Network | Affiche toutes les requêtes réseau | Savoir si images/API/ressources ont échoué à charger |
| Elements | Affiche le HTML et le CSS de la page | Inspecter le style et la position d'un élément |
L'onglet Console : lire les messages d'erreur rouges
Qu'est-ce que la Console
La Console est la "boîte noire" du site. Lorsque le code du site erreur, le navigateur le journalise ici. Considérez-la comme un témoin d'alerte de voiture — vous n'avez pas besoin de comprendre comment le moteur fonctionne, mais vous devez savoir quelle lumière est allumée.Rouge = Erreur, Jaune = Avertissement
- 🔴 Message rouge : Une erreur s'est produite, attention
- 🟡 Message jaune : Un avertissement, problème possible mais non fatal
- 🔵 Message bleu/blanc : Journal ordinaire, ignorer en toute sécurité
Comment lire un message d'erreur
Après avoir ouvert la Console, vous pourriez voir un texte rouge comme celui-ci :
Uncaught TypeError: Cannot read properties of undefined (reading 'map')
at ProductList.jsx:47:18
| Partie | Signification | Sur quoi vous concentrer |
|---|---|---|
TypeError |
Erreur de type | Type d'erreur |
Cannot read properties of undefined |
A tenté de lire des données inexistantes | Description du problème (traduisez simplement) |
ProductList.jsx:47:18 |
Où ça a échoué : nom de fichier ligne 47, colonne 18 | Dites au développeur où corriger |
Types d'erreurs courants (traduits)
| Erreur anglaise | Signification française | Cause possible |
|---|---|---|
TypeError |
Erreur de type | Format de données incorrect ; le code attendait un objet mais a reçu vide |
ReferenceError |
Erreur de référence | Le code a utilisé une variable ou fonction inexistante |
SyntaxError |
Erreur de syntaxe | Syntaxe de code erronée que le navigateur ne peut pas analyser |
RangeError |
Erreur de plage | Une valeur a dépassé la plage autorisée |
Network Error |
Erreur réseau | La requête n'a jamais atteint le serveur |
404 Not Found |
Introuvable | La ressource demandée n'existe pas |
500 Internal Server Error |
Erreur interne du serveur | Un bug dans le code du serveur |
Les 5 problèmes Console les plus courants
1. Page vide + TypeError La page se charge vide, la Console affiche un TypeError rouge. Généralement un crash JavaScript a empêché le rendu. 2. Une fonction ne répond pas + ReferenceError Cliquez sur un bouton, rien ne se passe, la Console affiche un ReferenceError rouge. Généralement le code associé n'a pas été chargé correctement. 3. Données non affichées + TypeError: Cannot read properties of undefined Une zone de liste ou de tableau est vide, la Console a cette erreur. Généralement le backend a renvoyé des données dans un format inattendu par le frontend. 4. Partie de la page vide + erreur 404 Certaines images ou composants ne s'affichent pas, la Console a une erreur 404. Le chemin de la ressource est incorrect ou le fichier a été supprimé. 5. Chargement très lent + beaucoup d'avertissements jaunes La page se charge lentement, la Console a beaucoup d'avertissements jaunes. Possiblement trop de ressources inutiles chargées, ou un problème de performance.L'onglet Network : repérer les ressources en échec
Qu'est-ce que Network
L'onglet Network enregistre chaque requête réseau que la page fait pendant le chargement — images, CSS, JavaScript, points d'API, fichiers de police, tout ce qui est récupéré depuis le serveur.Comment l'utiliser
F5)Codage couleur
| Couleur | Signification |
|---|---|
| Rouge | Requête échouée (erreur 4xx/5xx) |
| Gris | Requête bloquée ou annulée |
| Autres couleurs | Requête réussie |
Focus : codes de statut
Chaque requête a un code de statut — l'indice le plus direct du problème :| Statut | Signification | Ce que vous voyez |
|---|---|---|
| 200 | Succès | Tout normal |
| 301/302 | Redirection | Redirigé vers une autre adresse |
| 400 | Requête incorrecte | Format de données de formulaire erroné |
| 401 | Non autorisé | Nécessite une connexion mais non connecté |
| 403 | Interdit | Pas la permission pour cette ressource |
| 404 | Introuvable | Image/page/API n'existe pas |
| 429 | Trop de requêtes | Limité, réessayez plus tard |
| 500 | Erreur interne du serveur | Un bug dans le code du serveur |
| 502 | Mauvaise passerelle | Serveur surchargé ou en maintenance |
| 503 | Service indisponible | Serveur ne peut temporairement pas traiter les requêtes |
Exercice : diagnostiquer "image ne charge pas" avec Network
Img (images uniquement)- 404 → chemin d'image incorrect ou image supprimée
- 500 → le serveur a erreur en traitant la requête d'image
- Aucune requête correspondante → l'URL de l'image n'a jamais été demandée (probablement un problème de code frontend)
Exercice : diagnostiquer "soumission de formulaire ne fait rien" avec Network
L'onglet Elements : inspecter les styles d'élément
Qu'est-ce que Elements
L'onglet Elements affiche la structure HTML et les styles CSS de la page. Vous pouvez l'utiliser pour inspecter les attributs, styles et position d'un élément.Fonction la plus utile : Inspecter l'élément
Ce que les non-développeurs peuvent faire avec
Vérifier pourquoi une image s'affiche mal :- Trouvez la balise
<img>
- Vérifiez l'attribut
src— l'URL de l'image est-elle correcte ?
- Vérifiez
widthetheight— les dimensions sont-elles contraintes ?
- Trouvez l'élément de texte
- Vérifiez la propriété CSS
overflow— est-elle définie surhidden?
- Vérifiez
white-spaceettext-overflow— limitent-ils les retours à la ligne ?
- Trouvez l'élément bouton
- Vérifiez le CSS
z-index— est-il couvert par un autre élément ?
- Vérifiez
pointer-events— le clic est-il désactivé ?
- Vérifiez
displayetvisibility— est-il masqué ?
Note : les modifications dans Elements sont temporaires
Tout style que vous changez dans l'onglet Elements revient après l'actualisation de la page. C'est uniquement pour le débogage et ne changera pas réellement le site. Expérimentez librement — vous ne pouvez rien casser.5 cas réels
Cas 1 : Page vide
Symptôme : Ouvrez le site, la page est vide Diagnostic :TypeError rougeCas 2 : Image affichée comme icône cassée
Symptôme : Une image sur la page s'affiche comme icône cassée ou zone vide Diagnostic :srcCas 3 : Soumission de formulaire ne fait rien
Symptôme : Remplissez le formulaire, cliquez envoyer, aucun retour Diagnostic :ReferenceError: submitForm is not defined rougeCas 4 : Page se charge très lentement
Symptôme : Ouvrir la page prend plus de 10 secondes Diagnostic :Cas 5 : Mise en page mobile cassée
Symptôme : Sur mobile, les boutons et le texte se chevauchent Diagnostic :Ctrl + Shift + M pour basculer en mode émulation d'appareil@media — constatez que l'adaptation mobile manqueExiste-t-il un moyen plus simple ?
Si ouvrir DevTools, chercher la Console, trouver Network et copier les messages d'erreur vous semble encore trop — il y a un moyen plus simple. BugCapturer peut faire tout cela automatiquement pour vous. Lorsque vous faites une capture et envoyez un retour avec BugCapturer, il collecte automatiquement :- Erreurs de console : jusqu'à 10 journaux de niveau erreur (avec nom de fichier et numéro de ligne)
- Requêtes réseau échouées : jusqu'à 5 requêtes avec statut ≥ 400 (avec URL, méthode, code de statut)
- Informations d'environnement technique : URL, navigateur, OS, résolution d'écran, taille du viewport, DPR