{"id":228942,"date":"2022-10-24T14:21:00","date_gmt":"2022-10-24T11:21:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228942"},"modified":"2022-11-09T04:53:42","modified_gmt":"2022-11-09T01:53:42","slug":"debogueur-de-code-visual-studio-introduction-et-capture-decran","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fr\/debogueur-de-code-visual-studio-introduction-et-capture-decran\/","title":{"rendered":"D\u00e9bogueur de code Visual Studio\u00a0: introduction et capture d&rsquo;\u00e9cran"},"content":{"rendered":"\n<p>Dans les articles pr\u00e9c\u00e9dents, j&rsquo;ai un peu expliqu\u00e9 pourquoi l&rsquo;utilisation d&rsquo;un d\u00e9bogueur appropri\u00e9 par rapport \u00e0 certaines des instructions int\u00e9gr\u00e9es de PHP est importante. Dans <a href=\"https:\/\/wordpress.mediadoma.com\/fr\/xdebug-visual-studio-code-et-mamp\/\" title=\"le dernier article\" >le dernier article<\/a>, m\u00eame, j&rsquo;ai expliqu\u00e9 comment configurer Xdebug avec Visual Studio Code (et MAMP Pro, si vous utilisez).<\/p>\n<p>Mais si vous n&rsquo;avez jamais utilis\u00e9 un outil comme celui-ci auparavant, vous n&rsquo;avez jamais vu comment cela fonctionne, ou vous n&rsquo;avez jamais vu pourquoi il est si puissant, je veux en parler un peu dans cet article.<\/p>\n<p>Je vais donc parcourir un peu cela dans le contexte de quelques d\u00e9finitions et captures d&rsquo;\u00e9cran ainsi qu&rsquo;un court screencast \u00e0 la fin afin que je puisse montrer le d\u00e9bogueur Visual Studio Code en action.<\/p>\n<h2>Le d\u00e9bogueur de code Visual Studio<\/h2>\n<p>En supposant que vous ayez install\u00e9 le d\u00e9bogueur\u00a0; il y a quelques termes qui valent la peine d&rsquo;\u00eatre appris. Bien s\u00fbr, il y en a d&rsquo;autres, mais ce sont ceux que je consid\u00e8re comme essentiels\u00a0:<\/p>\n<ul>\n<li><strong>Les points d&rsquo; arr\u00eat<\/strong> sont l&rsquo;endroit o\u00f9 vous dites au programme d&rsquo;arr\u00eater son ex\u00e9cution. Une fois que le code s&rsquo;est arr\u00eat\u00e9 \u00e0 ce stade, vous pouvez examiner les variables, voir quelles valeurs sont stock\u00e9es en m\u00e9moire, etc.<\/li>\n<li><strong>Les montres<\/strong> sont des variables dans le code que vous voulez litt\u00e9ralement regarder car elles changent tout au long de l&rsquo;ex\u00e9cution des variables.<\/li>\n<li><strong>Start<\/strong> met le d\u00e9bogueur en mouvement. M\u00eame si vous avez d\u00e9fini des points d&rsquo;arr\u00eat et des surveillances, le d\u00e9bogueur ne fera rien tant que vous ne l&rsquo;aurez pas d\u00e9marr\u00e9.<\/li>\n<li><strong>Pas<\/strong> \u00e0 pas dans est une action qui, lorsque vous appuyez sur un appel de fonction, vous emm\u00e8nera dans la fonction qui est invoqu\u00e9e. Parfois, cela est utile, comme si vous voulez voir ce que fait la fonction ; d&rsquo;autres fois, ce n&rsquo;est pas n\u00e9cessaire si vous ne vous souciez que de l&rsquo;ex\u00e9cution de la fonction ou si vous ne vous souciez que de ce qu&rsquo;elle renvoie.<\/li>\n<li><strong>Pas<\/strong> \u00e0 pas vous permettra de parcourir l&rsquo;ex\u00e9cution d&rsquo;une fonction de sorte que l&rsquo;ex\u00e9cution du programme s&rsquo;arr\u00eate imm\u00e9diatement apr\u00e8s la fin de la fonction que vous avez franchie.<\/li>\n<li><strong>Step Out<\/strong> est utilis\u00e9 lorsque vous \u00eates entr\u00e9 dans une fonction, que vous avez atteint un point o\u00f9 vous avez fini d&rsquo;\u00e9valuer le code, puis que vous \u00eates pr\u00eat \u00e0 revenir \u00e0 l&rsquo;endroit o\u00f9 vous aviez d\u00e9fini un point d&rsquo;arr\u00eat.<\/li>\n<li><strong>Stop<\/strong> mettra fin \u00e0 l&rsquo;ex\u00e9cution du d\u00e9bogueur.<\/li>\n<\/ul>\n<p>Cela semble relativement clair, n&rsquo;est-ce pas? \u00c0 mon avis, il est plus facile de voir cela en action.<\/p>\n<p>De plus, pour voir quelles ic\u00f4nes font quoi, la meilleure chose \u00e0 faire est g\u00e9n\u00e9ralement de les survoler, puis de lire les info-bulles\u00a0; cependant, apr\u00e8s un moment ou deux d&rsquo;utilisation, vous serez familiaris\u00e9 avec ce que chacun fait.<\/p>\n<p>Apr\u00e8s tout, les ic\u00f4nes sont assez descriptives.<\/p>\n<h3>Un exemple<\/h3>\n<p>Cela dit, en supposant que vous avez suivi les \u00e9tapes de l&rsquo;article pr\u00e9c\u00e9dent, voici un court exemple de la fa\u00e7on dont vous pouvez d\u00e9finir un point d&rsquo;arr\u00eat et suivre son ex\u00e9cution via un plugin.<\/p>\n<h4>1 point d&rsquo;arr\u00eat<\/h4>\n<p>Remarquez dans l&rsquo;image ci-dessous, j&rsquo;ai plac\u00e9 un point d&rsquo;arr\u00eat \u00e0 c\u00f4t\u00e9 d&rsquo;une ligne de code (comme indiqu\u00e9 par le point rouge).<\/p>\n<p>C&rsquo;est l\u00e0 que l&rsquo;ex\u00e9cution va s&rsquo;arr\u00eater une fois que j&rsquo;ai d\u00e9marr\u00e9 le d\u00e9bogueur et que j&rsquo;ai commenc\u00e9 \u00e0 ex\u00e9cuter le programme.<\/p>\n<h4>2 D\u00e9finir une montre<\/h4>\n<p>Ensuite, regarder une variable signifie que nous voulons voir la valeur d&rsquo;une variable tout au long du cycle de vie du programme. Ci-dessous, j&rsquo;ajoute une montre \u00e0 la variable $description.<\/p>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-167911-61e7aa6c2dd2b.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-167911-61e7aa6c2dd2b.png\" alt=\"D\u00e9bogueur de code Visual Studio\u00a0: introduction et capture d&#039;\u00e9cran\" ><\/a><\/p>\n<p>Dans la section suivante, vous verrez la valeur de la montre apr\u00e8s que l&rsquo;ex\u00e9cution du programme a pass\u00e9 cette ligne de code.<\/p>\n<h4>3 \u00c9valuez la montre<\/h4>\n<p>Une fois que le code a pass\u00e9 cette ligne, vous pouvez voir la valeur de la variable dans la\u00a0 section <strong>Watch<\/strong> du volet de d\u00e9bogage.<\/p>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-167911-61e7aa7036c8e.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-167911-61e7aa7036c8e.png\" alt=\"D\u00e9bogueur de code Visual Studio\u00a0: introduction et capture d&#039;\u00e9cran\" ><\/a><\/p>\n<p>Remarquez dans la fonction, il y a un appel \u00e0 woocommerce_wp_text_input. Nous utiliserons cette fonction comme exemple pour entrer dans une fonction puisqu&rsquo;il s&rsquo;agit d&rsquo;une fonction qui fait partie du c\u0153ur de WooCommerce.<\/p>\n<h4>4 Pr\u00e9parez-vous \u00e0 intervenir<\/h4>\n<p>Avant d&rsquo;entrer dans une fonction, il est important de s&rsquo;assurer que le nom de la fonction est en surbrillance.<\/p>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-167911-61e7aa750310e.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-167911-61e7aa750310e.png\" alt=\"D\u00e9bogueur de code Visual Studio\u00a0: introduction et capture d&#039;\u00e9cran\" ><\/a><\/p>\n<p>Une fois cela fait, vous pourrez cliquer sur le bouton <strong>Step In<\/strong> pour voir ce qui se passe dans la fonction.<\/p>\n<h4>5 Entrez<\/h4>\n<p>Apr\u00e8s \u00eatre intervenu, vous verrez du code que vous n&rsquo;avez pas \u00e9crit. Au lieu de cela, c&rsquo;est du code qui fait partie de WooCommerce (au moins dans cet exemple).<\/p>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-167911-61e7aa79897c0.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-167911-61e7aa79897c0.png\" alt=\"D\u00e9bogueur de code Visual Studio\u00a0: introduction et capture d&#039;\u00e9cran\" ><\/a><\/p>\n<p>En fonction de votre exp\u00e9rience, vous verrez du code que vous avez peut-\u00eatre \u00e9crit ou que quelqu&rsquo;un d&rsquo;autre a \u00e9crit.<\/p>\n<h4>6 Sortez<\/h4>\n<p>Une fois que vous \u00eates sorti du code, vous allez revenir \u00e0 la ligne de code imm\u00e9diatement apr\u00e8s l&rsquo;endroit o\u00f9 vous \u00eates entr\u00e9 dans le code.<\/p>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-167911-61e7aa7d94629.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-167911-61e7aa7d94629.png\" alt=\"D\u00e9bogueur de code Visual Studio\u00a0: introduction et capture d&#039;\u00e9cran\" ><\/a><\/p>\n<p>Avoir du sens\u00a0?<\/p>\n<h3>Une capture d&rsquo;\u00e9cran<\/h3>\n<p>Et enfin, voici un tr\u00e8s bref screencast d\u00e9crivant \u00e0 quoi ressemble tout ce qui pr\u00e9c\u00e8de en action\u00a0:<\/p>\n<div class=\"sds-iframe-wrapper fitvidsignore\" style=\"position:relative;padding-top:56.25%;max-width:100%;\"><iframe allowfullscreen style=\"position:absolute;top:0;left:0;width:100%;height:100%;\" src=\"\/\/www.youtube.com\/embed\/lzJZB5rqxlA\" frameborder=\"0\"><\/iframe><\/div>\n<p>Comme mentionn\u00e9 dans la vid\u00e9o, ce n&rsquo;est en aucun cas exhaustif, mais cela devrait suffire \u00e0 montrer \u00e0 quel point le d\u00e9bogage peut \u00eatre puissant.<\/p>\n<h2>Cela prend du temps et de la pratique<\/h2>\n<p>Le d\u00e9bogage prend un peu plus de temps que le vidage des variables \u00e0 l&rsquo;\u00e9cran.<\/p>\n<p>Et je ne dis pas que faire cela n&rsquo;a pas sa place ; Cependant, si vous souhaitez mieux comprendre ce qui se passe chaque fois que vous ex\u00e9cutez votre programme, ou si vous souhaitez explorer, par exemple, le c\u0153ur de WordPress, l&rsquo;utilisation d&rsquo;un d\u00e9bogueur est un tr\u00e8s bon moyen de le faire.<\/p>\n<p>De plus, je dirais que l&rsquo;utilisation d&rsquo;un d\u00e9bogueur peut aider \u00e0 mieux comprendre ce qui ne va pas (ou bien) dans le contexte de votre code afin que vous puissiez cr\u00e9er la meilleure solution possible.<\/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>Je vais parcourir un court screencast \u00e0 la fin afin de pouvoir montrer le d\u00e9bogueur Visual Studio Code en action.<\/p>\n","protected":false},"author":1,"featured_media":223730,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[915,717,841],"tags":[1167],"class_list":["post-228942","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-autre","category-developpeur","category-tutoriels","tag-affiai-fr"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts\/228942","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=228942"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts\/228942\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/media\/223730"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/media?parent=228942"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/categories?post=228942"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/tags?post=228942"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}