Découvrez le plugin Query Monitor
Vous vous rappelez quand je vous ai dit qu’on pouvait utiliser des plugins pour analyser un bug plus en détail ?
Eh bien, je vous présente Query Monitor. C’est un plugin qui va nous aider à débugger WordPress et améliorer sa performance. En plus d’être 100 % gratuit, il s'intègre parfaitement dans l’interface admin de WordPress, comme un plugin dans Google Chrome.
En gros, Query Monitor permet d’analyser :
les requêtes de base de données, notamment en nous montrant les requêtes de certaines extensions spécifiques ;
les erreurs PHP ;
l’utilisation de la mémoire ;
les appels d’API HTTP ;
les scripts et styles en file d’attente, y compris les dépendances ;
les hooks et actions ;
les fichiers de modèle de thème ;
les langues et traductions ;
les règles de réécriture ;
les blocs de l’éditeur de blocs ;
les informations générales sur l’environnement ;
les variables globales dans les écrans d’administration de WordPress.
L’ensemble des informations fournies par le plugin se réfèrent à la page dans laquelle vous l’avez lancé. Ces informations serviront de faisceau d’indices pour l’analyse que l’on peut être amené à faire, pour :
débugger ;
améliorer la performance du site ;
développer un thème ou une fonctionnalité.
Maintenant que vous comprenez un peu plus à quoi sert Query Monitor, nous allons l’installer sur notre site WordPress. Pour cela, il suffit d’aller dans le back office, dans la section “Extensions/Ajouter”, puis de rechercher le plugin “Query Monitor”, édité par John Blackbourn.
Activez le plugin. Vous constaterez que le plugin est bien activé quand vous aurez une inscription similaire à “0,46S 34,1 Mo 0,02S 29Q” dans l’admin bar en haut des pages.
Utilisez Query Monitor
Query Monitor est un plugin que je qualifierai de couteau suisse, car il permet d’analyser pas mal d’éléments liés au chargement d’une page WordPress.
Découvrons ensemble toutes les possibilités :
Voyons maintenant les informations que nous pouvons analyser dans le cas de notre projet.
Analysez les résultats
Imaginons que nous souhaitions analyser en détail notre site pour savoir ce qui est possible, et ainsi connaître les points d’amélioration possibles. Dans le cadre de ces analyses, je prendrai en référence la page d’accueil.
Indicateurs généraux
La vue d’ensemble contient quelques informations pertinentes à analyser :
Temps de génération de la page : permet de voir le temps de chargement de la page avec PHP. Si l’on dépasse une certaine limite (définie par la configuration serveur), il doit y avoir quelque chose qui prend trop de temps à charger.
Pic d’utilisation mémoire : permet de voir la quantité de mémoire qu’un chargement demande. On peut se rendre compte si la mémoire vive utilisée est trop élevée, et si notre serveur en a assez.
Requête en base de données : permet de voir combien de temps prend l’ensemble des requêtes en base de données, et le nombre réalisé pour le chargement de la page.
Appels d’API HTTP : permet de comprendre les requêtes HTTP qui sont souvent effectuées avec JavaScript. Ce n’est pas du temps de chargement serveur, mais ça a un impact sur le temps d’affichage du rendu de la page.
Liste des requêtes
Si vous cherchez à comprendre quelles requêtes en base de données prennent du temps, ou quelles sont les requêtes qui s'enchaînent, vous trouverez un tableau très complet permettant de filtrer dans tous les sens (type de requête, durée, fonction appelante, etc.).
Chargements des styles et scripts
Si vous voulez vous assurer que les fichiers .css (styles) et .js (script) soient bien chargés, les onglets “Scripts” et “Styles” vous permettent de voir l’ensemble des chargements dans un tableau filtrable. On y retrouve des informations clés, comme l’emplacement du chargement, si c’est hébergé sur notre site ou un autre, les dépendances, etc.
Analyse des hooks
Comme nous l’avons vu plus tôt, les hooks se déclenchent tout au long du cycle de chargement de la page. L’onglet “Crochets et actions” permet de voir l’ensemble des hooks qui sont chargés, et leur emplacement dans le cycle de chargement. Par exemple, nous pouvons filtrer les hooks chargés pour connaître ceux appelés par notre thème enfant. Cela vous permettra de comprendre ce qu’il vous est possible de faire avec les hooks, et d’analyser si les hooks que vous avez codés sont bien chargés.
Environnement serveur
Vous serez amené à vous demander quelles sont la configuration de votre serveur, sa puissance, les extensions serveur activées. L’onglet “Environnement” permet cela en donnant des informations très utiles.
Autres onglets
Les autres onglets permettent d’avoir des informations complémentaires qui pourront vous être utiles dans diverses situations en tant que développeur. Je vous invite à regarder par vous-même !
En résumé
Query Monitor est un plugin qui permet d’analyser tout un ensemble de paramètres sur le chargement d’une page.
Ce plugin est un véritable couteau suisse qui permet d’être utilisé dans différents cas d’utilisation : débug, amélioration de performance, développement de thème.
L’utilisation de ce plugin permet de récupérer les erreurs sans activer le mode debug.
Maintenant que nous avons les outils en main pour bien analyser les erreurs, nous allons voir comment débugger un plugin qui ne marcherait pas et bloquerait notre site.
