{"id":22359,"date":"2023-01-25T15:02:41","date_gmt":"2023-01-25T14:02:41","guid":{"rendered":"https:\/\/careerfoundry.inbearbeitung.de\/en\/?p=22359"},"modified":"2023-01-25T15:02:41","modified_gmt":"2023-01-25T14:02:41","slug":"what-is-debugging","status":"publish","type":"post","link":"https:\/\/careerfoundry.inbearbeitung.de\/en\/blog\/web-development\/what-is-debugging\/","title":{"rendered":"What is Debugging? A Beginner\u2019s Guide for Coders"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">We all know the feeling. <\/span><span style=\"font-weight: 400;\">You\u2019re following a YouTube tutorial and coding along. Your code works as expected. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">Then, at one point in the tutorial, you notice that you\u2019re getting a different result from the tutor. But you followed and wrote every line of code as they did! <\/span><span style=\"font-weight: 400;\">Where\u2019s the error coming from?<\/span><\/p>\n<p><span style=\"font-weight: 400;\">You rewind the video and delete the latest code. You then rewrite the last part\u2014same error.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">You can feel some frustration building up inside. Luckily, the YouTube video has a <a href=\"https:\/\/careerfoundry.inbearbeitung.de\/en\/blog\/web-development\/what-is-github\/\" target=\"_blank\" rel=\"noopener\">Github repo<\/a>\u00a0that you can refer to.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">You visit the repository URL and countercheck your code. This is when you see it\u2014a missing semicolon! <\/span><span style=\"font-weight: 400;\">You feel happy, but a little stupid.<\/span><\/p>\n<p><strong>What you\u2019ve done is called \u201cdebugging&#8221;\u2014finding errors in your code.\u00a0<\/strong><\/p>\n<p><span style=\"font-weight: 400;\">In this article, we answer the question what is debugging, and look at some of the errors that you can find during the process.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">We also talk about the different kinds of debugging, the steps you take when finding bugs (errors in your code), some techniques and tools you can use to help you debug, and how to avoid bugs and errors in the first place.<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a href=\"#what-is-debugging\"><strong>What is debugging?<\/strong><\/a>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><a href=\"#a-brief-look-at-history\"><span style=\"font-weight: 400;\">A brief look at history<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><a href=\"#types-of-errors\"><span style=\"font-weight: 400;\">Types of errors<\/span><\/a><\/li>\n<\/ul>\n<\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a href=\"#types-of-debugging\"><strong>Types of debugging<\/strong><\/a>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><a href=\"#reactive-debugging\"><span style=\"font-weight: 400;\">Reactive debugging<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><a href=\"#proactive-debugging\"><span style=\"font-weight: 400;\">Proactive debugging<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><a href=\"#a-word-on-remote-debugging\"><span style=\"font-weight: 400;\">A word on remote debugging<\/span><\/a><\/li>\n<\/ul>\n<\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a href=\"#the-five-steps-of-debugging\"><strong>The five steps of debugging<\/strong><\/a>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><a href=\"#step-one-gather-information-about-the-error\"><span style=\"font-weight: 400;\">Step One: Gather information about the error<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><a href=\"#step-two-isolate-the-error\"><span style=\"font-weight: 400;\">Step Two: Isolate the error<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><a href=\"#step-three-identify-the-error\"><span style=\"font-weight: 400;\">Step Three: Identify the error<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><a href=\"#step-four-determine-how-to-fix-the-error\"><span style=\"font-weight: 400;\">Step Four: Determine how to fix the error<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><a href=\"#step-five-apply-and-test\"><span style=\"font-weight: 400;\">Step Five: Apply and test<\/span><\/a><\/li>\n<\/ul>\n<\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a href=\"#debugging-techniques\"><strong>Debugging techniques<\/strong><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a href=\"#debugging-tools\"><strong>Debugging tools<\/strong><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a href=\"#how-to-prevent-bugs\"><strong>How to prevent bugs<\/strong><\/a>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a href=\"#writing-tests\"><span style=\"font-weight: 400;\">Writing tests<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a href=\"#writing-pseudo-code\"><span style=\"font-weight: 400;\">Writing pseudo-code<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a href=\"#writing-simple-code\"><span style=\"font-weight: 400;\">Writing simple code<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a href=\"#using-modules\"><span style=\"font-weight: 400;\">Using modules<\/span><\/a><\/li>\n<\/ul>\n<\/li>\n<li aria-level=\"1\"><a href=\"#wrap-up\"><strong>Wrap-up<\/strong><\/a><\/li>\n<\/ol>\n<p>All ready to immerse yourself in the world of debugging? Then let&#8217;s begin!<\/p>\n<h2 id=\"what-is-debugging\"><span style=\"font-weight: 400;\">1. What is debugging?<\/span><\/h2>\n<figure id=\"attachment_22360\" aria-describedby=\"caption-attachment-22360\" style=\"width: 1080px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-22360 size-full\" src=\"http:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2023\/01\/debugging_pains-tweet.jpeg\" alt=\"A Twitter joke about debugging, where a developer describes bugs as just their computer hating them.\" width=\"1080\" height=\"582\" title=\"\" srcset=\"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2023\/01\/debugging_pains-tweet.jpeg 1080w, https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2023\/01\/debugging_pains-tweet-300x162.jpeg 300w, https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2023\/01\/debugging_pains-tweet-1024x552.jpeg 1024w, https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2023\/01\/debugging_pains-tweet-768x414.jpeg 768w\" sizes=\"auto, (max-width: 1080px) 100vw, 1080px\" \/><figcaption id=\"caption-attachment-22360\" class=\"wp-caption-text\">Source: <em><a href=\"https:\/\/twitter.com\/vishalmalvi_\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">@vishalmalvi<\/span><\/a><\/em><\/figcaption><\/figure>\n<p><span style=\"font-weight: 400;\">First of all, debugging doesn\u2019t mean staring at your screen and wondering why your computer hates you.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Debugging is a process that involves identifying existing or even potential errors in a program. A program is a set of \u201cinstructions\u201d that tell the computer what it needs to do.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">For example, when you boot your computer and click on a browser like Google Chrome, it opens up.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">A programmer wrote instructions for the computer to follow every time someone clicks on the browser icon.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Why is fixing errors in a program known as \u201cdebugging\u201d? Let\u2019s take a walk back in time.<\/span><\/p>\n<h3 id=\"a-brief-look-at-history\"><span style=\"font-weight: 400;\">A brief look at history<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">The term \u201cbug\u201d had been used before to describe mechanical malfunctions. The first person to use it to refer to computing problems was Admiral Grace Murray Hopper in the 1940s.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">She worked in the navy, was a computer pioneer, and was working on the Mark II and Mark III computers.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Murray Hopper first used the term when she and her team found a moth inside their computer that was inhibiting its functioning. So, the term has a very literal origin!<\/span><\/p>\n<h3 id=\"types-of-errors\"><span style=\"font-weight: 400;\">Types of errors<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">There are various types of errors that can result in your program not doing what\u2019s expected or failing to run at all. Let\u2019s learn about them below:<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Syntax errors<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Syntax refers to the \u201crules\u201d that define a programming language. <\/span><a href=\"https:\/\/faculty.washington.edu\/ajko\/papers\/Ko2003ModelOfErrors.pdf\" rel=\"noopener\"><span style=\"font-weight: 400;\">Syntax errors<\/span><\/a><span style=\"font-weight: 400;\">, therefore, result from \u201cbreaking\u201d programming language &#8220;rules.&#8221;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Syntax errors include typos or missing a semicolon.<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Logical errors<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">A logical error occurs when your program doesn\u2019t work the way it should. The program is able to execute, though.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Let\u2019s look at an example.\u00a0<\/span><\/p>\n<blockquote>\n<pre><code>\r\n<span style=\"font-weight: 400;\">for (var i = 1; i &lt;= 10; i++) {<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0if (i % 2 == 0) {<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0console.log(i);<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n<\/code><\/pre>\n<\/blockquote>\n<p><span style=\"font-weight: 400;\">In the above for loop, we\u2019re trying to generate all the even numbers below 10. The above code runs, giving the following even numbers: 2, 4, 6, 8, and 10.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">However, there\u2019s a problem with the results. Even numbers less than ten should include the number zero. Because we set our loop to begin at one instead of zero, we miss out on the first even number, zero.<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Runtime errors<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">A runtime error occurs when you\u2019re executing a program but execution stops. Sometimes, runtime errors can be caused by the environment in which you run your program.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">There are many other types of errors that you\u2019ll learn as you keep learning code. Better still,\u00a0 learn how to \u201ccatch\u201d them in your code via concepts like \u201cerrors and exception handling.&#8221;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Phew! That was a lot of new concepts! <\/span><span style=\"font-weight: 400;\">Now that we\u2019ve answered the question \u201cWhat is debugging?&#8221; let\u2019s learn about the various types.<\/span><\/p>\n<h2 id=\"types-of-debugging\"><span style=\"font-weight: 400;\">2. Types of debugging<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Debugging can be largely categorized into two types: reactive and proactive. Let\u2019s dig deeper and learn a little more about them.<\/span><\/p>\n<h3 id=\"reactive-debugging\"><span style=\"font-weight: 400;\">Reactive debugging<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">This is done after the bug has been identified. In the previous section, we looked at different types of errors.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">All the types of errors we\u2019ve come across so far are resolved via reactive debugging.<\/span><\/p>\n<h3 id=\"proactive-debugging\"><span style=\"font-weight: 400;\">Proactive debugging<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">In proactive debugging, developers write code (as part of the program) that\u2019s on the \u201clookout\u201d for errors.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">This \u201cextra\u201d code doesn\u2019t affect the functionality of the rest of the program.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Proactive debugging is also referred to as preemptive debugging.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Proactive debugging is a part of both defensive and offensive programming, which are two other types of programming.<\/span><\/p>\n<h3 id=\"a-word-on-remote-debugging\"><span style=\"font-weight: 400;\">A word on remote debugging<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">It\u2019s important to learn remote debugging as you become a more experienced developer. This is because the way in which we structure software changes a lot.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">For example, we have more and more software <\/span><a href=\"https:\/\/careerfoundry.inbearbeitung.de\/en\/blog\/web-development\/cloud-computing-aws\/\"><span style=\"font-weight: 400;\">running in the cloud<\/span><\/a><span style=\"font-weight: 400;\">. This means that we might not be able to debug some of the software locally on our computers.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Remote debugging is when you find bugs in an application that doesn\u2019t run on your local computer. How cool is that?<\/span><\/p>\n<p><span style=\"font-weight: 400;\">We\u2019ll delve more deeply into debugging types when we talk about techniques later on.<\/span><\/p>\n<h2 id=\"the-five-steps-of-debugging\"><span style=\"font-weight: 400;\">3. The five steps of debugging<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">In the quest to really understand what is debugging, there must be a way to make it more manageable and, who knows, maybe even pleasant.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Let\u2019s discuss five simple steps to do this:\u00a0<\/span><\/p>\n<h3 id=\"step-one-gather-information-about-the-error\"><span style=\"font-weight: 400;\">Step One: Gather information about the error<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">As a beginner programmer, you\u2019re highly likely to make syntax errors. As a result, keeping an eye on these should be high on your priority list. Another thing you need to do is read error messages and try to understand them.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">If you\u2019re working with any data, for example, user data, check that too. You may have forgotten to perform data validation checks.<\/span><\/p>\n<h3 id=\"step-two-isolate-the-error\"><span style=\"font-weight: 400;\">Step Two: Isolate the error<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">In this step, the goal is to try and identify the source of the error. You might need to \u201crecreate\u201d the error so as to know when it happens.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">You could also comment out parts of the code and keep checking to see what section of your program could be causing the error.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">You can also add print statements within your code (console.log in JavaScript). For example, if you\u2019re able to print the output of a function, then it isn\u2019t likely to be the one causing the error.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Keep doing this after every few lines of code. Eventually, you\u2019ll see the section of your code that\u2019s causing the error.<\/span><\/p>\n<h3 id=\"step-three-identify-the-error\"><span style=\"font-weight: 400;\">Step Three: Identify the error<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Once you\u2019ve narrowed down the section of the program that\u2019s causing the error, you need to find the error itself. A great place to start is with a hypothesis.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">For example, if you find that an error is coming from a field on your form, your hypothesis might be that you\u2019re using the wrong data type.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">You might be trying to add strings and integers, for instance.\u00a0<\/span><\/p>\n<h3 id=\"step-four-determine-how-to-fix-the-error\"><span style=\"font-weight: 400;\">Step Four: Determine how to fix the error<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Once you have your hypothesis, it\u2019s time to test it. For example, you might add data conversion logic to your program and run it to see if the error is gone.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">If the error is still there, formulate another hypothesis and keep testing it. Keep doing this until the error is fixed.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Sometimes the solution to an error might not be obvious. You can visit sites like <\/span><a href=\"https:\/\/stackoverflow.com\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">StackOverflow<\/span><\/a><span style=\"font-weight: 400;\"> and find out whether anyone has experienced the same error and how they fixed it.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">You might also ask a colleague for help or talk to an inanimate object and explain to it what you\u2019re trying to do with your code (<\/span><a href=\"https:\/\/careerfoundry.inbearbeitung.de\/en\/blog\/web-development\/rubber-duck-debugging\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">rubber duck debugging<\/span><\/a><span style=\"font-weight: 400;\">).<\/span><\/p>\n<p><span style=\"font-weight: 400;\">And <\/span><a href=\"https:\/\/openai.com\/blog\/chatgpt\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">now that we have ChatGPT<\/span><\/a><span style=\"font-weight: 400;\">, you can also ask it to help you find the error in your code and how to fix it.\u00a0<\/span><\/p>\n<h3 id=\"step-five-apply-and-test\"><span style=\"font-weight: 400;\">Step Five: Apply and test<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">You can rerun the code to see if the error is fixed. Testing is a great way to ensure that you don\u2019t end up creating more bugs when fixing the ones you\u2019ve been focusing on!<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Sometimes, you might not be able to figure out how to fix the error, despite your best efforts and even those of your colleagues.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">In these situations, you\u2019ll need to settle for a <\/span><b>workaround<\/b><span style=\"font-weight: 400;\"> that can keep the program running while you continue to find ways to completely get rid of the error.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">An important thing that you might forget here is to <\/span><b>document your solution<\/b><span style=\"font-weight: 400;\">. Yes, fixing the bug is a great achievement, and you feel elated. But documenting how you solved the error will help someone else in your team who might have encountered the error, or even your future self.\u00a0<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-22378\" src=\"http:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2023\/01\/documenting-your-debugging-solution-helps-your-colleagues-in-the-future.jpeg\" alt=\"A developer teaches her colleague what is debugging in a bright startup office.\" width=\"1200\" height=\"675\" title=\"\" srcset=\"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2023\/01\/documenting-your-debugging-solution-helps-your-colleagues-in-the-future.jpeg 1200w, https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2023\/01\/documenting-your-debugging-solution-helps-your-colleagues-in-the-future-300x169.jpeg 300w, https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2023\/01\/documenting-your-debugging-solution-helps-your-colleagues-in-the-future-1024x576.jpeg 1024w, https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2023\/01\/documenting-your-debugging-solution-helps-your-colleagues-in-the-future-768x432.jpeg 768w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><\/p>\n<h2 id=\"debugging-techniques\"><span style=\"font-weight: 400;\">4. Debugging techniques<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">As a developer, debugging is part of your daily job. How often? Well, it could happen every <\/span><a href=\"https:\/\/arxiv.org\/pdf\/2105.02162.pdf#:~:text=However%2C%20developers%20reported%20that%20they,of%20developers%20in%20debugging%20tasks.\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">eight minutes<\/span><\/a><span style=\"font-weight: 400;\"> and go on for anywhere <\/span><a href=\"https:\/\/arxiv.org\/pdf\/2105.02162.pdf#:~:text=However%2C%20developers%20reported%20that%20they,of%20developers%20in%20debugging%20tasks.\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">between a few minutes and 100 minutes<\/span><\/a><span style=\"font-weight: 400;\">.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">With that in mind, what are a few things that you can do to make it faster, more efficient, and maybe even fun?<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Active debugging<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">This is a technique that involves reducing the number of lines of code you\u2019re going to actually debug.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">One way of doing that that we\u2019ve seen is to comment out pieces of your code until you narrow down to the section that\u2019s causing the bug.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Adding print statements\u00a0<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">You can add print statements after every few lines of code, or even after a line of code, to try and narrow down the section that\u2019s causing the error.\u00a0<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Using a debugger<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">You don\u2019t always have to find all the bugs yourself. You can enlist the help of a debugger (software that helps you find bugs).\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Some IDEs (Integrated Development Environments) and text editors have built-in debuggers.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">IDEs and text editors are just big words for where you write your code. Some IDEs and text editors include Atom, Visual Studio Code (VS Code), Android Studio, PyCharm, or Arduino IDE.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The IDE or text editor you use depends on the language you\u2019re writing your program in or the platform you\u2019re building for\u2014web, Android, iOS, or even IoT.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">VS Code, for example, <\/span><a href=\"https:\/\/code.visualstudio.com\/#powerful-debugging\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">has a built-in debugger<\/span><\/a><span style=\"font-weight: 400;\"> to help you find bugs in your <\/span><a href=\"https:\/\/careerfoundry.inbearbeitung.de\/en\/blog\/web-development\/what-is-nodejs\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Node.js applications<\/span><\/a><span style=\"font-weight: 400;\">. It also works with JavaScript, <a href=\"https:\/\/careerfoundry.inbearbeitung.de\/en\/blog\/web-development\/learn-typescript\/\" target=\"_blank\" rel=\"noopener\">TypeScript<\/a>, and other languages that can be converted to JavaScript.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">For other languages, you\u2019ll need to install extensions from the VS Code Marketplace.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Using breakpoints<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">These are points in your code where execution stops\u2014not because there\u2019s a bug, but because you \u201cpaused\u201d it.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">It\u2019s literally putting a \u201cpause\u201d on your code so that you can find bugs.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">You can add breakpoints in your IDE, text editor, or even in your browser\u2019s developer tools (you can access this on Chrome by pressing F12 on Windows and Linux, and Cmd + Opt + I on macOS).<\/span><\/p>\n<h3 id=\"writing-tests\"><span style=\"font-weight: 400;\">Writing tests\u00a0<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">All the techniques we have looked at so far can be categorized as &#8220;reactive debugging.&#8221; Writing tests is proactive debugging.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">When writing tests, developers write a simple program that mimics what the larger program will do. This program is what\u2019s referred to as a &#8220;test.&#8221;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">They then run it (using a library like Mocha or Jasmine for JavaScript) to see any errors that may occur. The errors are then fixed until the code works.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Essentially, you\u2019ll have created an \u201cexample\u201d of the code you should write.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Developers should write tests even before they begin writing code. It\u2019s standard practice.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">At a beginner level, you\u2019re going to mostly write unit tests.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Proactive debugging isn\u2019t foolproof, which is why we still need reactive debugging methods.<\/span><\/p>\n<h2 id=\"debugging-tools\"><span style=\"font-weight: 400;\">5. Debugging tools<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">A critical part of exploring what is debugging is knowing which tools to carry in your arsenal.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">A lot of the techniques that we learned involve the use of debugging tools. We\u2019ve already come across some of the tools.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Note that these tools are highly dependent on the platform you\u2019re working with, as well as the <\/span><a href=\"https:\/\/careerfoundry.inbearbeitung.de\/en\/blog\/web-development\/a-beginners-guide-to-the-10-most-popular-programming-languages\/\"><span style=\"font-weight: 400;\">programming language<\/span><\/a><span style=\"font-weight: 400;\"> you\u2019re writing your program in.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Sometimes, the tool you choose to work with is a matter of preference, use case, or even experience.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Let\u2019s delve into the tools.<\/span><\/p>\n<h3>Debuggers<\/h3>\n<p><span style=\"font-weight: 400;\">Debuggers are basically tools that help you find bugs in your program. We&#8217;ve already come across debuggers. There are built-in debuggers like the one in VS Code.<\/span><\/p>\n<h3>Version control systems<\/h3>\n<p><span style=\"font-weight: 400;\">You\u2019ve probably used GitHub to store your code. If so, then you\u2019ve come across Git, the <\/span><a href=\"https:\/\/careerfoundry.inbearbeitung.de\/en\/blog\/web-development\/whats-version-control-and-why-do-i-need-it\/\"><span style=\"font-weight: 400;\">version control system<\/span><\/a><span style=\"font-weight: 400;\"> that makes it possible to keep track of your code changes.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Git can help you debug. Especially where you need to compare different versions of your code (something called &#8220;comparison debugging&#8221;).<\/span><\/p>\n<p><span style=\"font-weight: 400;\">You can also revert to previous versions of your code.\u00a0<\/span><\/p>\n<h3>Testing frameworks<\/h3>\n<p><span style=\"font-weight: 400;\">We mentioned that you could write tests when writing your code. The frameworks that can help you run these tests are known as &#8220;testing frameworks.&#8221;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">They include Mocha and Jasmine in JavaScript or PyTest and Lettuce for Python.<\/span><\/p>\n<h3>Browser debugging tools<\/h3>\n<p><span style=\"font-weight: 400;\">Most browsers have debug consoles. Chrome has Chrome Developer Tools, and Firefox has Firefox Developer Tools. On Windows and Linux, you can get to both by pressing F12, and on macOS, you need to press Cmd + Opt + I.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-22376\" src=\"http:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2023\/01\/talking-it-out-with-a-colleague-is-a-useful-debugging-tool.jpeg\" alt=\"A developer practices rubber duck debugging with his colleague in an office.\" width=\"1200\" height=\"749\" title=\"\" srcset=\"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2023\/01\/talking-it-out-with-a-colleague-is-a-useful-debugging-tool.jpeg 1200w, https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2023\/01\/talking-it-out-with-a-colleague-is-a-useful-debugging-tool-300x187.jpeg 300w, https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2023\/01\/talking-it-out-with-a-colleague-is-a-useful-debugging-tool-1024x639.jpeg 1024w, https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2023\/01\/talking-it-out-with-a-colleague-is-a-useful-debugging-tool-768x479.jpeg 768w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><\/p>\n<h3>Rubber duck debugging<\/h3>\n<p><span style=\"font-weight: 400;\">Unlike other tools on this list, rubber duck debugging isn\u2019t software. It\u2019s a way to find bugs by talking to a rubber duck.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">You explain your code and what you\u2019re trying to achieve to the rubber duck. As you do so, you\u2019re highly likely to see where the bug is coming from.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The rubber duck can be a pet, any inanimate object, or another human (a colleague or really anyone).<\/span><\/p>\n<h3>AI debugging tools<\/h3>\n<p><span style=\"font-weight: 400;\">We now have more options to help us debug, thanks to Artificial Intelligence (AI). As mentioned earlier, you can copy and paste your code into <a href=\"https:\/\/careerfoundry.inbearbeitung.de\/en\/blog\/web-development\/ai-programming-tools\/\" target=\"_blank\" rel=\"noopener\">generative AI coding assistants<\/a> like ChatGPT, and the tool will help you find the bug.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">ChatGPT can even give suggestions on how to fix the bug. <\/span><b>\u00a0<\/b><\/p>\n<p><span style=\"font-weight: 400;\">Other AI coding assistants that can help you debug include <\/span><a href=\"https:\/\/github.com\/features\/copilot\" rel=\"noopener\"><span style=\"font-weight: 400;\">GitHub Co-pilot<\/span><\/a><span style=\"font-weight: 400;\"> and codeQL. <\/span><\/p>\n<p><span style=\"font-weight: 400;\"><a href=\"https:\/\/careerfoundry.inbearbeitung.de\/en\/blog\/web-development\/ai-and-web-development\/\" target=\"_blank\" rel=\"noopener\">AI isn&#8217;t going to steal developer&#8217;s jobs<\/a>: instead a lot of these AI tools, like SonarQube and CodeQL, can help with code analysis and identify vulnerabilities.\u00a0<\/span><\/p>\n<h2 id=\"how-to-prevent-bugs\"><span style=\"font-weight: 400;\">6. How to prevent bugs<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">The last part of really mastering your comprehension of what is debugging is knowing how to prevent bugs in the first place.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The truth is, there\u2019ll never be a day when you write 100% bug-free code. This doesn\u2019t mean that you should give up and just write \u201cbuggy code,&#8221; though.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Your goal should be to write code with as few bugs as possible. And when there are errors, they should be easier to find.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">We\u2019ve already discussed ways to prevent bugs. Let\u2019s review them and learn a few more ways.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Writing tests<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Writing tests helps you write significantly better code. With them, you\u2019ll be able to take care of \u201cedge cases,\u201d for example. Edge cases are the other scenarios that your code needs to factor in.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">For example, if you\u2019re asking users to fill out a form, you need to add an extra step to ensure that the data entered is valid.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">If you ask for an email address, then you need to add in checks containing the \u201c@\u201d symbol and a domain name like &#8220;.com.&#8221;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Writing tests will help you test out these scenarios even before you actually write the program.<\/span><\/p>\n<h3 id=\"writing-pseudo-code\"><span style=\"font-weight: 400;\">Writing pseudo-code<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Pseudo-code is what you\u2019d want a user to do with your code. It\u2019s written in human, not programming, language.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">It assists you in breaking down your code into the most basic steps possible. This way, you&#8217;re able to clearly see what you&#8217;re going to write in your program.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">For example, if you want your users to fill out a form, your pseudo-code might look like this:<\/span><br \/>\n<span style=\"font-weight: 400; color: #993300;\">1. Fill in the first field (first name).\u00a0<\/span><\/p>\n<p style=\"padding-left: 40px;\"><span style=\"font-weight: 400; color: #993300;\">If (name &gt; 1)\u00a0<\/span><\/p>\n<p style=\"padding-left: 80px;\"><span style=\"font-weight: 400; color: #993300;\">Check whether they have two names and disable the next field.<\/span><\/p>\n<p style=\"padding-left: 80px;\"><span style=\"font-weight: 400; color: #993300;\">elif (name is still &gt; 1)<\/span><\/p>\n<p style=\"padding-left: 120px;\"><span style=\"font-weight: 400; color: #993300;\">Allow them to fill in their first name and highlight the next field (the assumption is that they have two first names).<\/span><\/p>\n<p style=\"padding-left: 40px;\"><span style=\"font-weight: 400; color: #993300;\">Else:<\/span><\/p>\n<p style=\"padding-left: 80px;\"><span style=\"font-weight: 400; color: #993300;\">The next field should be highlighted.<\/span><\/p>\n<p><span style=\"font-weight: 400; color: #993300;\">1. Fill in the second field (last name).\u00a0<\/span><\/p>\n<p style=\"padding-left: 40px;\"><span style=\"font-weight: 400; color: #993300;\">If (name &gt; 1)\u00a0<\/span><\/p>\n<p style=\"padding-left: 80px;\"><span style=\"font-weight: 400; color: #993300;\">Check whether they have two names and disable the next field.<\/span><\/p>\n<p style=\"padding-left: 40px;\"><span style=\"font-weight: 400; color: #993300;\">Else:<\/span><\/p>\n<p style=\"padding-left: 80px;\"><span style=\"font-weight: 400; color: #993300;\">The next field should be highlighted<\/span><\/p>\n<p><span style=\"font-weight: 400;\">As you can see, pseudo-code isn\u2019t written in any particular programming language. However, it can help you break down your code step by step.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-22377\" src=\"http:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2023\/01\/the-simpler-your-code-the-easier-the-debugging.jpeg\" alt=\"A software engineer writes simple code on a desktop screen to make debugging it easier.\" width=\"1200\" height=\"756\" title=\"\" srcset=\"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2023\/01\/the-simpler-your-code-the-easier-the-debugging.jpeg 1200w, https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2023\/01\/the-simpler-your-code-the-easier-the-debugging-300x189.jpeg 300w, https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2023\/01\/the-simpler-your-code-the-easier-the-debugging-1024x645.jpeg 1024w, https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2023\/01\/the-simpler-your-code-the-easier-the-debugging-768x484.jpeg 768w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><\/p>\n<h3 id=\"writing-simple-code\"><span style=\"font-weight: 400;\">Writing simple code<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">As a rule of thumb, the simpler your code, the better. It\u2019s easy to find a bug when you have simple code.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">A good example is functions. A function should always do one thing. This way, if you\u2019re trying to find errors in your code and you comment out a function, it\u2019s easier to track it down.\u00a0<\/span><\/p>\n<h3 id=\"using-modules\"><span style=\"font-weight: 400;\">Using modules<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Modules are files with code that you can use in other files. Keeping your code modular is one way to keep it simple.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Instead of having 3000 lines of code, you can have several files with different aspects of the code. If you need to use code from another module, you can import it into your current module.\u00a0<\/span><\/p>\n<h2 id=\"wrap-up\"><span style=\"font-weight: 400;\">7. Wrap-up<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">In this article, we\u2019ve thoroughly answered any questions about what is debugging. We explored its origins, the three main types of errors you\u2019re likely to find, and even the two main types of debugging.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">We learned steps that can make debugging a more logical process and hopefully a more pleasant experience, as well as techniques and tools that can help you find those bugs and smash them faster and more efficiently.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Ultimately, we went back to the root of the problem and asked ourselves how we could prevent errors in the first place.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">We hope that you\u2019re now ready to make finding bugs fun and, better yet, write code with significantly fewer errors.<\/span><\/p>\n<p>If you&#8217;d like to get started coding from scratch, then try out this <a href=\"https:\/\/careerfoundry.inbearbeitung.de\/en\/short-courses\/become-a-web-developer\/\">free 5-day short course<\/a>, where you&#8217;ll learn to build your first website with HTML\/CSS and JavaScript.<\/p>\n<p>Want to read more about the world of web development? Check out these articles:<\/p>\n<ul>\n<li><a href=\"https:\/\/careerfoundry.inbearbeitung.de\/en\/blog\/web-development\/javascript-developer-salary-guide\/\">How Much Will I Earn as a JavaScript Developer? The Ultimate Salary Guide<\/a><\/li>\n<li><a href=\"https:\/\/careerfoundry.inbearbeitung.de\/en\/blog\/web-development\/what-is-a-hackathon\/\">What is a Hackathon? A Beginner\u2019s Guide<\/a><\/li>\n<li><a href=\"https:\/\/careerfoundry.inbearbeitung.de\/en\/blog\/web-development\/best-coding-language-to-learn\/\">What\u2019s the Best Coding Language to Learn?<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>It&#8217;s one of the most important coding skills, but what is debugging? Learn how to do it, as well as popular debugging tools and techniques in this beginner&#8217;s guide.<\/p>\n","protected":false},"author":137,"featured_media":22375,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_lmt_disableupdate":"yes","_lmt_disable":"","footnotes":""},"categories":[5],"tags":[],"class_list":["post-22359","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-development"],"acf":{"homepage_category_featured":false},"modified_by":"Matthew Deery","_links":{"self":[{"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/posts\/22359","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/users\/137"}],"replies":[{"embeddable":true,"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/comments?post=22359"}],"version-history":[{"count":6,"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/posts\/22359\/revisions"}],"predecessor-version":[{"id":26293,"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/posts\/22359\/revisions\/26293"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/media\/22375"}],"wp:attachment":[{"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/media?parent=22359"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/categories?post=22359"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/tags?post=22359"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}