{"id":228478,"date":"2022-10-24T14:35:00","date_gmt":"2022-10-24T11:35:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228478"},"modified":"2022-11-09T02:38:31","modified_gmt":"2022-11-08T23:38:31","slug":"debuger-kodu-programu-visual-studio-elementarz-i-screencast","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/pl\/debuger-kodu-programu-visual-studio-elementarz-i-screencast\/","title":{"rendered":"Debuger kodu programu Visual Studio: elementarz i screencast"},"content":{"rendered":"\n<p>W poprzednich postach m\u00f3wi\u0142em troch\u0119 o tym, dlaczego u\u017cywanie odpowiedniego debuggera w por\u00f3wnaniu do niekt\u00f3rych wbudowanych instrukcji PHP jest wa\u017cne. W <a href=\"https:\/\/wordpress.mediadoma.com\/pl\/xdebug-visual-studio-code-i-mamp\/\" title=\"ostatnim po\u015bcie\" >ostatnim po\u015bcie<\/a> przechodz\u0119 nawet przez to, jak skonfigurowa\u0107 Xdebug za pomoc\u0105 Visual Studio Code (i MAMP Pro, je\u015bli u\u017cywasz).<\/p>\n<p>Ale je\u015bli nigdy wcze\u015bniej nie korzysta\u0142e\u015b z takiego narz\u0119dzia, nigdy nie widzia\u0142e\u015b, jak ono dzia\u0142a, lub nigdy nie wiesz, dlaczego jest tak pot\u0119\u017cne, chc\u0119 om\u00f3wi\u0107 to troch\u0119 w tym po\u015bcie.<\/p>\n<p>Wi\u0119c zamierzam przej\u015b\u0107 przez to troch\u0119 w kontek\u015bcie kilku definicji i zrzut\u00f3w ekranu, a tak\u017ce kr\u00f3tkiego screencastu na ko\u0144cu, abym m\u00f3g\u0142 pokaza\u0107 dzia\u0142aj\u0105cy debugger Visual Studio Code.<\/p>\n<h2>Debuger kodu programu Visual Studio<\/h2>\n<p>Zak\u0142adaj\u0105c, \u017ce masz zainstalowany debugger; jest kilka poj\u0119\u0107, kt\u00f3rych warto si\u0119 nauczy\u0107. Jasne, jest ich wi\u0119cej, ale te, kt\u00f3re uwa\u017cam za kluczowe:<\/p>\n<ul>\n<li><strong>Punkty<\/strong> przerwania to miejsce, w kt\u00f3rym ka\u017cesz programowi zatrzyma\u0107 wykonywanie. Gdy kod zatrzyma si\u0119 w tym momencie, mo\u017cesz zbada\u0107 zmienne, zobaczy\u0107, jakie warto\u015bci s\u0105 przechowywane w pami\u0119ci i tak dalej.<\/li>\n<li><strong>Zegarki<\/strong> to zmienne w kodzie, kt\u00f3re chcesz dos\u0142ownie obserwowa\u0107, gdy zmieniaj\u0105 si\u0119 podczas wykonywania zmiennych.<\/li>\n<li><strong>Start<\/strong> wprawia debuger w ruch. Nawet je\u015bli masz ustawione punkty przerwania i zegarki, debuger nie zrobi nic, dop\u00f3ki go nie uruchomisz.<\/li>\n<li><strong>Step Into<\/strong> to akcja, kt\u00f3ra po wywo\u0142aniu funkcji zabierze Ci\u0119 do funkcji, kt\u00f3ra jest wywo\u0142ywana. Czasami jest to przydatne, na przyk\u0142ad je\u015bli chcesz zobaczy\u0107, co robi funkcja; innym razem jest to niepotrzebne, je\u015bli zale\u017cy ci tylko na wykonaniu funkcji lub zale\u017cy ci tylko na tym, co zwraca.<\/li>\n<li><strong>Przekroczenie<\/strong> pozwoli Ci przeskoczy\u0107 wykonywanie funkcji tak, \u017ce wykonywanie programu zostanie zatrzymane natychmiast po zako\u0144czeniu funkcji, nad kt\u00f3r\u0105 przesz\u0142e\u015b.<\/li>\n<li><strong>Step Out<\/strong> jest u\u017cywany, gdy wszed\u0142e\u015b do funkcji, osi\u0105gn\u0105\u0142e\u015b punkt, w kt\u00f3rym sko\u0144czy\u0142e\u015b ocenia\u0107 kod, a nast\u0119pnie jeste\u015b gotowy do wyj\u015bcia z powrotem do miejsca, w kt\u00f3rym ustawi\u0142e\u015b punkt przerwania.<\/li>\n<li><strong>Stop<\/strong> zako\u0144czy dzia\u0142anie debugera.<\/li>\n<\/ul>\n<p>Brzmi stosunkowo czysto, prawda? Moim zdaniem naj\u0142atwiej zobaczy\u0107 to w akcji.<\/p>\n<p>Ponadto, aby zobaczy\u0107, kt\u00f3re ikony robi\u0105 co, zwykle najlepiej jest najecha\u0107 na nie kursorem, a nast\u0119pnie przeczyta\u0107 podpowiedzi; jednak po pewnym czasie lub dw\u00f3ch korzystania z nich b\u0119dziesz zaznajomiony z tym, co ka\u017cdy z nich robi.<\/p>\n<p>W ko\u0144cu ikony s\u0105 do\u015b\u0107 opisowe.<\/p>\n<h3>Przyk\u0142ad<\/h3>\n<p>Maj\u0105c to na uwadze, zak\u0142adaj\u0105c, \u017ce wykona\u0142e\u015b kroki opisane w poprzednim artykule, oto kr\u00f3tki przyk\u0142ad, jak ustawi\u0107 punkt przerwania i \u015bledzi\u0107 jego wykonanie za pomoc\u0105 wtyczki.<\/p>\n<h4>1 punkt przerwania<\/h4>\n<p>Zauwa\u017c, \u017ce na poni\u017cszym obrazku umie\u015bci\u0142em punkt przerwania obok linii kodu (co wskazuje czerwona kropka).<\/p>\n<p>W tym miejscu wykonanie zostanie zatrzymane po uruchomieniu debugera i rozpocz\u0119ciu wykonywania programu.<\/p>\n<h4>2 Ustaw zegarek<\/h4>\n<p>Nast\u0119pnie obserwowanie zmiennej oznacza, \u017ce \u200b\u200bchcemy widzie\u0107 warto\u015b\u0107 zmiennej przez ca\u0142y cykl \u017cycia programu. Poni\u017cej dodaj\u0119 zegarek do zmiennej $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=\"Debuger kodu programu Visual Studio: elementarz i screencast\" ><\/a><\/p>\n<p>W nast\u0119pnej sekcji zobaczysz warto\u015b\u0107 zegarka po wykonaniu programu, kt\u00f3ry przekaza\u0142 t\u0119 lini\u0119 kodu.<\/p>\n<h4>3 Oce\u0144 zegarek<\/h4>\n<p>Gdy kod przejdzie przez ten wiersz, mo\u017cesz zobaczy\u0107 warto\u015b\u0107 zmiennej w\u00a0 sekcji <strong>Obserwacja<\/strong> w okienku debugowania.<\/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=\"Debuger kodu programu Visual Studio: elementarz i screencast\" ><\/a><\/p>\n<p>Zauwa\u017c, \u017ce w funkcji jest wywo\u0142anie woocommerce_wp_text_input. U\u017cyjemy tej funkcji jako przyk\u0142adu, aby przej\u015b\u0107 do funkcji, poniewa\u017c jest to funkcja, kt\u00f3ra jest cz\u0119\u015bci\u0105 rdzenia WooCommerce.<\/p>\n<h4>4 Przygotuj si\u0119 do wej\u015bcia<\/h4>\n<p>Przed wej\u015bciem do funkcji nale\u017cy si\u0119 upewni\u0107, \u017ce nazwa funkcji jest pod\u015bwietlona.<\/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=\"Debuger kodu programu Visual Studio: elementarz i screencast\" ><\/a><\/p>\n<p>Po zako\u0144czeniu b\u0119dziesz m\u00f3g\u0142 klikn\u0105\u0107 przycisk <strong>Wejd\u017a<\/strong>, aby zobaczy\u0107, co dzieje si\u0119 w funkcji.<\/p>\n<h4>5 Krok w<\/h4>\n<p>Po wej\u015bciu zobaczysz kod, kt\u00f3rego nie napisa\u0142e\u015b. Zamiast tego jest to kod b\u0119d\u0105cy cz\u0119\u015bci\u0105 WooCommerce (przynajmniej w tym przyk\u0142adzie).<\/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=\"Debuger kodu programu Visual Studio: elementarz i screencast\" ><\/a><\/p>\n<p>W oparciu o swoje do\u015bwiadczenie zobaczysz kod, kt\u00f3ry by\u0107 mo\u017ce napisa\u0142e\u015b lub napisa\u0142 kto\u015b inny.<\/p>\n<h4>6 Wyjd\u017a<\/h4>\n<p>Po wyj\u015bciu z kodu wr\u00f3cisz do wiersza kodu bezpo\u015brednio po tym, w kt\u00f3rym wszed\u0142e\u015b w kod.<\/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=\"Debuger kodu programu Visual Studio: elementarz i screencast\" ><\/a><\/p>\n<p>Ma sens?<\/p>\n<h3>Screencast<\/h3>\n<p>I na koniec, oto bardzo kr\u00f3tki screencast pokazuj\u0105cy, jak wygl\u0105da to wszystko w akcji:<\/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>Jak wspomniano w filmie, nie jest to wyczerpuj\u0105ce, ale powinno wystarczy\u0107, aby pokaza\u0107, jak pot\u0119\u017cne mo\u017ce by\u0107 debugowanie.<\/p>\n<h2>To wymaga czasu i praktyki<\/h2>\n<p>Debugowanie zajmuje troch\u0119 wi\u0119cej czasu ni\u017c zrzucanie zmiennych na ekran.<\/p>\n<p>I nie m\u00f3wi\u0119, \u017ce robienie tego nie ma swojego miejsca; Je\u015bli jednak chcesz lepiej zrozumie\u0107, co si\u0119 dzieje za ka\u017cdym razem, gdy uruchamiasz sw\u00f3j program lub chcesz pozna\u0107, powiedzmy, rdze\u0144 WordPressa, u\u017cycie debuggera jest naprawd\u0119 dobrym sposobem na zrobienie tego.<\/p>\n<p>Ponadto twierdz\u0119, \u017ce u\u017cycie debuggera mo\u017ce pom\u00f3c w lepszym zrozumieniu tego, co dzieje si\u0119 nie tak (lub dobrze) w kontek\u015bcie kodu, aby\u015b by\u0142 w stanie stworzy\u0107 najlepsze mo\u017cliwe rozwi\u0105zanie.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">\u0179r\u00f3d\u0142o nagrywania:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/tommcfarlin.com\" class=\"external external_icon\">tommcfarlin.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Na ko\u0144cu przejd\u0119 przez kr\u00f3tki screencast, abym m\u00f3g\u0142 pokaza\u0107 debugger Visual Studio Code w akcji.<\/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":[721,919,845],"tags":[1169],"class_list":["post-228478","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-deweloper","category-inny","category-samouczki","tag-affiai-pl"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/posts\/228478","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/comments?post=228478"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/posts\/228478\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/media\/223730"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/media?parent=228478"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/categories?post=228478"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/tags?post=228478"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}