Utiliser la console du navigateur pour déboguer les erreurs

Vérifié le 27 octobre 2026 6 min de lecture débogage navigateur

Quand un bouton ne fait rien, qu'un formulaire ne s'envoie pas ou qu'une page s'affiche mal, la cause apparaît presque toujours dans les outils de développement du navigateur. Tous ont les deux mêmes onglets que nous allons utiliser : Console et Réseau.

Ouvrir les outils

Firefox : Ctrl + Shift + K (Command + Option + K sur macOS) ouvre la Console.
Chrome et Edge : Ctrl + Shift + J (Command + Option + J sur macOS) ouvre la Console.
N'importe quel navigateur sous Windows ou Linux : F12 ouvre les outils ; choisissez ensuite l'onglet.
Safari : activez d'abord Safari > Réglages > Avancées > Afficher les fonctionnalités pour les développeurs web. Appuyez ensuite sur Command + Option + C.

Un panneau semblable à celui-ci s'ouvrira (sur la capture, Firefox) :

Console

La Console affiche les erreurs et avertissements de la page : erreurs JavaScript, ressources bloquées faute d'utiliser https, problèmes d'encodage, etc. Les erreurs apparaissent en rouge et les avertissements en jaune.

Pour trouver l'erreur qui vous intéresse :

Cliquez sur l'icône de la corbeille pour effacer les messages précédents.
Répétez une fois ce qui échoue (cliquer sur le bouton, envoyer le formulaire…).
Regardez la première erreur en rouge qui apparaît. À droite, vous avez le fichier et la ligne qui la provoquent.

Les messages les plus courants et leur signification :

Uncaught TypeError / Uncaught ReferenceError : une erreur dans un script. Le fichier à droite vous indique de quel plugin, thème ou module elle vient (par exemple wp-content/plugins/NOMBRE/...). Essayez de le mettre à jour ou de le désactiver.
Mixed Content : la page se charge en https mais une ressource (image, script, CSS) est demandée en http. Le navigateur la bloque. Passez cette URL en https dans la configuration ou le contenu du site.
blocked by CORS policy : le site essaie de lire des données d'un autre domaine qui ne l'autorise pas. Cela arrive souvent après un changement de domaine ou un passage de www à sans www : vérifiez que l'URL du site dans la configuration de l'application est bien celle que vous utilisez.
Failed to load resource: the server responded with a status of 404 (ou 403, 500) : un fichier n'a pas pu être chargé. Cherchez-le dans l'onglet Réseau pour voir lequel.

Si la page vous redirige vers une autre en cas d'erreur, cochez Journaux persistants (Firefox) ou Preserve log (Chrome) pour que les messages ne soient pas effacés.

Réseau

L'onglet Réseau affiche toutes les requêtes de la page : le HTML, les images, les scripts, les feuilles de style et les appels internes effectués par les boutons et formulaires. Pour chacune, vous voyez l'état, la méthode (GET ou POST), la taille et le temps qu'elle a pris. En bas apparaît le total de la page.

Pour l'utiliser :

Ouvrez l'onglet Réseau avant de reproduire le problème.
Cochez Désactiver le cache (Firefox) ou Disable cache (Chrome) pour voir le chargement réel.
Rechargez la page ou répétez l'action qui échoue.
Cherchez les lignes en rouge ou avec un état 4xx ou 5xx. Si c'est un bouton ou un formulaire qui échoue, filtrez par XHR (Firefox) ou Fetch/XHR (Chrome).
Cliquez sur la requête et ouvrez Réponse : elle contient souvent le message d'erreur complet.

Ce qu'indique chaque état :

404 : le fichier n'existe pas à ce chemin. Vérifiez l'URL ou envoyez-le.
403 : le serveur refuse l'accès. Il peut s'agir d'une permission de fichier, d'une règle du .htaccess ou du pare-feu.
500 : erreur de l'application sur le serveur. Le message exact se trouve dans le journal d'erreurs de PHP : activer le journal d'erreurs de PHP.
502, 503 ou 504 : le serveur a mis trop de temps ou était saturé. Regardez la colonne de temps.

Pour savoir pourquoi un site est lent, triez par la colonne Durée ou Taille : vous verrez quelle image pèse trop lourd ou quelle requête met plusieurs secondes.

Envoyer l'erreur à l'assistance

Si vous nous ouvrez un ticket, indiquez l'URL, l'heure, ce que vous avez fait et une capture de l'erreur de la Console ou de la requête dans Réseau avec sa Réponse. Avant de partager un fichier HAR exporté depuis Réseau, sachez qu'il contient vos cookies de session : une capture est préférable.

La Console permet aussi d'exécuter du code JavaScript. Ne collez jamais du code que quelqu'un vous demande par e-mail ou par chat : c'est une technique courante pour voler des sessions.