Comment repérer les erreurs javascript de votre site avec google Chrome

Bonjour, aujourd’hui je vais vous expliquer comment repérer les erreurs JavaScript sur votre site internet.

Parfois on se retrouve avec un site internet sur lequel on a des choses qui ne fonctionnent pas et dans un certain pourcentage de cas, c’est dû à des erreurs JavaScript. Le problème c’est que si on ne sait pas les repérer, c’est très difficile de régler le problème. Donc ici, on est sur une boutique Prestashop que je viens d’installer et normalement dans cette partie, on doit avoir un slide show qui va nous faire défiler automatiquement les images de gauche à droite et on doit avoir ici deux petites flèches qui vont nous permettre de les faire défiler manuellement. Dans l’état, ce n’est pas le cas, on a simplement une image fixe et on essayer de comprendre pourquoi. L’astuce en fait pour repérer les erreurs JavaScript, c’est d’utiliser la console de Google Chrome. Donc là je suis sur le navigateur Google Chrome, vous cliquez sur F12 et là vous voyez apparaitre la console de Google Chrome. Alors vous avez différents onglets, il n’est pas obligatoire que vous arrivez sur l’onglet « console », vous pouvez être sur l’onglet « élément » par exemple « network » etc. Vous cliquez sur l’onglet « console » et là vous allez voir les erreurs qui apparaissent. Donc ici, on voit un certain nombre d’erreurs. Il faut savoir que les erreurs celle-ci « failed to load ressource » quand on voit l’URL Facebook, c’est dû essentiellement au plug-in Prestashop qui se trouve là. Pour le coup malheureusement, ça il faut le savoir, ce n’est pas lui qui va générer le problème en fait. Mais de toute façon, si on avait un doute, on pourrait aller dans l’administration de Prestashop et désactiver le module pour voir si déjà notre slide show remarcherait. Bon je le sais pertinemment que ce n’est pas ça, parce qu’en fait ce type d’erreurs apparait très souvent mais ne génère jamais aucun autre problème en fait. Donc il nous reste cette erreur là avec le message d’erreur ici et le fichier où elle a été détectée. Donc quand on clique sur le nom du fichier, on est redirigé directement sur la ligne où apparait l’erreur, ici. Donc c’est très intéressant parce que ça nous permet de voir tout de suite le fichier en question et la ligne en question donc on gagne beaucoup de temps. Ensuite il vous suffit d’aller ouvrir le fichier et de la corriger. Pour trouver plus rapidement le fichier, vous faites un clic droit dans le fichier et vous cliquez sur « reveal in navigator » et là il va vous afficher le fichier dans son arborescence. Là on voit bien qu’il se trouve dans « thème/defaut-bootstrap/JS/module/homeslider/JS/homesliderJS ». Donc maintenant il me reste plus qu’à corriger l’erreur en question. Donc j’ouvre mon logiciel qui me permet de traiter mes fichiers, vous pouvez utiliser n’importe quel logiciel de traitement de textes. J’utilise un IDE, vous pouvez utiliser Notepad+ et je vais dans les dossiers que m’a indiqué la console. Donc c’est à dire « thème/defaut-bootstrap/JS/module/homeslider/JS » et je trouve mon fichier. Mon erreur se trouvait à la ligne 50 et en effet, je constate que j’ai deux virgules l’une derrière l’autre donc je l’a supprime, je sauvegarde, je retourne sur mon site, je rafraichi et on peut voir que j’ai bien mes deux flèches qui me permettent de faire défiler et il défile automatiquement. Donc même si vous n’avez pas forcément les capacités pour débugger une erreur JavaScript parce que ça demande quand même des compétences en développement, cette technique va vous permettre notamment d’isoler le problème et par exemple de désactiver le module qui justement génère des erreurs. Là j’aurai très bien pu supprimer le module de slide show et aller en installer un autre ou le désactiver le temps de trouver quelqu’un capable de me le corriger.

Voilà, merci d’avoir regardé cette vidéo. N’hésitez pas à laisser votre avis et à poser des questions en utilisant les commentaires. Je vous invite à me suivre sur les réseaux sociaux comme Google+, Twitter et Facebook. Vous pouvez aussi retrouver d’autres informations notamment sur Prestashop sur mon blog et enfin vous pouvez également visiter ma boutique de vente de module ou de vous abonnez à ma chaine Youtube.

Merci, à bientôt.