{"id":228415,"date":"2022-10-24T14:16:00","date_gmt":"2022-10-24T11:16:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228415"},"modified":"2022-11-09T02:19:31","modified_gmt":"2022-11-08T23:19:31","slug":"visual-studio-code-debugger-a-primer-och-screencast","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/sv\/visual-studio-code-debugger-a-primer-och-screencast\/","title":{"rendered":"Visual Studio Code Debugger: A Primer och Screencast"},"content":{"rendered":"\n<p>I tidigare inl\u00e4gg har jag pratat lite om varf\u00f6r det \u00e4r viktigt att anv\u00e4nda en ordentlig debugger kontra n\u00e5gra av PHPs inbyggda uttalanden. I <a href=\"https:\/\/wordpress.mediadoma.com\/sv\/xdebug-visual-studio-code-och-mamp\/\" title=\"f\u00f6rra inl\u00e4gget\" >f\u00f6rra inl\u00e4gget<\/a> g\u00e5r jag till och med igenom hur man st\u00e4ller in Xdebug med Visual Studio Code (och MAMP Pro, om du anv\u00e4nder).<\/p>\n<p>Men om du aldrig har anv\u00e4nt ett s\u00e5dant h\u00e4r verktyg f\u00f6rut, du har aldrig sett hur det fungerar, eller du har aldrig sett varf\u00f6r det \u00e4r s\u00e5 kraftfullt, jag vill ta upp det lite i det h\u00e4r inl\u00e4gget.<\/p>\n<p>S\u00e5 jag kommer att g\u00e5 igenom lite av att g\u00f6ra detta inom ramen f\u00f6r n\u00e5gra definitioner och sk\u00e4rmdumpar samt en kort sk\u00e4rms\u00e4ndning i slutet s\u00e5 att jag kan visa Visual Studio Code-debuggern som fungerar.<\/p>\n<h2>Visual Studio Code Debugger<\/h2>\n<p>F\u00f6rutsatt att du har fels\u00f6karen installerad; det finns n\u00e5gra termer som \u00e4r v\u00e4rda att l\u00e4ra sig. Visst, det finns fler, men dessa \u00e4r de som jag anser vara viktiga:<\/p>\n<ul>\n<li><strong>Brytpunkter<\/strong> \u00e4r d\u00e4r du s\u00e4ger \u00e5t programmet att stoppa dess k\u00f6rning. N\u00e4r koden har stannat vid det h\u00e4r laget kan du unders\u00f6ka variabler, se vilka v\u00e4rden som \u00e4r lagrade i minnet och s\u00e5 vidare.<\/li>\n<li><strong>Klockor<\/strong> \u00e4r variabler i koden som du bokstavligen vill titta p\u00e5 n\u00e4r de \u00e4ndras under exekveringen av variabler.<\/li>\n<li><strong>Start<\/strong> s\u00e4tter ig\u00e5ng fels\u00f6kningen. \u00c4ven om du har brytpunkter och klockor inst\u00e4llda, kommer debuggern inte att g\u00f6ra n\u00e5got f\u00f6rr\u00e4n du startar den.<\/li>\n<li><strong>Step Into<\/strong> \u00e4r en \u00e5tg\u00e4rd som, n\u00e4r du trycker p\u00e5 ett funktionsanrop, tar dig till funktionen som anropas. Ibland \u00e4r detta anv\u00e4ndbart, som om du vill se vad funktionen g\u00f6r; andra g\u00e5nger \u00e4r det on\u00f6digt om du bara bryr dig om att funktionen k\u00f6rs eller om du bara bryr dig om vad den returnerar.<\/li>\n<li><strong>Steg \u00f6ver<\/strong> l\u00e5ter dig g\u00e5 \u00f6ver en funktions exekvering s\u00e5 att exekveringen av programmet stoppas omedelbart efter att funktionen som du har klivit \u00f6ver har avslutats.<\/li>\n<li><strong>Step Out<\/strong> anv\u00e4nds n\u00e4r du har klivit in i en funktion, tr\u00e4ffat en punkt d\u00e4r du \u00e4r klar med att utv\u00e4rdera koden och sedan redo att g\u00e5 tillbaka till d\u00e4r du hade st\u00e4llt in en brytpunkt.<\/li>\n<li><strong>Stop<\/strong> kommer att avsluta exekveringen av fels\u00f6karen.<\/li>\n<\/ul>\n<p>L\u00e5ter relativt tydligt, eller hur? Enligt min mening \u00e4r det l\u00e4ttast att se detta i aktion.<\/p>\n<p>Dessutom, f\u00f6r att se vilka ikoner som g\u00f6r vad, \u00e4r vanligtvis det b\u00e4sta du kan g\u00f6ra att h\u00e5lla muspekaren \u00f6ver dem och sedan l\u00e4sa verktygstipsen; men efter en eller tv\u00e5 av att ha anv\u00e4nt dem kommer du att bli bekant med vad var och en g\u00f6r.<\/p>\n<p>N\u00e4r allt kommer omkring \u00e4r ikonerna ganska beskrivande.<\/p>\n<h3>Ett exempel<\/h3>\n<p>Med det sagt, f\u00f6rutsatt att du har f\u00f6ljt stegen i f\u00f6reg\u00e5ende artikel, h\u00e4r \u00e4r ett kort exempel p\u00e5 hur du kan st\u00e4lla in en brytpunkt och f\u00f6lja dess exekvering genom ett plugin.<\/p>\n<h4>1 Brytpunkt<\/h4>\n<p>Observera i bilden nedan att jag har placerat en brytpunkt bredvid en kodrad (som indikeras av den r\u00f6da pricken).<\/p>\n<p>Det \u00e4r h\u00e4r k\u00f6rningen kommer att stoppa n\u00e4r jag startar fels\u00f6karen och b\u00f6rjar k\u00f6ra programmet.<\/p>\n<h4>2 St\u00e4ll in en klocka<\/h4>\n<p>D\u00e4refter betyder att titta p\u00e5 en variabel att vi vill se v\u00e4rdet av en variabel under programmets livscykel. Nedan l\u00e4gger jag till en klocka till variabeln $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=\"Visual Studio Code Debugger: A Primer och Screencast\" ><\/a><\/p>\n<p>I n\u00e4sta avsnitt kommer du att se v\u00e4rdet p\u00e5 klockan efter att programmet k\u00f6rts passerat den kodraden.<\/p>\n<h4>3 Utv\u00e4rdera klockan<\/h4>\n<p>N\u00e4r koden har passerat den raden kan du se v\u00e4rdet p\u00e5 variabeln i\u00a0 avsnittet <strong>Watch<\/strong> i fels\u00f6kningsf\u00f6nstret.<\/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: A Primer och Screencast\" ><\/a><\/p>\n<p>Observera i funktionen, det finns ett anrop till woocommerce_wp_text_input. Vi kommer att anv\u00e4nda den h\u00e4r funktionen som ett exempel f\u00f6r att g\u00e5 in i en funktion eftersom det \u00e4r en funktion som \u00e4r en del av WooCommerce-k\u00e4rnan.<\/p>\n<h4>4 F\u00f6rbered dig p\u00e5 att g\u00e5 in<\/h4>\n<p>Innan du g\u00e5r in i en funktion \u00e4r det viktigt att se till att funktionsnamnet \u00e4r markerat.<\/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: A Primer och Screencast\" ><\/a><\/p>\n<p>N\u00e4r du \u00e4r klar kommer du att kunna klicka p\u00e5\u00a0 knappen <strong>Step In<\/strong> f\u00f6r att se vad som h\u00e4nder i funktionen.<\/p>\n<h4>5 Kliv in<\/h4>\n<p>N\u00e4r du kliver in ser du kod som du inte skrev. Ist\u00e4llet \u00e4r det kod som \u00e4r en del av WooCommerce (\u00e5tminstone i det h\u00e4r exemplet).<\/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: A Primer och Screencast\" ><\/a><\/p>\n<p>Baserat p\u00e5 din erfarenhet kommer du att se kod som du kanske skrev eller som n\u00e5gon annan skrev.<\/p>\n<h4>6 Kliv ut<\/h4>\n<p>N\u00e4r du har klivit ut ur koden, kommer du att \u00e5terg\u00e5 till kodraden direkt efter d\u00e4r du klev in i koden.<\/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: A Primer och Screencast\" ><\/a><\/p>\n<p>Vettigt?<\/p>\n<h3>En screencast<\/h3>\n<p>Och slutligen, h\u00e4r \u00e4r en mycket kort screencast som g\u00e5r igenom hur allt ovanst\u00e5ende ser ut i aktion:<\/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>Som n\u00e4mnts i videon \u00e4r detta inte p\u00e5 n\u00e5got s\u00e4tt helt\u00e4ckande, men det borde vara tillr\u00e4ckligt f\u00f6r att visa hur kraftfull fels\u00f6kning kan vara.<\/p>\n<h2>Det tar tid och \u00f6vning<\/h2>\n<p>Fels\u00f6kning tar lite mer tid \u00e4n att dumpa variabler p\u00e5 sk\u00e4rmen.<\/p>\n<p>Och jag s\u00e4ger inte att det inte har sin plats att g\u00f6ra det; Men om du vill f\u00e5 en djupare f\u00f6rst\u00e5else f\u00f6r vad som h\u00e4nder n\u00e4r du k\u00f6r ditt program, eller om du vill utforska, s\u00e4g, WordPress-k\u00e4rnan, \u00e4r det ett riktigt bra s\u00e4tt att anv\u00e4nda en debugger.<\/p>\n<p>Dessutom skulle jag h\u00e4vda att anv\u00e4ndning av en debugger kan hj\u00e4lpa till att ge en st\u00f6rre f\u00f6rst\u00e5else f\u00f6r vad som g\u00e5r fel (eller r\u00e4tt) inom ramen f\u00f6r din kod s\u00e5 att du kan skapa den b\u00e4sta m\u00f6jliga l\u00f6sningen f\u00f6r det.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Inspelningsk\u00e4lla:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/tommcfarlin.com\" class=\"external external_icon\">tommcfarlin.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Jag ska g\u00e5 igenom en kort sk\u00e4rms\u00e4ndning i slutet s\u00e5 att jag kan visa Visual Studio Code-debuggern i aktion.<\/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":[848,922,724],"tags":[1173],"class_list":["post-228415","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-handledningar","category-oevrig","category-utvecklaren","tag-affiai-sv"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts\/228415","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/comments?post=228415"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts\/228415\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/media\/223730"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/media?parent=228415"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/categories?post=228415"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/tags?post=228415"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}