'. strftime('%A %d %B') .'️ ⬅️ '; if( !empty($nom_product) ){ $cta = '➡️ '.$nom_product.' EN PROMO AUJOURD\'HUI '. strftime('%d %B') .'️ ⬅️ '; } ?>
La console du navigateur est l’un des composants de l’outil Web Inspector qui est inclus dans la plupart des navigateurs de bureau. Les développeurs utilisent la console pour déboguer les erreurs Javascript ainsi que le code HTML et CSS. Elle est incroyablement pratique pour aider à circonscrire les problèmes, en particulier ceux de ce type :
- Les erreurs qui n’apparaissent pas immédiatement au chargement de la page, mais qui se produisent plutôt après le chargement de la page. Que ce soit après un certain temps ou après avoir interagi avec quelque chose d’autre sur la page. Par exemple, un bouton qui ne fonctionne pas.
- Problèmes de rendu de la page, tels que des images manquantes, des styles (couleurs, mise en page, etc.) ou des iframes comme Google Maps intégré.
- Problèmes ou pépins avec les constructeurs de sites Web et les éditeurs visuels de constructeurs de pages comme BeaverBuilder, Elementor ou Divi.
- Spécificité de Beaver Builder : vous recevez une erreur disant “Beaver Builder a détecté un conflit de plugin qui empêche l’enregistrement de la page”. ( En termes techniques, il s’agit probablement d’une erreur PHP en Ajax. )
- Quelques types de conflits de plugins WordPress
- Avertissements concernant le contenu mixte
Contenus
Comment accéder à la console de votre navigateur
Voici comment accéder à la console de votre navigateur dans les principaux navigateurs. Si votre navigateur ne figure pas dans la liste, vous pouvez toujours trouver la réponse à cette question dans la base de connaissances du développeur.
- Google Chrome: sous le menu Affichage, choisissez Développeur > ; Console JavaScript
- Mozilla Firefox : sous le menu Outils, choisissez Développeur Web > ; Console Web
- Apple Safari : sous le menu Safari, choisissez Préférences > ; Avancé (onglet) > ; Cochez la case en bas intitulée “Afficher le menu Développer dans la barre de menu”. Ensuite, allez dans le menu Développer > ; “Afficher la console JavaScript”.
- Microsoft Edge : sous le menu Outils, choisissez Développeur > ; JavaScript Console
Voici à quoi ressemble chacun d’entre eux. Ils sont tous très similaires.
Chrome
Firefox
Safari
Edge
Consoles de navigation dans chaque navigateur principal
La plupart des avertissements (à l’exception des avertissements relatifs aux contenus mixtes) sont peu susceptibles d’avoir un effet sur la fonctionnalité du site web, vous pouvez donc simplement les ignorer, sauf si vous n’avez absolument aucune autre piste (comme les erreurs).
Gestion des erreurs de serveur
Si vous voyez des erreurs du type “Le serveur a répondu avec un état de XXX”, comparez ce code d’erreur HTTP (les trois chiffres) avec les erreurs répertoriées ci-dessous pour un dépannage plus approfondi :
- 403 : Il s’agit soit d’une erreur de permissions, soit d’un blocage du pare-feu. Consultez notre guide pour visualiser et interpréter les journaux de votre serveur Web.
- 404 : Soit le fichier est manquant et la solution est de s’assurer que le fichier référencé existe au chemin fourni, soit notre guide pour résoudre les feuilles de style ou les fichiers javascript manquants devrait vous aider.
- 50x (ou tout autre) : Consultez notre guide sur l’affichage et l’interprétation des journaux de votre serveur Web.
Résolution des avertissements de contenu mixte
Cela signifie qu’une partie du contenu de la page provient d’une variation de l’URL avec laquelle vous accédez au site. Par exemple, si vous visitez le site à l’adresse https://pubcatcher.ca mais que les images sont chargées à partir de http://www.pubcatcher.ca, le protocole (http ou https) et le domaine (pubcatcher.ca ou www.pubcatcher.ca) sont différents. La raison la plus courante des erreurs de contenu mixte est le différentiel d’URL HTTP ou HTTPS sur des ressources comme les photos. Recherchez les erreurs et/ou les avertissements de ce type :
[Warning] La page de https://your_url/ a été autorisée à afficher du contenu non sécurisé provenant de http://your_url/wp-content/uploads/2015/12/web-design.jpg. (votre_url, ligne 857)
Ils indiquent les fichiers qui ne sont pas chargés via HTTPS. Vous devrez trouver où chacun des éléments de contenu énumérés (photo, javascript, fichier css, etc.) est chargé dans le code du site Web ou dans l’éditeur du site Web, comme l’administration de WordPress (par exemple : sur une page ? dans les paramètres du thème ? dans les paramètres du plug-in ?
Ou, si vous utilisez WordPress, vous pouvez choisir la solution de facilité et utiliser un plugin qui force automatiquement le passage à https.
Correction des problèmes d’enregistrement du Page Builder
Si vous rencontrez une erreur lors de l’enregistrement de pages avec un constructeur de pages comme Divi, Beaver Builder ou Elementor, la console du navigateur peut vous aider à résoudre ces erreurs. Mais avant de plonger dans la console pour trouver une solution, il est préférable d’essayer de la réparer avec des solutions plus simples comme :
Déterminer les erreurs JavaScript
C’est une question plus délicate. Si vous voyez des erreurs JavaScript, elles indiquent le fichier .js dans lequel l’erreur se produit et sur quelle ligne. Toutefois, si le JavaScript est réduit ou optimisé, même un développeur expérimenté ne sera pas toujours en mesure de repérer clairement l’erreur.
Conseil : si vous utilisez un CMS comme WordPress, connectez-vous à l’administration avant d’essayer de reproduire l’erreur. Vous obtiendrez probablement des erreurs plus lisibles, ou au moins des chemins d’accès clairs au fichier JavaScript, lorsque vous êtes connecté.
La meilleure étape suivante consiste à essayer de déterminer d’où provient le code JavaScript. Par exemple, si vous utilisez WordPress et que la console indique que le fichier .js se trouve dans wp-content/plugins/bb-plugin/, alors le JavaScript fait partie de BeaverBuilder. Si vous continuez à lire le chemin d’accès au fichier, cela peut même vous indiquer de quel module spécifique de BeaverBuilder provient l’erreur.
De cette façon, vous pouvez vérifier s’il existe une mise à jour spécifique pour le plugin qui signale l’erreur JavaScript qui pourrait résoudre le problème, ou au moins vous aurez une erreur JavaScript très spécifique à signaler aux développeurs du plugin.
Vous rencontrez une erreur dans votre console JavaScript que ce guide n’a pas abordée ? Faites-nous en part dans les commentaires !