Débogage en local (par Flywheel) : Guide du débutant

Avoir des problèmes sur un site Web ou même dans l'installation locale d'un site Web peut être éprouvant pour les nerfs. Après tout, les problèmes de performances du site ou les bogues peuvent entraîner des temps d'arrêt du site. Et les temps d'arrêt du site peuvent signifier une perte de trafic, des opportunités manquées et même une perte de revenus.

Heureusement, de nombreuses solutions de débogage existent pour identifier et réparer les problèmes de site. Mais comment savoir ce qui conviendra le mieux à votre situation ?

Dans Local, une approche à plusieurs volets est disponible pour le débogage. Ici, nous discuterons des options de débogage par défaut incluses avec Local, ainsi que des moyens d'identifier les erreurs et des modules complémentaires que vous pouvez utiliser pour repérer et résoudre les problèmes plus rapidement et plus efficacement.

Qu'est-ce que Xdebug en local ?

Avant de pouvoir discuter de la façon de déboguer dans Local, nous devons d'abord parler de Xdebug, l'outil de débogage présent dans Local et de certaines de ses fonctionnalités les plus remarquables.

Xdebug est en fait une extension PHP qui simplifie le processus de débogage. Principalement, il rend le formatage de la fonction var_dump () plus propre et ajoute plus d'avertissements et d'avis sur des erreurs spécifiques. De cette façon, cela rend l'expérience utilisateur plus intuitive.

Au cas où vous ne le sauriez pas, var_dump() est un élément utile de PHP qui révèle rapidement ce qui ne va pas avec votre code. Mais la distinction ici est que si vous n'aviez pas Xdebug sous la main, le code produit lorsque vous appelez var_dump() serait beaucoup plus difficile à lire. De plus, vous devrez formater votre PHP d'une manière très particulière même en appelant var_dump() en premier lieu.

Xdebug est disponible en local car il offre une plus grande profondeur d'informations sur les erreurs lorsqu'elles surviennent. Il est également livré avec un débogueur par étapes qui rationalise le processus de débogage, en particulier pour les problèmes plus importants. Le débogueur d'étape fonctionne en vous permettant d'évaluer votre code étape par étape à des points d'arrêt spécifiques. Cela vous permet d'évaluer le code dans des sections plus petites et de localiser les problèmes plus facilement.

Et la meilleure partie est que Xdebug est activé dans Local par défaut, vous n'avez donc même pas besoin de modifier les paramètres pour commencer. Ouvrez simplement Local et partez.

Comment déboguer un site Web en local

Vous pouvez déboguer un site Web en local de plusieurs manières. Voici les principales étapes dont nous allons discuter :

1. Identification des erreurs de la console du navigateur
2. Utilisation du moniteur de requête
3. Via Xdebug et VS Code
4. Avec Xdebug et PhpStorm
5. Utilisation de Xdebug pour le débogage des étapes

Plongeons dedans.

1. Identifiez les erreurs de la console du navigateur

La première étape du débogage consiste à utiliser la console du navigateur, qui fait partie de tous les outils de développement de navigateur. Cela vous permet de repérer les erreurs sur les pages Web sans aucun outil spécial. Lancez simplement Local, accédez à la page en question avec le navigateur de votre choix et utilisez la console pour repérer les erreurs. Ce qui suit est une ventilation de la façon d'accéder à la console du navigateur sur plusieurs navigateurs.

Si vous utilisez Chrome…

1. Ouvrez DevTools en accédant à Plus d'outils > Outils de développement dans le menu du navigateur Chrome. Vous pouvez également appuyer sur Ctrl/Cmd+Maj+I .
2. Cliquez sur l'onglet Console .
3. S'il y a des erreurs présentes, elles devraient être visibles maintenant. Sinon, rechargez la page Web pour les générer.
4. Notez le type d'erreur, son emplacement et son numéro de ligne dans la console du navigateur.

Si vous utilisez Firefox…

1. Ouvrez les outils de développement du navigateur en accédant à Plus d'outils > Outils de développement Web dans le menu Firefox. Ctrl/Cmd+Maj+I fonctionne également ici.
2. Cliquez sur la console languette. Alternativement, vous pouvez également accéder directement à la console via More Tools > Browser Console .
3. Toutes les erreurs devraient maintenant être visibles. Sinon, rechargez la page.

Si vous utilisez Safari…

1. Activez les outils de développement en accédant à Préférences > Avancé dans le menu Safari. Option + Cmd + I est votre ami ici.
2. Cochez la case à côté de Afficher le menu Développement dans la barre de menus . Ensuite, fermez la boîte de dialogue.
3. Cliquez sur Développer > Afficher la console d'erreurs . Même affaire que ci-dessus.

Armé de ces informations, vous pouvez revenir au système de fichiers configuré dans Local et trouver le morceau de code spécifique à l'origine des problèmes, puis implémenter un correctif. Utilisez le bouton Aller au dossier du site pour accéder à l'emplacement de vos sites Web locaux.

2. Utilisez Query Monitor pour résoudre les problèmes de performances du site

Vous pouvez également identifier et réparer les problèmes de site Web directement dans WordPress. En fait, le plugin Query Monitor est un choix fantastique pour le débogage et pour identifier les problèmes de performances, en particulier. Cela constitue une paire utile avec les outils de débogage locaux intégrés et est particulièrement utile pour détecter les problèmes de plugins et de thèmes tiers.

Vous pouvez installer le plugin comme n'importe quel autre. Allez simplement dans Plugins> Ajouter un nouveau et recherchez-le par son nom. Trouvez-le dans la liste et cliquez sur Installer maintenant , puis sur Activer une fois qu'il a été téléchargé.

Ce que Query Monitor peut vous dire

Après avoir installé le plugin, vous devriez voir une nouvelle option de menu en haut du tableau de bord WordPress.

Passer la souris dessus révélera une liste déroulante d'outils et d'options de Query Monitor. Choisir l'un d'entre eux ouvrira un menu en bas où vous pourrez en savoir plus sur la page actuelle.

Entre autres choses, Query Monitor vous donnera un aperçu des performances de votre page, notamment :

• Utilisation maximale de la mémoire. Cet outil vous indique la quantité de mémoire utilisée pour générer une page à un instant donné.
• Temps de génération de page. Vous indique le temps nécessaire à la génération d'une page.
• Temps de requête de la base de données. Enfin, cet outil vous montre combien de temps il a fallu à la base de données pour répondre aux demandes de thème ou de plugin.

Au-delà des problèmes de performances, ce plugin peut également identifier les erreurs et les avis PHP - un peu comme le fait Xdebug. Cependant, ses efforts se concentrent sur les thèmes et plugins tiers. Ce qui est pratique ici, c'est que si des erreurs sont présentes, un nouvel onglet apparaîtra dans l'outil bien nommé PHP Errors qui listera chaque erreur avec sa menace de sécurité. Il vous indiquera également la ligne de code où l'erreur apparaît ainsi que le code ou l'avis d'erreur spécifique.

Maintenant, c'est vraiment utile pour les sites Web qui sont déjà en ligne ou en phase de test avancé. Cependant, si vous êtes encore au stade du développement local, l'utilisation de Xdebug en local sera votre meilleur pari.

3. Configuration de Xdebug et du code VS pour le débogage

De retour dans Local, vous pouvez utiliser Xdebug de différentes manières pour effectuer le débogage du site local. Pour en avoir plus pour votre argent, pour ainsi dire, vous pouvez ajouter la puissance de VS Code à l'équation.

VS Code est un éditeur de code open source avec des outils étendus et une interface utilisateur plus intuitive. Cela rend ce processus de débogage ligne par ligne beaucoup plus intuitif et facile à regarder.

Vous pouvez réellement connecter VS Code au débogueur d'étape Xdebug avec un grand effet. Voici comment le configurer pour une utilisation dans Local :

1. Téléchargez VS Code et installez-le selon les instructions du développeur.
2. Téléchargez et installez une extension de débogage PHP. La documentation de Local recommande l'extension PHP Debug pour cette tâche.
3. Dans Local, cliquez sur Modules complémentaires > Xdebug + VS Code .
4. Cliquez sur Installer le module complémentaire .
5. Une fois cela fait, appuyez sur Activer et relancer .
6. Ouvrez un site dans Local, puis cliquez sur l'onglet Utilitaires .
7. Cliquez sur Ajouter une configuration d'exécution à VS Code .
8. VS Code se lancera et vous pourrez alors démarrer le processus de débogage.

Si vous ne préférez pas VS Code, vous pouvez utiliser un autre outil d'édition pour la tâche.

4. Configuration de Xdebug et PhpStorm pour le débogage

Une autre option consiste à utiliser PhpStorm avec Xdebug. Vous pouvez l'ajouter à Local via un module complémentaire et il fonctionnera conjointement avec le débogueur d'étape Xdebug. L'installation et la configuration sont très similaires au processus décrit pour VS Code ci-dessus. Pour l'utiliser, effectuez les étapes suivantes :

1. Téléchargez et installez PhpStorm.
2. Dans Local, cliquez sur Modules complémentaires > Xdebug + PhpStorm .
3. Cliquez sur Installer le module complémentaire .
4. Encore une fois, activez et relancez une fois que c'est fait.
5. Ouvrez n'importe quel site dans Local et cliquez sur Utilitaires languette.
6. Cliquez sur Ajouter une configuration d'exécution à PhpStorm .
7. Avec PhpStorm actif, définissez des points d'arrêt en cliquant sur la gouttière à la ligne de code spécifique où vous souhaitez que le point d'arrêt se produise.
8. Cliquez sur Lecture pour démarrer le processus de débogage.

Si vous souhaitez plus d'informations sur le processus de débogage, le débogage par étapes est toujours une option.

5. Utilisation de Xdebug pour le débogage des étapes

Le débogage par étapes est un outil super utile et une partie de Xdebug qui vous tient essentiellement la main tout au long du processus de débogage. Il fonctionne avec VS Code et PhpStorm (ainsi que de nombreux autres IDE et éditeurs de texte) pour fournir des outils, des étapes et des protocoles de débogage détaillés mais faciles à suivre.

Dans Local, vous n'avez rien à faire pour configurer Xdebug - il est automatiquement activé par défaut. Bien qu'il existe des instructions de configuration plus complexes si vous avez un environnement de test compliqué (avec plusieurs systèmes contribuant à la fois), nous allons supposer qu'il vous suffit d'effectuer le débogage, sur un système, dans une installation de Local pour le moment.

Pour utiliser le débogage par étapes, tout ce que vous avez à faire est de suivre les étapes décrites dans les deux sections précédentes. La fonctionnalité fonctionne avec VS Code ou PhpStorm. Une fois que tout est configuré, il définira automatiquement des points d'arrêt et jouera le code un par un. Cela offre un moyen intuitif d'exécuter votre code, de voir les erreurs et de les corriger au fur et à mesure qu'elles surviennent.

Débogage en local simplifié

Comme vous pouvez le constater, le débogage en local est en fait un processus assez simple qui nécessite une configuration minimale pour démarrer. L'outil de débogage principal est déjà présent par défaut. Tout ce que vous avez à faire est de configurer votre éditeur de texte ou IDE préféré, de configurer un module complémentaire ou deux, et vous êtes prêt. Bien sûr, vous devrez effectuer les corrections de bogues réelles pour que votre site Web soit en parfait état. Mais au moins, le processus de débogage lui-même peut être exécuté facilement et avec un minimum de tracas.

Quels sont vos outils préférés pour déboguer en local ? Nous aimerions entendre vos commentaires dans les commentaires ci-dessous.