{"id":229106,"date":"2022-10-24T14:33:00","date_gmt":"2022-10-24T11:33:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=229106"},"modified":"2022-11-09T05:33:31","modified_gmt":"2022-11-09T02:33:31","slug":"visual-studio-code-debugger-primer-ja-screencast","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fi\/visual-studio-code-debugger-primer-ja-screencast\/","title":{"rendered":"Visual Studio Code Debugger: Primer ja Screencast"},"content":{"rendered":"\n<p>Aiemmissa viesteiss\u00e4 olen puhunut hieman siit\u00e4, miksi oikean debuggerin k\u00e4ytt\u00f6 verrattuna joihinkin PHP:n sis\u00e4isiin lauseisiin on t\u00e4rke\u00e4\u00e4. Viimeisess\u00e4 <a href=\"https:\/\/wordpress.mediadoma.com\/fi\/xdebug-visual-studio-code-ja-mamp\/\" title=\"viestiss\u00e4\" >viestiss\u00e4<\/a> jopa k\u00e4yn l\u00e4pi, kuinka Xdebug m\u00e4\u00e4ritet\u00e4\u00e4n Visual Studio Codella (ja MAMP Prolla, jos k\u00e4yt\u00e4t).<\/p>\n<p>Mutta jos et ole koskaan k\u00e4ytt\u00e4nyt t\u00e4llaista ty\u00f6kalua ennen, et ole koskaan n\u00e4hnyt sen toimintaa tai et ole koskaan n\u00e4hnyt, miksi se on niin tehokas, haluan k\u00e4sitell\u00e4 sit\u00e4 hieman t\u00e4ss\u00e4 viestiss\u00e4.<\/p>\n<p>Joten aion k\u00e4yd\u00e4 l\u00e4pi t\u00e4m\u00e4n tekemisen muutaman m\u00e4\u00e4ritelm\u00e4n ja kuvakaappauksen sek\u00e4 lopussa olevan lyhyen kuvakaappauksen yhteydess\u00e4, jotta voin n\u00e4ytt\u00e4\u00e4 Visual Studio Coden debuggerin toimivan toiminnassa.<\/p>\n<h2>Visual Studio Code Debugger<\/h2>\n<p>Olettaen, ett\u00e4 sinulla on debuggeri asennettuna; on muutamia termej\u00e4, jotka kannattaa oppia. Toki niit\u00e4 on muitakin, mutta n\u00e4m\u00e4 ovat mielest\u00e4ni avainasemassa:<\/p>\n<ul>\n<li><strong>Katkaisupisteiss\u00e4 k\u00e4sket\u00e4\u00e4n<\/strong> ohjelmaa pys\u00e4ytt\u00e4m\u00e4\u00e4n sen suorittaminen. Kun koodi on pys\u00e4htynyt t\u00e4ss\u00e4 vaiheessa, voit tarkastella muuttujia, n\u00e4hd\u00e4, mit\u00e4 arvoja on tallennettu muistiin ja niin edelleen.<\/li>\n<li><strong>Kellot<\/strong> ovat koodin muuttujia, joita haluat kirjaimellisesti katsoa, \u200b\u200bkun ne muuttuvat muuttujien suorittamisen aikana.<\/li>\n<li><strong>K\u00e4ynnist\u00e4<\/strong> k\u00e4ynnist\u00e4\u00e4 debuggerin. Vaikka keskeytyspisteet ja kellot olisivat asetettu, debuggeri ei tee mit\u00e4\u00e4n ennen kuin k\u00e4ynnist\u00e4t sen.<\/li>\n<li><strong>Step Into<\/strong> on toiminto, joka, kun painat funktiokutsua, vie sinut toimintoon, jota kutsutaan. Joskus t\u00e4m\u00e4 on hy\u00f6dyllist\u00e4, esimerkiksi jos haluat n\u00e4hd\u00e4, mit\u00e4 toiminto tekee; toisinaan se on tarpeetonta, jos v\u00e4lit\u00e4t vain funktion suorittamisesta tai v\u00e4lit\u00e4t vain siit\u00e4, mit\u00e4 se palauttaa.<\/li>\n<li><strong>Step Over<\/strong> -toiminnon avulla voit ohittaa funktion suorituksen siten, ett\u00e4 ohjelman suoritus pys\u00e4htyy v\u00e4litt\u00f6m\u00e4sti sen j\u00e4lkeen, kun toiminto, jonka yli olet astunut, on p\u00e4\u00e4ttynyt.<\/li>\n<li><strong>Step Out<\/strong> -toimintoa k\u00e4ytet\u00e4\u00e4n, kun olet astunut toimintoon, saavuttanut pisteen, jossa olet valmis koodin arvioinnin, ja sitten valmis astumaan takaisin sinne, miss\u00e4 olit asettanut keskeytyskohdan.<\/li>\n<li><strong>Stop<\/strong> lopettaa debuggerin suorittamisen.<\/li>\n<\/ul>\n<p>Kuulostaa suhteellisen selke\u00e4lt\u00e4, eik\u00f6? Mielest\u00e4ni t\u00e4m\u00e4 on helpoin n\u00e4hd\u00e4 k\u00e4yt\u00e4nn\u00f6ss\u00e4.<\/p>\n<p>Lis\u00e4ksi n\u00e4hd\u00e4ksesi, mitk\u00e4 kuvakkeet tekev\u00e4t mit\u00e4, yleens\u00e4 paras tapa on vied\u00e4 hiiren osoitin niiden p\u00e4\u00e4lle ja lukea sitten ty\u00f6kaluvihjeet. Kuitenkin, kun olet k\u00e4ytt\u00e4nyt niit\u00e4 muutaman kerran, tied\u00e4t, mit\u00e4 kukin tekee.<\/p>\n<p>Loppujen lopuksi kuvakkeet ovat melko kuvailevia.<\/p>\n<h3>Esimerkki<\/h3>\n<p>Olettaen, ett\u00e4 olet noudattanut edellisen artikkelin vaiheita, t\u00e4ss\u00e4 on lyhyt esimerkki siit\u00e4, kuinka voit asettaa keskeytyskohdan ja seurata sen suorittamista laajennuksen kautta.<\/p>\n<h4>1 Rajapiste<\/h4>\n<p>Huomaa alla olevassa kuvassa, ett\u00e4 olen sijoittanut keskeytyskohdan koodirivin viereen (kuten punainen piste osoittaa).<\/p>\n<p>T\u00e4\u00e4ll\u00e4 suoritus pys\u00e4htyy, kun k\u00e4ynnist\u00e4n debuggerin ja aloitan ohjelman suorittamisen.<\/p>\n<h4>2 Aseta kello<\/h4>\n<p>Seuraavaksi muuttujan katsominen tarkoittaa, ett\u00e4 haluamme n\u00e4hd\u00e4 muuttujan arvon koko ohjelman elinkaaren ajan. Alla lis\u00e4\u00e4n kellon $description-muuttujaan.<\/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=\"Visual Studio Code Debugger: Primer ja Screencast\" ><\/a><\/p>\n<p>Seuraavassa osiossa n\u00e4et kellon arvon sen j\u00e4lkeen, kun ohjelma on l\u00e4p\u00e4issyt kyseisen koodirivin.<\/p>\n<h4>3 Arvioi kello<\/h4>\n<p>Kun koodi on ohittanut kyseisen rivin, n\u00e4et muuttujan arvon\u00a0 virheenkorjausruudun <strong>Watch<\/strong> -osiossa.<\/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=\"Visual Studio Code Debugger: Primer ja Screencast\" ><\/a><\/p>\n<p>Huomaa funktiossa, ett\u00e4 woocommerce_wp_text_input kutsuu. K\u00e4yt\u00e4mme t\u00e4t\u00e4 funktiota esimerkkin\u00e4 siirty\u00e4ksemme funktioon, koska se on osa WooCommercen ydint\u00e4.<\/p>\n<h4>4 Valmistaudu astumaan sis\u00e4\u00e4n<\/h4>\n<p>Ennen kuin siirryt funktioon, on t\u00e4rke\u00e4\u00e4 varmistaa, ett\u00e4 funktion nimi on korostettu.<\/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=\"Visual Studio Code Debugger: Primer ja Screencast\" ><\/a><\/p>\n<p>Kun olet valmis, voit napsauttaa <strong>Step In<\/strong> -painiketta n\u00e4hd\u00e4ksesi, mit\u00e4 toiminnossa tapahtuu.<\/p>\n<h4>5 Astu sis\u00e4\u00e4n<\/h4>\n<p>Kun astut sis\u00e4\u00e4n, n\u00e4et koodin, jota et kirjoittanut. Sen sijaan se on koodi, joka on osa WooCommercea (ainakin t\u00e4ss\u00e4 esimerkiss\u00e4).<\/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=\"Visual Studio Code Debugger: Primer ja Screencast\" ><\/a><\/p>\n<p>Kokemuksesi perusteella n\u00e4et koodin, jonka ehk\u00e4 kirjoitit tai jonka joku muu kirjoitti.<\/p>\n<h4>6 Astu ulos<\/h4>\n<p>Kun olet poistunut koodista, palaat koodiriville heti sen j\u00e4lkeen, kun astuit koodiin.<\/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=\"Visual Studio Code Debugger: Primer ja Screencast\" ><\/a><\/p>\n<p>K\u00e4yd\u00e4 j\u00e4rkeen?<\/p>\n<h3>Screencast<\/h3>\n<p>Ja lopuksi, t\u00e4ss\u00e4 on eritt\u00e4in lyhyt kuvaesitys, jossa k\u00e4yd\u00e4\u00e4n l\u00e4pi, milt\u00e4 kaikki yll\u00e4 oleva n\u00e4ytt\u00e4\u00e4 toiminnassa:<\/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>Kuten videossa mainittiin, t\u00e4m\u00e4 ei ole mitenk\u00e4\u00e4n kattava, mutta sen pit\u00e4isi riitt\u00e4\u00e4 osoittamaan, kuinka tehokas virheenkorjaus voi olla.<\/p>\n<h2>Se vaatii aikoja ja harjoittelua<\/h2>\n<p>Virheenkorjaus vie hieman enemm\u00e4n aikaa kuin muuttujien siirt\u00e4minen n\u00e4yt\u00f6lle.<\/p>\n<p>Enk\u00e4 sano, etteik\u00f6 sen tekemisell\u00e4 olisi paikkaansa; Jos kuitenkin haluat saada syvemm\u00e4n ymm\u00e4rryksen siit\u00e4, mit\u00e4 tapahtuu, kun k\u00e4yt\u00e4t ohjelmaa, tai haluat tutkia esimerkiksi WordPressin ydint\u00e4, debuggerin k\u00e4ytt\u00f6 on todella hyv\u00e4 tapa tehd\u00e4 se.<\/p>\n<p>Lis\u00e4ksi v\u00e4it\u00e4n, ett\u00e4 debuggerin k\u00e4ytt\u00f6 voi auttaa ymm\u00e4rt\u00e4m\u00e4\u00e4n paremmin, mik\u00e4 on v\u00e4\u00e4rin (tai oikein) koodisi yhteydess\u00e4, jotta voit luoda sille parhaan mahdollisen ratkaisun.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/tommcfarlin.com\" class=\"external external_icon\">tommcfarlin.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Aion k\u00e4yd\u00e4 l\u00e4pi lyhyen screencastin lopussa, jotta voin n\u00e4ytt\u00e4\u00e4 Visual Studio Code -debuggerin toiminnassa.<\/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":[719,917,843],"tags":[1166],"class_list":["post-229106","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-kehittaejae","category-muut","category-opetusohjelmia","tag-affiai-fi"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/229106","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/comments?post=229106"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/229106\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media\/223730"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media?parent=229106"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/categories?post=229106"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/tags?post=229106"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}