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 se glisser.

En règle générale, on peut dire que plus un outil vous donne de flexibilité, plus vous pouvez rencontrer 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 plug-in ouverte que vous pouvez utiliser pour ajouter des fonctionnalités au CMS ; vous disposez d’un serveur Web, d’un fournisseur d’hébergement, d’un système de gestion de base de données et d’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 incluent des performances lentes, un contenu incorrect ou endommagé, des messages d’erreur et, pire que tout : l’écran blanc de la mort (WSoD), ce qui signifie que votre site Web a planté et nécessite une attention immédiate.

Même un léger problème de performances – comme un retard de moins de 2 secondes – est quelque chose dont vous devriez vous préoccuper car il pourrait (et endommagera) votre stratégie de référencement et votre positionnement dans les résultats des moteurs de recherche. Et cela se traduit directement par de moins en moins de visiteurs chaque jour, car de nos jours, une réponse rapide est primordiale, en particulier pour les utilisateurs mobiles.

C’est pourquoi il est crucial d’avoir des outils que vous pouvez utiliser chaque fois que vous sentez 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é.

Qu’est-ce que le débogage ?

Le débogage est une tâche que les développeurs effectuent pour détecter et supprimer les erreurs (également appelées bogues) de leurs programmes. Cela se fait à l’aide d’outils spécialisés qui vous permettent de voir ce qui se passe à l’intérieur d’un programme pendant son exécution.

Parfois, la partie la plus difficile du travail de débogage consiste à déterminer le composant, la commande ou l’instruction précise qui provoque une erreur. Pour ce faire, les développeurs font comme un médecin qui doit poser un diagnostic : analyser les symptômes et, si nécessaire, réaliser quelques études pour identifier la source du problème. L’équivalent en développement logiciel des études médicales est un outil de surveillance qui fournit des informations sur le fonctionnement interne d’un site Web.

Voyons quelques options.

WP_DEBUG

WordPress a 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 dans 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 découvrirez peut-être ce qui ne fonctionne pas correctement sur votre site WordPress.

Pour activer WP_DEBUG, vous devez faire du codage, en éditant votre fichier wp-config.php et en ajoutant les lignes nécessaires pour commander à votre site Web d’enregistrer toutes les activités dans le journal. Cette tâche de codage n’est pas pour tout le monde : vous devez être très prudent lors de l’édition du fichier wp-config.php, car si vous égarez une ligne ou même un caractère, votre site Web peut cesser de fonctionner. Aussi, faites 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 utilisez 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, recherchez la ligne où WP_DEBUG est défini. Ça devrait ressembler à ça:

define( 'WP_DEBUG', false );

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

/* That’s all, stop editing! Happy blogging. */

et ajoutez les lignes suivantes au-dessus de ce commentaire. Ces commandes indiqueront à votre site de consigner 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);

Enregistrez le fichier modifié et, si vous utilisez 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 avec 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 modifiant les valeurs « true » en « false » dans toutes les lignes que vous avez ajoutées ou modifiées dans le fichier wp-config.php.

Rapport d’erreurs WPDB

Si vous savez ou soupçonnez que la base de données de votre site Web cause des problèmes, vous pouvez activer le rapport d’erreurs 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 de commencer à afficher les erreurs de base de données à l’écran.

Vous ne devriez pas faire cela sur un site Web en direct, sauf si vous ne vous souciez pas si vos visiteurs reçoivent des messages d’erreur sur leurs écrans. Il est préférable d’utiliser un site Web de mise en scène (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 ou journaux d’erreurs nécessite des connaissances techniques, tout comme il faut des connaissances médicales pour lire une radiographie, par exemple. Vous devrez déchiffrer du jargon de programmation, de mise en réseau ou de base de données, mais vous trouverez probablement le problème racine qui affecte votre site Web, puis obtenez l’aide de quelqu’un qui pourrait résoudre ce problème spécifique.

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

define( 'SAVEQUERIES', true);

En définissant cette valeur sur true, la base de données commencera à stocker toutes les requêtes effectuées par votre site Web. Ensuite, vous pourrez 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 consiste à ajouter ces lignes dans votre fichier PHP de thème au sein de votre flux d’exécution :

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

Une fois que vous avez terminé le débogage, vous devez supprimer ces lignes pour restaurer votre site Web à son fonctionnement normal.

Utiliser un site de développement

Un site Web intermédiaire est un clone de votre site Web actuel, où 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 Web intermédiaire pour déboguer les problèmes ou surveiller son comportement, car cela 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 qu’un site Web intermédiaire reflète exactement le contenu et la structure de votre site Web actuel. 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 staging avec une copie du site actuel. De cette façon, si un problème survient sur votre site Web en ligne, vous pourrez le répliquer sur votre environnement de staging.

De nombreux fournisseurs d’hébergement WordPress gérés proposent un site de staging comme valeur ajoutée à leurs forfaits payants. C’est le moyen le plus convivial d’avoir un environnement de mise en scène 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 intermédiaire en utilisant le Mise en scène WP brancher. Ce plugin facilite le clonage de votre site Web, puis l’utilisation du clone comme s’il s’agissait de la vraie chose. Vous saurez toujours quand vous êtes dans l’environnement de mise en scène car une barre orange en haut de l’écran vous le dira.

Si vous aimez vous salir les mains, vous pouvez toujours créer manuellement un site intermédiaire sur un sous-domaine, en supposant que votre fournisseur d’hébergement vous permette d’ajouter un sous-domaine à votre compte. Le processus de création du site intermédiaire 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ête

Son nom pourrait être trompeur car Moniteur de requête fait bien plus que surveiller les requêtes. Il s’agit d’un panneau de développement complet pour WordPress, permettant le débogage de scripts, de feuilles de style, d’appels d’API, de requêtes de base de données, d’erreurs PHP, etc. Certaines fonctionnalités avancées vous permettent de déboguer les appels Ajax et de vérifier les capacités de l’utilisateur.

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 les requêtes de base de données agrégées regroupées par les fonctions, plugins ou thèmes qui les ont déclenchées. Un menu de barre d’outils d’administration affiche les 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 qui provoque un dysfonctionnement. Tout comme WordPress, Query Monitor est entièrement gratuit et open-source.

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

Il est inévitable de comparer les outils de développement Firefox avec les outils de développement Chrome les plus populaires. Ce faisant, la mise en page solide de Firefox se démarque. Par exemple, vous pouvez cliquer avec le bouton droit sur n’importe quel élément pour afficher l’onglet Inspecteur, et la console Web offre une sortie riche lors de l’impression d’objets, affichant beaucoup plus d’informations que son nom. Il fournit des informations supplémentaires pour certains types, 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, ce qui vous permet 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 sur une page Web : JavaScript, requêtes réseau, CSS, avertissements, messages d’erreur et messages d’information explicitement consignés par le code JavaScript. Il vous permet également d’interagir avec une page Web en exécutant directement des expressions JavaScript dans le contexte de la page.

Nouvelle relique

En tant que l’un des plus grands acteurs de l’industrie APM (Application Performance Monitoring), Nouvelle relique est 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 a une architecture de plug-in qui permet des fonctionnalités supplémentaires par des tiers, ce qui se traduit par un spectre pratiquement infini de technologies pouvant être surveillées par cet outil.

Avec une fourchette de prix allant de 9,37 $ à 200 $ par hôte et par mois, il est destiné aux tâches de débogage professionnelles. Il comporte également une courbe d’apprentissage prolongée, donc en plus de dépenser de l’argent sur la solution, vous devez également investir du temps pour apprendre à l’utiliser. Les utilisateurs de New Relic apprécient le fait qu’il s’intègre facilement dans les applications d’APM et de monitoring des infrastructures.

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

Barre de débogage

Barre de débogage 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 publication, cron, les actions et les filtres, les transitoires, les requêtes à distance et les scripts de liste et les dépendances de style. C’est un plugin open-source, il peut donc être utilisé gratuitement.

Le plugin principal, Debug Bar, fournit la fonctionnalité de base, étendue par le reste des plugins. Il fonctionne avec les indicateurs de débogage intégrés proposés par WordPress, tels que WP_DEBUG et SAVEQUERIES. Lorsque ces indicateurs sont actifs, la barre de débogage ajoute des informations de débogage utiles, telles que des avertissements PHP et des requêtes MySQL, vous épargnant ainsi la recherche et la lecture des 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 du code PHP arbitraire, ce qui est excellent pour tester le contenu des variables (entre autres utilisations). Cron affiche des informations sur les événements planifiés de WordPress, tels que l’heure du prochain événement, le nombre d’événements planifiés, la liste des événements planifiés personnalisés, etc. Les actions et les filtres sont une autre option pour afficher les crochets attachés à la demande en cours. L’onglet Actions affiche les actions liées à la demande en cours, tandis que l’onglet Filtres affiche toutes les balises de filtre, ainsi que les fonctions attachées à chacune.

Débogage pour tous

Les outils de débogage sont principalement conçus pour les professionnels du développement logiciel. Mais même si vous n’êtes pas développeur, si vous ne faites que maintenir 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.

Apprenez quelques façons de gagner de l’argent en tant que professionnel WordPress.