{"id":187732,"date":"2021-02-24T16:00:51","date_gmt":"2021-02-24T13:00:51","guid":{"rendered":"https:\/\/en.buradabiliyorum.com\/what-is-a-debugger-why-to-use-one-when-programming-cloudsavvy-it\/"},"modified":"2021-02-24T16:00:51","modified_gmt":"2021-02-24T13:00:51","slug":"what-is-a-debugger-why-to-use-one-when-programming-cloudsavvy-it","status":"publish","type":"post","link":"https:\/\/buradabiliyorum.com\/en\/what-is-a-debugger-why-to-use-one-when-programming-cloudsavvy-it\/","title":{"rendered":"#What Is a Debugger? Why To Use One When Programming \u2013 CloudSavvy IT"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_84 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-6a24963dddbc8\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #dd3333;color:#dd3333\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #dd3333;color:#dd3333\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-6a24963dddbc8\" checked aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/buradabiliyorum.com\/en\/what-is-a-debugger-why-to-use-one-when-programming-cloudsavvy-it\/#Moving_Past_consolelog\" >Moving Past console.log<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/buradabiliyorum.com\/en\/what-is-a-debugger-why-to-use-one-when-programming-cloudsavvy-it\/#Step_Into_Step_Out_Step_Over\" >Step Into, Step Out, Step Over<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/buradabiliyorum.com\/en\/what-is-a-debugger-why-to-use-one-when-programming-cloudsavvy-it\/#Conditional_Breakpoint_Settings\" >Conditional Breakpoint Settings<\/a><\/li><\/ul><\/nav><\/div>\n<p><strong>&#8220;#What Is a Debugger? Why To Use One When Programming \u2013 CloudSavvy IT&#8221;<\/strong><\/p>\n<div id=\"article-content-area\">\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-9843\" src=\"https:\/\/www.cloudsavvyit.com\/thumbcache\/0\/0\/403c3e16d692f67591bce2cb858e2358\/p\/uploads\/2021\/02\/ce55166f.png\" alt=\"\" width=\"700\" height=\"300\" onload=\"pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\" onerror=\"this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\"\/><\/p>\n<p>If you\u2019re one of the many programmers who debug using <code>console.log<\/code>, or something similar, you\u2019re missing out on a lot of features that debuggers can offer. If you\u2019re often getting stuck tracking down logic bugs, you may want to try using this feature of your\u00a0IDE.<\/p>\n<h2 role=\"heading\" aria-level=\"2\"><span class=\"ez-toc-section\" id=\"Moving_Past_consolelog\"><\/span>Moving Past console.log<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Of course, logging debug output to the console is very necessary in many situations. Sometimes, it\u2019s good to just log an object and check out the value it\u2019s set to, which can solve many basic problems.<\/p>\n<p>However, the second it becomes more complicated than that, a debugger can be useful. Debuggers allow you to set breakpoints in your code, and step over the execution. They also allow you to inspect the memory of your <a href=\"https:\/\/buradabiliyorum.com\/en\/category\/download-scripts-themes-apps\/\" data-internallinksmanager029f6b8e52c=\"9\" title=\"Download Scripts &amp; Themes &amp; Apps\" target=\"_blank\" rel=\"noopener\">app<\/a>lication as it changes with function execution. This can be crucial to tracking down problems.<\/p>\n<p>They\u2019re pretty simple to use. The exact implementation will depend on your IDE, but most allow you to set breakpoints by clicking on the sidebar, which will display a red circle usually to indicate that the code will stop there.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-9844\" src=\"https:\/\/www.cloudsavvyit.com\/thumbcache\/0\/0\/fe0c35586049e521c95efbe32f6bd5f2\/p\/uploads\/2021\/02\/e78677b4.png\" alt=\"\" width=\"700\" height=\"396\" onload=\"pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\" onerror=\"this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\"\/><\/p>\n<p>Then, you can just click start, and the debugger will pause whenever the breakpoint is reached (if it ever is). For example, you could set a breakpoint when a certain button gets pressed, and the program would run normally until the button was pressed. After the breakpoint is reached, the program is paused entirely.<\/p>\n<p>While it\u2019s paused, you can view the variables of the application. This is configurable, and automatically set to what Visual Studio thinks is useful. You can manually watch variables, or just view the local variables.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-9845\" src=\"https:\/\/www.cloudsavvyit.com\/thumbcache\/0\/0\/4de52c091b5f71f63e6bb85dfa0fb4a1\/p\/uploads\/2021\/02\/95dfabb3.png\" alt=\"\" width=\"700\" height=\"293\" onload=\"pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\" onerror=\"this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\"\/><\/p>\n<p>In this case, it\u2019s useful to view the raw data for the class. The list class, for example, seems to just be an <code>object[]<\/code>. However, in practice it has a lot of other variables on the class itself. Not enough to matter of course, but it\u2019s interesting to be able to see everything that gets allocated.<\/p>\n<h2 role=\"heading\" aria-level=\"2\"><span class=\"ez-toc-section\" id=\"Step_Into_Step_Out_Step_Over\"><\/span>Step Into, Step Out, Step Over<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Of course, just pausing the program isn\u2019t too useful, so debuggers will have tools to essentially play back execution frame by frame, in this case, line by line.<\/p>\n<p>You\u2019ll find the controls in Visual Studio up at the top here, underlined in red.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-9846\" src=\"https:\/\/www.cloudsavvyit.com\/thumbcache\/0\/0\/758d7358989e90e19f4444e0f8c0dc41\/p\/uploads\/2021\/02\/ccd5d246.png\" alt=\"\" width=\"444\" height=\"124\" onload=\"pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\" onerror=\"this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\"\/><\/p>\n<p>These all do different things.<\/p>\n<ul>\n<li><strong>Step Into<\/strong> will cause the debugger to go line by line, but also show you basically every line that gets executed. If you call one of your functions, it will move into, or \u201cstep into,\u201d that function. Once the function returns, it will step out.<\/li>\n<li><strong>Step Over<\/strong> also goes line by line, but in this case is confined to the current scope. It will not go into function calls, instead just going to literally the next line in your source code, no matter how many functions ended up being called.<\/li>\n<li><strong>Step Out<\/strong> basically fast forwards until the next <code>return<\/code>\u00a0statement, stepping out of the current stack frame. This allows you to exit functions after you\u2019ve seen enough.<\/li>\n<\/ul>\n<p>Using these three controls, you have full control over the program, and can view as much or as little of the execution as you want.<\/p>\n<p>Meanwhile, as you\u2019re stepping around code, you can view the memory and local variables for each function, examine their values, and see how they change as you step forward in time.<\/p>\n<h2 role=\"heading\" aria-level=\"2\"><span class=\"ez-toc-section\" id=\"Conditional_Breakpoint_Settings\"><\/span>Conditional Breakpoint Settings<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>In Visual Studio, breakpoints can be more than just \u201cstop on this line of code.\u201d You can set conditional breakpoints that will only activate when certain conditions or values are met.<\/p>\n<p>Right click on a breakpoint and select \u201cConditions.\u201d<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-9848\" src=\"https:\/\/www.cloudsavvyit.com\/thumbcache\/0\/0\/2056bf84862035a933211dc67ace432a\/p\/uploads\/2021\/02\/11d3d058.png\" alt=\"\" width=\"486\" height=\"193\" onload=\"pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\" onerror=\"this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\"\/><\/p>\n<p>From here you can set an if statement that will be checked before running the breakpoint.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-9849\" src=\"https:\/\/www.cloudsavvyit.com\/thumbcache\/0\/0\/13440c2b285a40a9da00868c6984e4b0\/p\/uploads\/2021\/02\/c5909be2.png\" alt=\"\" width=\"700\" height=\"263\" onload=\"pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\" onerror=\"this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\"\/>\n<\/div>\n<blockquote><p><strong><span style=\"color: #ff6600;\">If you liked the article, do not forget to share it with your friends. Follow us on\u00a0<span style=\"color: #ff0000;\"><a style=\"color: #ff0000;\" href=\"https:\/\/news.google.com\/publications\/CAAqBwgKMLG0nwswvr63Aw\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Google News<\/a><\/span>\u00a0too, click on the star and choose us from your favorites.<\/span><\/strong><\/p><\/blockquote>\n<blockquote>\n<p style=\"text-align: center;\">For forums sites go to <span style=\"color: #ff9900;\"><a style=\"color: #ff9900;\" href=\"https:\/\/forum.buradabiliyorum.com\/\" target=\"_blank\" rel=\"noopener\">Forum.BuradaBiliyorum.Com<\/a><\/span><\/strong><\/p>\n<\/blockquote>\n<blockquote>\n<p style=\"text-align: center;\"><strong>If you want to read more like this article, you can visit our <span style=\"color: #ff9900;\"><a style=\"color: #ff9900;\" href=\"https:\/\/en.buradabiliyorum.com\/technology\/\" target=\"_blank\" rel=\"noopener\">Technology category.<\/a><\/span><\/strong><\/p>\n<\/blockquote>\n<p><span style=\"color: black;\"><a style=\"color: #ff9900;\" href=\"https:\/\/www.cloudsavvyit.com\/9842\/what-is-a-debugger-why-to-use-one-when-programming\/\" target=\"_blank\" rel=\"noopener\">Source<\/a><\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>&#8220;#What Is a Debugger? Why To Use One When Programming \u2013 CloudSavvy IT&#8221; If you\u2019re one of the many programmers who debug using console.log, or something similar, you\u2019re missing out on a lot of features that debuggers can offer. If you\u2019re often getting stuck tracking down logic bugs, you may want to try using this&#8230;<\/p>\n","protected":false},"author":1,"featured_media":187733,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"https:\/\/www.cloudsavvyit.com\/thumbcache\/0\/0\/403c3e16d692f67591bce2cb858e2358\/p\/uploads\/2021\/02\/ce55166f.png","fifu_image_alt":"","footnotes":""},"categories":[18],"tags":[],"class_list":["post-187732","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-technology"],"_links":{"self":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts\/187732","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/comments?post=187732"}],"version-history":[{"count":0,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts\/187732\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/media\/187733"}],"wp:attachment":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/media?parent=187732"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/categories?post=187732"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/tags?post=187732"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}