7 outils de débogage WordPress pour le dépannage

Même si WordPress est un environnement contrôlé, où les erreurs sont beaucoup moins fréquentes que dans un environnement de développement logiciel typique, il y a toujours une fenêtre ou une porte par laquelle les problèmes peuvent s’infiltrer.

En règle générale, on peut dire que plus un outil est flexible, plus il y a d’erreurs potentielles.

Dans le cas particulier de WordPress, il y a beaucoup de flexibilité, et donc beaucoup d’erreurs potentielles. Vous disposez d’une architecture de plugins ouverte que vous pouvez utiliser pour ajouter des fonctionnalités au CMS ; vous avez un serveur web, un fournisseur d’hébergement, un système de gestion de base de données et un réseau. Tous ces composants sont des facteurs indépendants qui contribuent à leur part de problèmes potentiels.

Les types de problèmes que vous pouvez rencontrer sont les suivants : lenteur des performances, contenu incorrect ou endommagé, messages d’erreur et, pire que tout : l’écran blanc de la mort (WSoD), qui signifie que votre site web est tombé en panne et qu’il nécessite une attention immédiate.

Même un léger problème de performance, tel qu’un délai de moins de deux secondes, doit vous préoccuper, car il pourrait nuire (et nuira) à votre stratégie de référencement et à votre positionnement dans les résultats des moteurs de recherche. Et cela se traduit directement par une diminution du nombre de visiteurs chaque jour, car de nos jours, une réponse rapide est essentielle, en particulier pour les utilisateurs mobiles.

C’est pourquoi il est essentiel de disposer d’outils que vous pouvez utiliser chaque fois que vous avez l’impression que votre site web ne fonctionne pas correctement. Et même si c’est le cas, il est toujours possible d’améliorer ses performances ou sa convivialité.

Voyons quelques options.

WP_DEBUG

WordPress dispose d’une aide au débogage intégrée qui est souvent négligée. Il s’agit d’un “drapeau” appelé WP_DEBUG qui déclenche le mode de débogage de WordPress chaque fois qu’il est activé. Lorsque vous activez WP_DEBUG, un journal est généré qui enregistre toute l’activité de votre site web. En lisant ce journal, vous pouvez découvrir ce qui ne fonctionne pas correctement sur votre site WordPress.

Pour activer WP_DEBUG, vous devez faire un peu de codage, en éditant votre fichier wp-config.php et en ajoutant les lignes nécessaires pour ordonner à votre site web d’enregistrer toute l’activité dans le journal. Cette tâche de codage n’est pas à la portée de tout le monde : vous devez faire très attention lorsque vous éditez le fichier wp-config.php, car si vous égarez une ligne ou même un caractère, votre site web peut s’arrêter de fonctionner. Faites également une sauvegarde de votre site/fichiers avant de faire quoi que ce soit. Si vous vous trompez, vous pouvez restaurer la sauvegarde et tout ramener à la normale.

Pour modifier le fichier wp-config.php, utilisez le gestionnaire de fichiers de votre hébergeur ou un client FTP pour télécharger le fichier et l’ouvrir localement avec votre éditeur de texte préféré. Le fichier se trouve dans le répertoire principal de votre installation WordPress. Après l’avoir ouvert, localisez la ligne où WP_DEBUG est défini. Elle doit ressembler à ceci :

define('WP_DEBUG', false ) ;

Si cette ligne n’existe pas, recherchez le commentaire suivant :

/* C'est tout, arrêtez d'éditer ! Bon blogging. */

et ajoutez les lignes suivantes au-dessus de ce commentaire. Ces commandes demanderont à votre site d’enregistrer toutes les erreurs sans les afficher, ce qui est utile pour les sites web accessibles au public :

define('WP_DEBUG', true) ; 
define('WP_DEBUG_LOG', true) ; 
define('WP_DEBUG_DISPLAY', false) ; 
@ini_set('display_errors',0) ;

Sauvegardez le fichier modifié, et si vous utilisez le FTP, téléchargez-le sur votre site. Essayez ensuite de provoquer l’erreur (ou attendez qu’elle se produise) et vérifiez le fichier debug.log. Vous le trouverez dans le dossier wp-content de votre installation WordPress. Vous pouvez l’ouvrir à l’aide d’un éditeur de texte et rechercher les messages d’erreur qui révèlent ce qui cause des problèmes à votre site web.

Après cela, vous devez désactiver la journalisation en remplaçant les valeurs “true” par “false” dans toutes les lignes que vous avez ajoutées ou modifiées dans le fichier wp-config.php.

Rapport d’erreur WPDB

Si vous savez ou soupçonnez que la base de données de votre site web pose des problèmes, vous pouvez activer le rapport d’erreur WPDB. Cela nécessite également un peu de codage. Une fois que vous avez activé le rapport d’erreurs, vous pouvez demander à votre site web d’afficher les erreurs de base de données à l’écran.

Vous ne devriez pas faire cela sur un site web en ligne, sauf si vous ne vous souciez pas que vos visiteurs reçoivent des messages d’erreur à l’écran. Il est préférable d’utiliser un site de démonstration (comme décrit ci-dessous) où vous pouvez tester tout ce que vous voulez sans laisser tout le monde voir ce qui se passe sous le capot.

La lecture de ces rapports d’erreur ou de ces journaux nécessite des connaissances techniques, tout comme il faut des connaissances médicales pour lire une radiographie, par exemple. Vous devrez déchiffrer le jargon de la programmation, du réseau ou de la base de données, mais vous trouverez probablement le problème de base qui affecte votre site web, puis vous obtiendrez l’aide de quelqu’un qui peut résoudre ce problème spécifique.

Pour commencer à générer des rapports d’erreurs de base de données, ajoutez la ligne suivante à votre fichier wp-config.php (de la même manière que celle expliquée précédemment pour générer le journal de débogage) :

define('SAVEQUERIES', true) ;

En définissant cette valeur à true, la base de données commencera à stocker toutes les requêtes effectuées par votre site web. Vous serez alors en mesure d’inspecter le nombre de requêtes causées par chaque demande de page et les commandes utilisées dans chacune d’elles. Une façon d’afficher les requêtes à l’écran est d’ajouter ces lignes dans le fichier PHP de votre thème, à l’intérieur de votre flux d’exécution :

global $wpdb ; 
print_r( $wpdb->queries ) ;

Une fois le débogage terminé, vous devez supprimer ces lignes pour rétablir le fonctionnement normal de votre site web.

Utiliser un site de test

Un site de test est un clone de votre site web actuel, sur lequel vous pouvez tester des modifications ou de nouvelles fonctionnalités avant de les mettre en ligne. C’est également une bonne idée d’utiliser un site de démonstration pour déboguer des problèmes ou surveiller son comportement, car il vous donne la liberté d’essayer tout ce que vous voulez sans interférer avec les utilisateurs réels de votre site web.

Il est important que le site de démonstration reflète exactement le contenu et la structure de votre site réel. Chaque fois que vous mettez à jour votre site WordPress avec un nouveau contenu ou de nouveaux addons (principalement des plugins et des thèmes), vous devez actualiser votre site de démonstration avec une copie du site réel. De cette manière, si un problème survient sur votre site en ligne, vous serez en mesure de le reproduire sur votre environnement de test.

De nombreux fournisseurs d’hébergement WordPress infogéré proposent un site de test comme valeur ajoutée à leurs offres payantes. C’est la façon la plus conviviale d’avoir un environnement de test où vous pouvez jouer et essayer des choses sans risque. Mais si votre hébergeur ne vous offre pas cette possibilité, vous pouvez créer un site de test en utilisant le plugin WP Staging. Ce plugin permet de cloner facilement votre site web et d’utiliser le clone comme s’il s’agissait d’un vrai site. Vous saurez toujours que vous vous trouvez dans l’environnement de test, car une barre orange en haut de l’écran vous l’indiquera.

Si vous aimez vous salir les mains, vous pouvez toujours créer manuellement un site de test sur un sous-domaine, à condition que votre hébergeur vous permette d’ajouter un sous-domaine à votre compte. Le processus de création d’un site de test de cette manière peut être un peu délicat, donc si vous êtes un débutant WordPress, vous voudrez peut-être utiliser une autre option.

Moniteur de requêtes

Son nom peut être trompeur car Query Monitor fait bien plus que surveiller les requêtes. Il s’agit d’un panneau de développement complet pour WordPress, qui permet de déboguer les scripts, les feuilles de style, les appels API, les requêtes de base de données, les erreurs PHP, et bien plus encore. Certaines fonctionnalités avancées vous permettent de déboguer les appels Ajax et de vérifier les capacités des utilisateurs.

Une fois que vous l’avez installé et activé, Query Monitor commence à afficher des informations sur le comportement de votre site Web de la manière la plus utile.

Par exemple, il affiche des requêtes de base de données agrégées groupées par les fonctions, les plugins ou les thèmes qui les ont lancées. Un menu de la barre d’outils de l’administrateur affiche des statistiques en direct de la page actuelle, avec toutes les informations de débogage dont vous pourriez avoir besoin pour évaluer le problème que vous devez résoudre.

En utilisant Query Monitor, vous pouvez affiner progressivement votre recherche de bogues par plugin ou thème, jusqu’à ce que vous trouviez celui qui dégrade les performances de votre site web ou provoque un dysfonctionnement. Tout comme WordPress, Query Monitor est entièrement gratuit et open-source.

Outils de développement Firefox

Anciennement connu sous le nom de Firebug, Firefox Developer Tools est une version spéciale de Firefox conçue pour les développeurs, offrant les dernières fonctionnalités et outils de développement. Il n’est pas spécifique à WordPress, mais il s’avère très utile pour déboguer les sites web.

Il est inévitable de comparer Firefox Developer Tools avec le plus populaire Chrome DevTools. Ce faisant, l’agencement solide de Firefox se démarque. Par exemple, vous pouvez faire un clic droit sur n’importe quel élément pour faire apparaître l’onglet inspecteur, et la console web offre une sortie riche lors de l’impression des objets, montrant beaucoup plus d’informations que leur simple nom. Elle fournit des informations supplémentaires pour certains types d’objets, permettant un examen détaillé des propriétés de l’objet et fournissant des informations plus riches pour les éléments DOM.

Avec l’outil Inspecteur, vous pouvez examiner et modifier les pages HTML et CSS, vous permettant de le faire avec des pages chargées localement sur Firefox ou sur un appareil distant, comme Firefox pour Android.

La Console Web affiche toutes les informations dont vous pourriez avoir besoin à propos d’une page web : JavaScript, requêtes réseau, CSS, avertissements, messages d’erreur et messages d’information explicitement enregistrés par le code JavaScript. Elle vous permet également d’interagir avec une page web en exécutant directement des expressions JavaScript dans le contexte de la page.

New Relic

New Relic est l’un des plus grands acteurs de l’industrie APM (Application Performance Monitoring). Il s’agit d’un produit commercial que des milliers de développeurs du monde entier utilisent quotidiennement pour obtenir des informations sur les performances de leurs produits logiciels. Il dispose d’une architecture de plugins qui permet à des tiers d’ajouter des fonctionnalités, ce qui se traduit par un spectre pratiquement infini de technologies pouvant être surveillées par cet outil.

Avec un prix allant de 9,37 $ à 200 $ par hôte et par mois, il est destiné à des tâches de débogage professionnelles. Il comporte également une courbe d’apprentissage étendue, de sorte qu’en plus de dépenser de l’argent pour la solution, vous devez également investir du temps pour apprendre à l’utiliser. Les utilisateurs de New Relic apprécient le fait qu’il soit facilement intégré dans les applications d‘APM et de surveillance de l’infrastructure.

Kinsta vous permet d’intégrer New Relic facilement à partir de leur tableau de bord MyKinsta.

Debug Bar

Debug Bar est un ensemble de plugins accessibles via un menu de débogage sur la barre d’administration de WordPress, qui affiche une grande variété d’informations de débogage. Ses options incluent la console, les shortcodes, les constantes, les types de messages, le cron, les actions et les filtres, les transitoires, les requêtes à distance, et la liste des scripts et des dépendances de style. Il s’agit d’un plugin open-source, qui peut donc être utilisé gratuitement.

Le plugin principal, Debug Bar, fournit les fonctionnalités de base, étendues par le reste des plugins. Il fonctionne avec les drapeaux de débogage intégrés proposés par WordPress, tels que WP_DEBUG et SAVEQUERIES. Lorsque ces drapeaux sont actifs, Debug Bar ajoute des informations de débogage utiles, telles que les avertissements PHP et les requêtes MySQL, vous évitant ainsi de rechercher et de lire les fichiers journaux.

Chaque option du menu de la barre de débogage fournit sa part de puissance de débogage. La console, par exemple, fournit une console dans laquelle vous pouvez exécuter un code PHP arbitraire, ce qui est excellent pour tester le contenu des variables (entre autres utilisations). Cron affiche des informations sur les événements programmés de WordPress, comme l’heure du prochain événement, le nombre d’événements programmés, la liste des événements programmés personnalisés, etc. Actions et Filtres sont une autre option pour afficher les crochets attachés à la requête en cours. L’onglet Actions affiche les actions liées à la requête en cours, tandis que l’onglet Filtres affiche toutes les balises de filtrage, ainsi que les fonctions liées à chacune d’entre elles.

Débogage pour tous

Les outils de débogage sont principalement conçus pour les professionnels du développement de logiciels. Mais même si vous n’êtes pas un développeur, si vous maintenez simplement un blog WordPress, il est utile d’avoir au moins une connaissance de base sur la façon de surveiller et de déboguer votre site. Ce faisant, vous pouvez donner à un développeur des informations qui l’aideront à trouver la source d’un problème, de la même manière que, si vous vous sentez mal, vous pouvez épargner du travail à votre médecin en prenant vous-même votre température avant d’aller à l’hôpital.

Découvrez quelques moyens de gagner de l’argent en tant que professionnel de WordPress.