{"id":230715,"date":"2022-12-06T16:57:00","date_gmt":"2022-12-06T13:57:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=230715"},"modified":"2022-12-07T12:17:05","modified_gmt":"2022-12-07T09:17:05","slug":"installation-de-xdebug-partie-2-lide","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fr\/installation-de-xdebug-partie-2-lide\/","title":{"rendered":"Installation de Xdebug, partie 2\u00a0: l&rsquo;IDE"},"content":{"rendered":"\n<p><strong><a href=\"https:\/\/wordpress.mediadoma.com\/fr\/installation-de-xdebug-partie-1-le-module-xdebug\/\" title=\"Maintenant que Xdebug est install\u00e9 avec votre installation locale de PHP\">Maintenant que Xdebug est install\u00e9 avec votre installation locale de PHP<\/a><\/strong>, il est temps de le connecter \u00e0 l&rsquo;IDE. Cela nous offre tous les avantages que Xdebug a \u00e0 offrir.<\/p>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-162583-61e7414e9e342.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-162583-61e7414e9e342.png\" alt=\"Installation de Xdebug, partie 2\u00a0: l&#039;IDE\"><\/a><\/p>\n<p>C&rsquo;est-\u00e0-dire qu&rsquo;il nous permet de :<\/p>\n<ul>\n<li>d\u00e9finir des points d&rsquo;arr\u00eat,<\/li>\n<li>parcourir notre code,<\/li>\n<li>et surveiller les variables<\/li>\n<\/ul>\n<p>Pendant tout ce temps, le programme s&rsquo;ex\u00e9cute. Cela signifie que pendant le rendu d&rsquo;une page, nous pouvons d\u00e9finir des points dans notre base de code o\u00f9 nous pouvons voir ce que le serveur fait avec notre code.<\/p>\n<p>Donc, bien s\u00fbr, m\u00eame si cela s&rsquo;appelle le d\u00e9bogage pour supprimer les bogues, cela peut \u00e9galement donner un aper\u00e7u de la fa\u00e7on dont une application, un th\u00e8me ou un plugin bas\u00e9 sur WordPress s&rsquo;ex\u00e9cute et peut nous aider \u00e0 mieux comprendre le c\u0153ur de WordPress.<\/p>\n<h2>Installation de Xdebug dans Visual Studio Code<\/h2>\n<p>\u00c0 ce stade, l&rsquo;environnement suivant doit \u00eatre configur\u00e9 sur votre ordinateur local\u00a0:<\/p>\n<ul>\n<li><strong><a href=\"https:\/\/tommcfarlin.com\/local-development-for-the-indie-wordpress-developer\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Valet<\/a><\/strong> (qui inclut Nginx et MySQL et <strong><a href=\"https:\/\/tommcfarlin.com\/databases-and-tools-indie-wordpress-developer\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">les outils associ\u00e9s<\/a><\/strong> )<\/li>\n<li><strong><a href=\"https:\/\/wordpress.mediadoma.com\/fr\/installer-wordpress-pour-le-developpement-local\/\" title=\"Wordpress\">WordPress<\/a><\/strong><\/li>\n<li><strong><a href=\"https:\/\/tommcfarlin.com\/the-independent-wordpress-developer\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Code Visual Studio<\/a><\/strong><\/li>\n<li><strong><a href=\"https:\/\/wordpress.mediadoma.com\/fr\/installation-de-xdebug-partie-1-le-module-xdebug\/\" title=\"XdebugName\">XdebugName<\/a><\/strong><\/li>\n<\/ul>\n<p>Les t\u00e2ches restantes pour tout ce qui pr\u00e9c\u00e8de impliquent de lier Xdebug \u00e0 Visual Studio Code afin d&rsquo;obtenir une repr\u00e9sentation litt\u00e9rale de la performance de WordPress (et donc de notre travail), de ce qu&rsquo;il fait, etc., chaque fois qu&rsquo;il s&rsquo;ex\u00e9cute dans le navigateur.<\/p>\n<p>Cela dit, commen\u00e7ons.<\/p>\n<h3>1 Installation des extensions n\u00e9cessaires<\/h3>\n<p>Tout d&rsquo;abord, assurons-nous que l&rsquo;extension de d\u00e9bogage PHP est install\u00e9e dans Visual Studio Code. Dans le menu Extensions de la barre lat\u00e9rale de l&rsquo;EDI, recherchez PHP Debug et vous devriez voir un \u00e9cran comme celui-ci.<\/p>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-162583-61e74153b170c.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-162583-61e74153b170c.png\" alt=\"Installation de Xdebug, partie 2\u00a0: l&#039;IDE\"><\/a><\/p>\n<p>Si l&rsquo;extension n&rsquo;est pas d\u00e9j\u00e0 install\u00e9e, continuez et installez-la. Vous devrez peut-\u00eatre red\u00e9marrer Visual Studio Code pour que la nouvelle extension prenne effet.<\/p>\n<p>\u00c0 partir de l\u00e0, il y a quelques param\u00e8tres de configuration suppl\u00e9mentaires que nous devons v\u00e9rifier avant de tenter de d\u00e9boguer un code.<\/p>\n<h3>2 Configurer Xdebug (encore plus\u00a0!)<\/h3>\n<p>Rappel du <strong><a href=\"https:\/\/wordpress.mediadoma.com\/fr\/installation-de-xdebug-partie-1-le-module-xdebug\/\" title=\"post pr\u00e9c\u00e9dent,\">post pr\u00e9c\u00e9dent,<\/a><\/strong> nous avions besoin d&rsquo;inclure Xdebug dans notre fichier <strong>php.ini<\/strong>. Plus pr\u00e9cis\u00e9ment, nous avons d\u00fb ajouter <strong><a href=\"https:\/\/gist.github.com\/tommcfarlin\/426e02bcfc411d43be6715b3e84ead7e#file-18-reference-xdebug-txt\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">la ligne de code suivante<\/a><\/strong> pour activer Xdebug\u00a0:<\/p>\n<pre><code>zend_extension=\"\/usr\/local\/lib\/php\/pecl\/20160303\/xdebug.so\"<\/code><\/pre>\n<p>Maintenant, nous devons faire un peu plus de travail.<\/p>\n<ol>\n<li>il va falloir ajouter une ligne de configuration au fichier <strong>php.ini<\/strong> r\u00e9f\u00e9renc\u00e9 <strong><a href=\"https:\/\/wordpress.mediadoma.com\/fr\/installation-de-xdebug-partie-1-le-module-xdebug\/\" title=\"dans le dernier post\">dans le dernier post<\/a><\/strong> ,<\/li>\n<li>nous devrons configurer un script de d\u00e9monstration pour nous assurer qu&rsquo;il existe une section Xdebug appropri\u00e9e,<\/li>\n<li>nous devrons configurer Visual Studio Code<\/li>\n<\/ol>\n<p>Heureusement, tout ce qui pr\u00e9c\u00e8de sont des t\u00e2ches relativement rapides. Tout d&rsquo;abord, la ligne de configuration que vous souhaiterez ajouter \u00e0 votre fichier <strong><a href=\"https:\/\/gist.github.com\/tommcfarlin\/426e02bcfc411d43be6715b3e84ead7e#file-20-set-xdebug-txt\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">est la suivante\u00a0:<\/a><\/strong><\/p>\n<pre><code>[XDebug]\nxdebug.remote_enable = 1\nxdebug.remote_autostart = 1<\/code><\/pre>\n<p>Ensuite, configurez un script de d\u00e9monstration et connectez-le avec Valet. Vous pouvez le faire facilement en cr\u00e9ant un r\u00e9pertoire sur votre bureau, en cr\u00e9ant quelque chose comme <strong>test.php<\/strong>, puis en ajoutant <strong>phpinfo();<\/strong> au dossier.<\/p>\n<p>Apr\u00e8s cela, <strong><a href=\"https:\/\/laravel.com\/docs\/5.6\/valet#the-link-command\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">liez<\/a><\/strong> le r\u00e9pertoire et <strong><a href=\"https:\/\/laravel.com\/docs\/5.6\/valet#other-valet-commands\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">red\u00e9marrez<\/a><\/strong> Valet. Il m&rsquo;est arriv\u00e9 de nommer mon exemple de r\u00e9pertoire et de d\u00e9poser un fichier <strong>test.php<\/strong> dans le r\u00e9pertoire.<\/p>\n<p>Si tout est configur\u00e9 correctement, vous devriez pouvoir charger le fichier dans votre navigateur et voir quelque chose comme ceci\u00a0:<\/p>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-162583-61e74157a25f2.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-162583-61e74157a25f2.png\" alt=\"Installation de Xdebug, partie 2\u00a0: l&#039;IDE\"><\/a><\/p>\n<p>Et maintenant, nous devons configurer Xdebug. Donc, en supposant que tout ce qui pr\u00e9c\u00e8de s&rsquo;est bien pass\u00e9 et que les extensions sont correctement install\u00e9es et en cours d&rsquo;ex\u00e9cution, travailler avec Visual Studio Code devrait \u00eatre facile.<\/p>\n<p>Naturellement, nous aurons besoin d&rsquo;un script de d\u00e9monstration que nous pourrons tester. <strong><a href=\"https:\/\/gist.github.com\/tommcfarlin\/426e02bcfc411d43be6715b3e84ead7e#file-21-test-php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">J&rsquo;ai donc r\u00e9dig\u00e9 quelque chose de trivial,<\/a><\/strong> mais qui vous donnera une id\u00e9e de ce \u00e0 quoi vous attendre lors de la d\u00e9finition de points d&rsquo;arr\u00eat et de ce qui ne l&rsquo;est pas.<\/p>\n<pre><code>&lt;?php\n\n\/\/ First, set a sample name.\n$exampleName = 'alice';\necho $exampleName;\n\n\/\/ Next, change the name and display it.\nif ('alice' === $exampleName) {\n    $exampleName = 'bob';\n}\necho $exampleName;\n<\/code><\/pre>\n<p>Tournons maintenant notre attention vers l&rsquo;IDE. Dans Visual Studio Code, cliquez sur l&rsquo; ic\u00f4ne <strong>Debug<\/strong> qui se trouve juste au-dessus de l&rsquo; ic\u00f4ne <strong>Extensions<\/strong> et juste en dessous de l&rsquo; ic\u00f4ne <strong>Source Control<\/strong>.<\/p>\n<p>Dans la barre lat\u00e9rale tout en haut, vous remarquerez qu&rsquo;il y a un bouton de lecture. \u00c0 c\u00f4t\u00e9 de cela se trouve une liste d\u00e9roulante. Il peut lire &quot;Aucune configuration&quot;. Si tel est le cas, et je suppose que c&rsquo;est le cas, vous devrez suivre certaines \u00e9tapes tr\u00e8s sp\u00e9cifiques pour vous assurer que le d\u00e9bogage fonctionne correctement.<\/p>\n<h4>1 Ouvrez le r\u00e9pertoire du script<\/h4>\n<p>Vous devrez vous assurer que vous \u00eates dans le r\u00e9pertoire du script dans Visual Studio Code.<\/p>\n<p>Autrement dit, il ne suffit pas de s&rsquo;assurer que vous avez juste un fichier ouvert. Visual Studio Code doit savoir \u00e0 partir de quel r\u00e9pertoire vous travaillez (car il cr\u00e9e un r\u00e9pertoire <strong>.vscode<\/strong> cach\u00e9 dans le r\u00e9pertoire parent).<\/p>\n<h4>2 Cr\u00e9er la configuration de lancement<\/h4>\n<p>La configuration de lancement par d\u00e9faut devrait fonctionner imm\u00e9diatement, mais elle est bas\u00e9e sur l&rsquo;\u00e9tape pr\u00e9c\u00e9dente.<\/p>\n<p>Une fois que vous avez ouvert un r\u00e9pertoire (dans mon cas, celui qui contient <strong>test.php<\/strong>) dans Visual Studio Code, lancez la palette de commandes (vous pouvez le faire via un raccourci qui varie d&rsquo;un OS \u00e0 l&rsquo;autre ou en utilisant le menu <strong>Aide<\/strong> et puis choisissez Palette de commandes).<\/p>\n<p>Une fois qu&rsquo;il appara\u00eet, entrez <strong>&gt; launch.json<\/strong>, et il vous donnera la possibilit\u00e9 d&rsquo;afficher le fichier <strong>launch.json<\/strong>. Hors de la bo\u00eete, cela devrait <strong><a href=\"https:\/\/gist.github.com\/tommcfarlin\/426e02bcfc411d43be6715b3e84ead7e#file-22-launch-json\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">ressembler \u00e0 ceci<\/a><\/strong> :<\/p>\n<pre><code>{\n    \/\/ Use IntelliSense to learn about possible attributes.\n    \/\/ Hover to view descriptions of existing attributes.\n    \/\/ For more information, visit: https:\/\/go.microsoft.com\/fwlink\/?linkid=830387\n    \"version\": \"0.2.0\",\n    \"configurations\": [\n        {\n            \"name\": \"Listen for XDebug\",\n            \"type\": \"php\",\n            \"request\": \"launch\",\n            \"port\": 9000\n        },\n        {\n            \"name\": \"Launch currently open script\",\n            \"type\": \"php\",\n            \"request\": \"launch\",\n            \"program\": \"${file}\",\n            \"cwd\": \"${fileDirname}\",\n            \"port\": 9000\n        }\n    ]\n}<\/code><\/pre>\n<p>\u00c0 ce stade, le menu <strong>D\u00e9boguer<\/strong> devrait avoir quelque chose comme Lancer le script actuellement ouvert \u00e0 c\u00f4t\u00e9 de l&rsquo;ic\u00f4ne de lecture. Si ce n&rsquo;est pas le cas, il vous donnera la possibilit\u00e9 de s\u00e9lectionner quelque chose comme PHP (puisque l&rsquo;extension est install\u00e9e).<\/p>\n<p>Si c&rsquo;est le cas, s\u00e9lectionnez cette option.<\/p>\n<h3>3 D\u00e9finissez des points d&rsquo;arr\u00eat<\/h3>\n<p>Il est maintenant temps de voir le d\u00e9bogueur en action. \u00c0 ce stade, lancez une fen\u00eatre de navigateur avec votre script de test.<\/p>\n<p>Le mien est simple :<\/p>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-162583-61e7415b5ced0.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-162583-61e7415b5ced0.png\" alt=\"Installation de Xdebug, partie 2\u00a0: l&#039;IDE\"><\/a><\/p>\n<p>Apr\u00e8s cela, esp\u00e9rez dans votre IDE, puis cliquez sur le volet de gauche \u00e0 gauche du num\u00e9ro de ligne. Cela d\u00e9finira des points d&rsquo;arr\u00eat.<\/p>\n<p>Voici un exemple\u00a0:<\/p>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-162583-61e7415f30251.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-162583-61e7415f30251.png\" alt=\"Installation de Xdebug, partie 2\u00a0: l&#039;IDE\"><\/a><\/p>\n<p>Cliquez maintenant sur le bouton <strong>Lecture<\/strong> du d\u00e9bogueur. Imm\u00e9diatement, vous devriez remarquer que la barre d&rsquo;\u00e9tat devient orange et que certaines commandes de d\u00e9bogage (pour Continuer, Pas \u00e0 pas, Pas \u00e0 pas, Red\u00e9marrer et Arr\u00eater). Ceux-ci ne nous int\u00e9ressent pas pour le moment, car nous les examinerons plus en d\u00e9tail dans le prochain article.<\/p>\n<p>Notez \u00e9galement que votre volet de gauche contient des informations sur les variables, les montres, etc. Si vous avez d\u00e9fini des points d&rsquo;arr\u00eat sur vos variables locales, vous remarquerez que <strong>$exampleName<\/strong> est mis en surbrillance mais probablement non initialis\u00e9.<\/p>\n<p>Cliquez sur le bouton <strong>Lecture<\/strong> dans les nouveaux contr\u00f4les qui sont apparus, et il devrait s&rsquo;ex\u00e9cuter jusqu&rsquo;au prochain point d&rsquo;arr\u00eat.<\/p>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-162583-61e7416248504.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-162583-61e7416248504.png\" alt=\"Installation de Xdebug, partie 2\u00a0: l&#039;IDE\"><\/a><\/p>\n<p>La ligne sera maintenant mise en surbrillance et, dans le volet de d\u00e9bogage, le <strong>$exampleName<\/strong> recevra une valeur. Dans mon cas, c&rsquo;est Alice.<\/p>\n<p>Vous pouvez continuer \u00e0 jouer avec cela autant que vous le souhaitez pour avoir une id\u00e9e du fonctionnement du d\u00e9bogueur.<\/p>\n<h2>La prochaine fois, Screencasts<\/h2>\n<p>Le d\u00e9bogage est puissant, mais peut \u00eatre intimidant \u00e0 bien des \u00e9gards. \u00c0 partir du prochain article, je commencerai \u00e0 partager quelques captures d&rsquo;\u00e9cran expliquant comment\u00a0:<\/p>\n<ul>\n<li>fonctions et variables de d\u00e9bogage,<\/li>\n<li>modifier les valeurs \u00e0 la vol\u00e9e,<\/li>\n<li>travailler avec la console de d\u00e9bogage,<\/li>\n<li>et plus.<\/li>\n<\/ul>\n<p>Celles-ci prendront un peu plus de temps car ce seront des vid\u00e9os expliquant comment proc\u00e9der, mais les avantages devraient \u00eatre consid\u00e9rables.<\/p>\n<p>Si vous n&rsquo;avez pas encore eu l&rsquo;occasion de d\u00e9couvrir tout le contenu de cette s\u00e9rie, je vous le recommande vivement.<\/p>\n<h3>\ud83d\udce3 Une note pour les avantages des membres<\/h3>\n<p>Attention cependant, avant le prochain post autour des screencasts et du prochain opus de cette s\u00e9rie, j&rsquo;ai quelques annonces \u00e0 faire sp\u00e9cifiquement pour les membres du site qui incluent des remises sur les logiciels bas\u00e9s sur WordPress.<\/p>\n<p>Je couvrirai plus \u00e0 ce sujet la semaine prochaine.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Source d&rsquo;enregistrement:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/tommcfarlin.com\" class=\"external external_icon\">tommcfarlin.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Apr\u00e8s avoir install\u00e9 Xdebug, voici comment le connecter \u00e0 votre IDE et avoir un aper\u00e7u des variables, des fonctions et de l&rsquo;ordre dans lequel il ex\u00e9cute l&rsquo;ensemble du programme.<\/p>\n","protected":false},"author":1,"featured_media":236530,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[717],"tags":[1167],"class_list":["post-230715","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-developpeur","tag-affiai-fr"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts\/230715","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/comments?post=230715"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts\/230715\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/media\/236530"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/media?parent=230715"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/categories?post=230715"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/tags?post=230715"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}