Les erreurs du navigateur ont été enregistrées dans la console

La plupart des navigateurs sont fournis avec des outils intégrés pour les développeurs. Ces outils pour les développeurs incluent généralement une console. La console vous fournit des informations sur la page en cours d'exécution.

Les messages enregistrés dans la console proviennent soit des développeurs Web qui ont créé la page, soit du navigateur lui-même. Tous les messages de la console présentent un niveau de gravité : Verbose, Info, Warning ou Error. Le message Error signifie que vous devez résoudre un problème sur votre page.

Échec de l'audit des erreurs du navigateur Lighthouse

Lighthouse signale toutes les erreurs de navigateur consignées dans la console:

Audit Lighthouse affichant les erreurs du navigateur dans la console

Corriger les erreurs liées au navigateur

Corrigez chaque erreur de navigateur signalée par Lighthouse pour vous assurer que votre page s'exécute comme prévu pour tous vos utilisateurs.

Les outils pour les développeurs Chrome incluent deux outils qui vous permettent d'identifier la cause des erreurs:

  • Sous le texte de chaque erreur, la console DevTools affiche la pile d'appel ayant entraîné l'exécution du code problématique.
  • Un lien en haut à droite de chaque erreur vous indique le code à l'origine de l'erreur.

Par exemple, cette capture d'écran montre une page comportant deux erreurs:

Exemple d'erreurs dans la console des outils pour les développeurs Chrome

Dans cet exemple, la première erreur provient d'un développeur Web lors d'un appel à console.error(). La deuxième erreur provient du navigateur et indique qu'une variable utilisée dans l'un des scripts de la page n'existe pas.

Sous le texte de chaque erreur, la console des outils de développement affiche la pile d'appel dans laquelle l'erreur apparaît. Par exemple, pour la première erreur, la console indique qu'une fonction (anonymous) a appelé la fonction init, qui a appelé la fonction doStuff. Cliquez sur le lien pen.js:9 en haut à droite de cette erreur pour afficher le code correspondant.

L'examen du code correspondant à chaque erreur de cette manière peut vous aider à identifier et à résoudre les éventuels problèmes.

Si vous ne parvenez pas à déterminer la cause d'une erreur, essayez de saisir le texte de l'erreur dans un moteur de recherche. Si vous ne trouvez pas de solution à votre problème, essayez de poser une question sur Stack Overflow.

Si vous ne pouvez pas corriger une erreur, envisagez de l'encapsuler dans une instruction try…catch pour indiquer explicitement dans le code que vous êtes au courant du problème. Vous pouvez également utiliser le bloc catch pour gérer l'erreur plus facilement.

Ressources