Comment utiliser la console de votre navigateur pour trouver et résoudre les problèmes

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

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 &gt ; Console JavaScript
• Mozilla Firefox : sous le menu Outils, choisissez Développeur Web &gt ; Console Web
• Apple Safari : sous le menu Safari, choisissez Préférences &gt ; Avancé (onglet) &gt ; Cochez la case en bas intitulée “Afficher le menu Développer dans la barre de menu”. Ensuite, allez dans le menu Développer &gt ; “Afficher la console JavaScript”.
• Microsoft Edge : sous le menu Outils, choisissez Développeur &gt ; 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 ?

URLs relatives en supprimant toute la première partie jusqu’à la fin du domaine. Ex : /wp-content/subdir/monfichier.jpg

URLs non protocolaires en remplaçant le http:// par simplement //. Ex : //pubcatcher.ca/wp-content/subdir/monfichier.jpg

URLs absolues en remplaçant simplement http par https. Ex : https://pubcatcher.ca/wp-content/subdir/myfile.jpg

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 :

Vérifiez toujours les mises à jour du constructeur de pages et de ses addons (comme Ultimate Addons ou PowerPack pour BeaverBuilder). Ne vous fiez pas aux contrôles de mise à jour de WordPress : vérifiez manuellement les nouvelles versions directement sur le site Web du constructeur et installez celles que vous trouvez. Ensuite, videz le cache de votre serveur et de votre navigateur et testez à nouveau.

Si vous utilisez le plugin CrazyEgg WordPress, désactivez-le et réessayez d’utiliser le constructeur. Depuis la version 2.2, nous avons reçu des rapports indiquant que le plugin entre en conflit avec BeaverBuilder. Les développeurs de CrazyEgg ont probablement besoin d’exclure ?fl_builder afin que leurs scripts ne se chargent pas lorsque vous êtes dans le builder. (Ou, je suppose, exclure leurs scripts lorsqu’un administrateur est connecté).

Vérifiez dans votre panneau de contrôle d’hébergement la possibilité de modifier les valeurs de configuration PHP. max_input_vars de la valeur par défaut de 1000 à 5000 pour la plupart des outils de construction de pages intensifs (nous l’avons fixé à 5000 pour tous ceux qui sont hébergés chez nous). Recherchez également l’option memory_limit et modifiez-la en 256M ou 512M. Conseil : certains créateurs de pages, comme Divi, utilisent une quantité ridicule de variables d’entrée et peuvent exiger que cette valeur soit fixée à 10000 ou même 15000. De même, Divi requiert souvent 512M de mémoire (pas étonnant que l’enregistrement soit lent).

Vérifiez les erreurs 403 dans les journaux en utilisant notre guide ici. Si vous êtes hébergé chez nous, ce guide vous montrera également comment désactiver temporairement le pare-feu mod_security ou exclure la règle incriminée pour contourner cette erreur.

Si le problème n’est pas résolu en augmentant les valeurs de configuration de PHP ou en identifiant les conflits de pare-feu, l’option restante est d’utiliser la section ci-dessous pour résoudre des erreurs JavaScript spécifiques.

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 !