Diagnostiquer les erreurs JavaScript dans un navigateur

Si vous rencontrez des problèmes avec des fonctionnalités interactives, cela peut-être dû à des erreurs ou conflits JavaScript. Par exemple, le survol des menus est cassé, vous ne pouvez plus faire glisser les boîtes de métadonnées, ou les boutons d’ajout de médias ne fonctionnent plus. Afin de formuler votre demande d’aide, il vous sera utile de savoir quelle est l’erreur JavaScript qui provoque le problème.

Cet article vous aidera a diagnostiquer les problèmes liés à JavaScript dans différents navigateurs.

Étape 1 : essayer un autre navigateur

Pour s’assurer qu’il s’agit bien d’une erreur JavaScript et pas d’une erreur de navigateur, essayez d’abord de consulter votre site dans un autre navigateur.

  • si vous ne rencontrez plus la même erreur dans un navigateur différent, alors vous savez qu’elle est spécifique à un navigateur ;
  • si vous rencontrez toujours la même erreur, alors elle n’est pas spécifique à un seul navigateur ;

Notez les navigateurs sur lesquels l’erreur survient, vous pourrez transmettre cette information lorsque vous demanderez de l’aide.

Étape 2 : activer le débogage des scripts

Pour activer le débogage des scripts, ouvrez votre fichier wp-config.php et ajoutez la ligne suivante juste avant /* C’est tout, ne touchez pas à ce qui suit ! Bonne publication. */ :

define( 'SCRIPT_DEBUG', true );

Retournez sur votre site et vérifiez si l’erreur est toujours présente.

  • Si vous ne rencontrez plus l’erreur, désactivez le débogage des scripts en supprimant la ligne ajoutée précédemment, et reportez le problème sur le forum de support afin d’obtenir de l’aide ;
  • Si l’erreur est toujours présente, passez à l’étape 3.

Étape 3 : diagnostiquer

Afin de pouvoir résoudre et/ou demander de l’aide pour résoudre le problème rencontré, il est important de savoir le diagnostiquer.

Consultez votre site avec un navigateur sur lequel se produit l’erreur.

Firefox

  1. Ouvrez la console :
    Sur la page où se produit l’erreur, ouvrez le menu de Firefox : utilisez le raccourci Ctrl + Maj + K (Cmd + Option + K sous MacOS) ou allez dans le menu Développement web ou (Outils sous MacOS) puis Console web ;
  2. Identifiez l’erreur :
    La console devrait vous fournir le type de l’erreur, son emplacement (fichier), et le numéro de la ligne. Si aucune erreur ne s’affiche, essayez de recharger la page, l’erreur pourrait être générée à ce moment là.
Capture d'écran de la console de Firefox, dans l'éditeur, présentant une erreur JavaScript

Chrome

  1. Ouvrez la console :
    Sur la page où se produit l’erreur, utilisez le raccourci clavier Cmd + Option + J sous MacOS, ou Control + Shift + J sous Windows, Linux et Chrome OS, ou allez dans le menu Plus d’outils puis Outils de développement, et cliquez sur l’onglet Console.
  2. Identifiez l’erreur :
    La console devrait vous fournir le type de l’erreur, son emplacement (fichier), et le numéro de la ligne. Si aucune erreur ne s’affiche, essayez de recharger la page, l’erreur pourrait être générée à ce moment là.
Capture d'écran de la console de Chrome, dans l'éditeur, présentant une erreur JavaScript

Edge

Referez-vous aux instructions pour Chrome ci-dessus.

Internet Explorer

Gardez à l’esprit qu’Internet Explorer se comporte de manière très différente des autres navigateurs en ce qui concerne les erreurs JavaScript, et les signale de manière inégale. La première chose à vérifier lorsqu’on est confronté à un problème dans Internet Explorer est de savoir si le problème n’existe que dans celui-ci. Notez également que les outils de débogage intégrés dans certaines versions d’Internet Explorer sont limités et peuvent ne pas être disponibles.

  1. Ouvrez la console :
    Sur la page où se produit l’erreur, ouvrez le menu Réglages puis Outils de développement ou pressez la touche F12, et cliquez sur l’’onglet Console ;
ie_console1

2. Identifiez l’erreur :
La console devrait vous fournir le type de l’erreur, son emplacement (fichier), et le numéro de la ligne. Si aucune erreur ne s’affiche, essayez de recharger la page, l’erreur pourrait être générée à ce moment là.

ie_console2

Safari

1. Activez les outils de développement :

Rendez vous dans Safari > Préférences > Avancé et assurez-vous que la case Afficher le menu de développement soit cochée ;

Capture d'écran des options avancées de safari

2. Ouvrez la console :

Sur la page où se produit l’erreur, dans Safari, allez dans le menu Développement puis Afficher la console ;

3. Identifiez l’erreur :

La console devrait vous fournir le type de l’erreur, son emplacement (fichier), et le numéro de la ligne. Si aucune erreur ne s’affiche, essayez de recharger la page, l’erreur pourrait être générée à ce moment là.

debug_safari4

À noter : si vous ne voyez pas d’erreur, cliquez sur le bouton retour dans la console.

debug_safari3

Opera

  1. Ouvrez la console :
    Sur la page où se produit l’erreur, allez dans le menu Outils > Avancé > Console d’erreur ;
  2. Identifiez l’erreur :
    Une fois la console ouverte, sélectionnez JavaScript et Erreurs dans les deux sélecteurs. Pour trouver la source de l’erreur, ouvrez une des erreurs, vous verrez l’erreur et son emplacement ;
opera_console

Étape 4 : trouver de l’aide

Maintenant que vous avez diagnostiqué l’erreur, vous pouvez faire une demande d’’aide.

Si votre problème est lié a un thème ou une extension spécifique, vous pouvez accéder au support dédié en visitant la page de l’extension ou du thème, puis rendez-vous sur l’onglet Support (par exemple : https://wordpress.org/support/plugin/hello-dolly/).

Si votre problème n’est pas spécifique à un thème ou une extension, vous pouvez demander de l’aide sur le forum de support.

Lorsque vous décrirez votre problème, veuillez indiquer les informations suivantes :

  • le navigateur sur lequel l’erreur se produit ;
  • si le fait d’activer SCRIPT_DEBUG résout le problème ou non ;
  • l’erreur JavaScript affichée dans la console ;
  • l’emplacement de l’erreur : nom du fichier et numéro de ligne affiché dans la console ;
  • le contexte de l’erreur, y compris votre environnement complet (vous pouvez trouver un rapport complet dans votre tableau de bord, menu Outils > Santé du site puis dans l’onglet Informations).

Traduit par Marie Comet
Relu par Jb Audras & Jenny Dupuy
Dernière mise à jour le 2 janvier 2021

Contribuer à la documentation en français de WordPress