The Art of Debugging
Tags: tutorial, webdev, productivity, beginners
Published: 2019-06-17 20:40:24

<!-- wp:paragraph -->
<p>As a developer, a major part of your day-to-day responsibilities will entail needing to deal with bugs, finding a problem, replicating it, and fixing it. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>It's much easier to write code from scratch, <strong>looking </strong>through old code, <strong>understanding </strong>it and making it better is much more of a challenge. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>We have tutorials that teach us language best practices, how to use design patterns, dealing with code smells, writing lean, maintainable code; However,&nbsp;this crucial aspect of our duties is often overlooked.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>The purpose of this article is <strong>not to</strong> tell you how to fix your bugs, it's <strong>describing the process </strong>you will need to go through to find and diagnose the problem.</p>
<!-- /wp:paragraph -->

{% twitter 399339918213652480%}

<p>It's true, occasionally you will have written the code that has caused the bug in question! Time to investigate what went wrong! Now it's simpler if you wrote the code, as you'll know where to look. </p>
<!-- /wp:paragraph -->


<p><strong>But what if you didn't?!</strong></p>
<!-- /wp:paragraph -->


<blockquote class="wp-block-quote is-style-large"><p>Tip: Your mindset needs to be that of a detective. </p></blockquote>
<!-- /wp:quote -->


<h2>How to know where to start?</h2>

<p>Yes, this is hard! Someone raises an issue or sends over a screenshot.  A stack trace drops into your Inbox! What does this all mean? How can you use this information to determine where the problem originated from? </p>
<!-- /wp:paragraph -->


<p>Let’s look at the <strong>steps </strong>I would take.</p>
<!-- /wp:paragraph -->


<figure class="wp-block-image"><img src="http://blog.designpuddle.com/wp-content/uploads/2019/06/Replicate-The-Issue.png" alt="" class="wp-image-1377"/></figure>
<!-- /wp:image -->

<!-- wp:heading {"level":3} -->
<h3>Step 1: Replicate the issue</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>The first thing you need to do is replicate the error. A <strong>LOT </strong>of errors that get logged are down to incorrect configuration,&nbsp;network problems or browser related, so this is an integral part of debugging. </p>
<!-- /wp:paragraph -->

<!-- wp:quote {"className":"is-style-large"} -->
<blockquote class="wp-block-quote is-style-large"><p>Tip: Get all the configuration information you need before starting, and the steps to reproduce!</p></blockquote>
<!-- /wp:quote -->

<!-- wp:paragraph -->
<p>Trying to fix a problem without replicating the error is a task of futility. Unless you can see it <strong>not</strong> work, you will never know if the change you make will <strong>actually fix it!</strong></p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>Step 2: Find an entry point</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>With the information you have, try to find a way of using that to get into the code.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":4} -->
<h4>Problem: Form Error</h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Say you have a screenshot of a <strong>form </strong>with and an <strong>error message</strong> displayed. How can you use that to get you to where you need to be?</p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://i.pinimg.com/originals/e6/67/ea/e667ea221cd32f8bc235f412796bf4f9.png" alt="Image result for form error screenshot"/><figcaption>A generic login form error: https://dribbble.com/emmabell<br></figcaption></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>When investigating a problem, there will be two avenues that you will need to inquire of. Is there a problem on the <strong>client side&nbsp;</strong>either in the JavaScript, CSS or HTML; or the problem is on the <strong>server side</strong>; the backend code, where your data/database and infrastructure lives.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":1375} -->
<figure class="wp-block-image"><img src="https://i2.wp.com/blog.designpuddle.com/wp-content/uploads/2019/06/Rule-Out-Possibilities.png?fit=1000%2C749" alt="" class="wp-image-1375"/></figure>
<!-- /wp:image -->

<!-- wp:heading {"level":3} -->
<h3>Step 3: Rule out the possibilities</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>If you've ever played <a href="https://www.amazon.co.uk/Hasbro-Gaming-Guess-Classic-Game/dp/B07G446J4V">Guess Who</a> you'll have a good understanding of what I mean. You have your suspects, now it's time to whittle them down! </p>
<!-- /wp:paragraph -->

<!-- wp:quote {"className":"is-style-large"} -->
<blockquote class="wp-block-quote is-style-large"><p>Tip: It's all about taking a systematic approach.</p></blockquote>
<!-- /wp:quote -->

<!-- wp:paragraph -->
<p>Here, we'd probably want to start with the <strong>client side</strong>, as that is our entry point, and where we can inspect how the error. We'd want to verify whether the form is doing the checking within the browser or sending some information to its pals on the other side!</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>In comes developer tools, known to many as the magic <strong>F12</strong> key! Here you can view and access the DOM, the underlying HTML, and JavaScript on the page.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>If you've never used Developer Tools before here are two great intros into what's available. Even if you know it, I'd highly recommend this first short video that gives a quick refresher of 12 tricks you may have missed.</p>
<!-- /wp:paragraph -->

{% youtube nOEw9iiopwI%}
<figcaption>A short run through 12 tricks you can use in Chrome Dev Tools</figcaption>


{% youtube x4q86IjJFag%}
<figcaption>A more detailed, longer run through all the features available.</figcaption>

<!-- wp:quote {"className":"is-style-large"} -->
<blockquote class="wp-block-quote is-style-large"><p>Tip: Note the <strong>Id</strong> and <strong>CssClass&nbsp;</strong>names of the suspected tags and find the files where they are in.</p></blockquote>
<!-- /wp:quote -->

<!-- wp:paragraph -->
<p>Using this approach will give you an avenue to check what was happening and where to focus your attention on next. Inspecting the tags and elements, extracting the <strong>Id</strong> and <strong>CssClass&nbsp;</strong>names will mean that you can delve into the source code at the precise location where the problem is occurring.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>Generic client side gameplan</h3>
<!-- /wp:heading -->

<!-- wp:list {"ordered":true} -->
<ol><li>Check the <strong>console </strong>for errors</li><li>Inspect page finding the <strong>handler </strong>associated with the issue.</li><li>Add <strong>breakpoints </strong>so you can view the parameters being passed, and view the call stack in case those values came from elsewhere</li><li>Search in source for tags or handlers to be able to change the relevant files. Add <strong>log lines</strong> in order to aid visibility. </li><li> <strong>Test </strong>your change.</li><li><strong>Repeat </strong>until done. </li></ol>
<!-- /wp:list -->

<!-- wp:quote -->
<blockquote class="wp-block-quote"><p>Tip: If using Typescript or if your Js is bundled add a <strong>debugger;</strong> line so that your browser will automatically break at that point when your code executes, this is a great way for finding where those files have been combined to.</p></blockquote>
<!-- /wp:quote -->

<!-- wp:heading {"level":3} -->
<h3>Step 4: Bad data in or bad data out.</h3>
<!-- /wp:heading -->

<!-- wp:heading {"level":4} -->
<h4 id="mce_30">Problem: Data Display Error</h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>If your problem is with data rather than validation, you will need to figure out whether the data is being <strong>saved incorrectly</strong> or being <strong>displayed incorrectly.</strong></p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="http://alison.dbsdataprojects.com/wp-content/uploads/sites/82/2016/04/cartoon-metadata.png" alt="Image result for data in or data out"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>If, for example, you have a <strong>label </strong>on your page which should display your name, but it’s showing your age.  </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>You need to find out whether you are using the <strong>wrong</strong> field/value to display the label, or the value is being <strong>retrieved correctly </strong>but <strong>saved incorrectly</strong>.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>A problem of this ilk can be harder to pinpoint, as you do not know where that data is coming from, similarly to our first example, <strong>find an entry point,&nbsp;</strong>and&nbsp;follow&nbsp;the&nbsp;code&nbsp;up&nbsp;to where data is <strong>being</strong> <strong>loaded</strong>. Now you can check whether this data is incorrect at the source!</p>
<!-- /wp:paragraph -->

<!-- wp:quote {"className":"is-style-large"} -->
<blockquote class="wp-block-quote is-style-large"><p> Tip: This may be an application lifecycle hook such as Page <strong>Load</strong> or <strong>Init</strong>. </p></blockquote>
<!-- /wp:quote -->

<!-- wp:heading {"level":4} -->
<h4>Backend gameplan</h4>
<!-- /wp:heading -->

<!-- wp:list {"ordered":true} -->
<ol><li>Find where the data is being retrieved from, which table, proc or function is being called to display that value.</li><li>Query the database using any unique identifiers to filter down the results.</li><li>Depending on the outcome, you will have two possible avenues. <ul><li>If your problem originates elsewhere; when the data is saved.</li><li>Or when it's being displayed. </li></ul></li><li>If displayed, circle back to the <strong>client side gameplan </strong>else...</li><li>Find<strong> all possible</strong> routes to inserting data into that table/store, and whittle down which one is causing the problem.</li></ol>
<!-- /wp:list -->

<!-- wp:heading {"level":4} -->
<h4 id="mce_14">Problem: The Stack Trace</h4>
<!-- /wp:heading -->

<!-- wp:image {"id":1373} -->
<figure class="wp-block-image"><img src="https://i1.wp.com/blog.designpuddle.com/wp-content/uploads/2019/06/Stack-Trace.png?fit=1000%2C672" alt="" class="wp-image-1373"/></figure>
<!-- /wp:image -->

<!-- wp:heading -->
<h2>The Stack Trace</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Sometimes you'll be presented with a giant wall of text also known as a Stack Trace. The stack trace <strong>looks </strong>scary, initially comparable to that of a towering wave. But don't worry as there will be lots of information about libraries and binaries you don't care about, and probably never knew existed. In 99% of cases these will not be the problem, so <strong>find </strong>the lines that equate to the <strong>code that's yours</strong>!&nbsp;</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p> If you receive a stack trace, you are actually in a very strong position. It tells you that an error has occurred and <strong>exactly where</strong> it was falling over. This makes your job much easier. Look for the <strong>method names</strong> being called, the <strong>files </strong>involved, and the <strong>line numbers</strong> to find the source of the problem. Then, depending on the problem, follow the relevant game plans listed above. </p>
<!-- /wp:paragraph -->

<!-- wp:quote {"className":"is-style-large"} -->
<blockquote class="wp-block-quote is-style-large"><p>Tip: Find the first time your code was called, and start from there.</p><cite><br></cite></blockquote>
<!-- /wp:quote -->

<!-- wp:paragraph -->
<p>Here's a great look into the intricacies of the stack trace and how to find the bits relevant to you! <a href="https://alligator.io/js/stack-trace/">https://alligator.io/js/stack-trace/</a></p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":1371} -->
<figure class="wp-block-image"><img src="http://blog.designpuddle.com/wp-content/uploads/2019/06/image.png" alt="" class="wp-image-1371"/><figcaption> <a href="https://alligator.io/js/stack-trace/">Stack courtesy of: https://alligator.io/js/stack-trace/</a> </figcaption></figure>

<h2>Not getting anywhere?</h2>

{% twitter 1096497253911547904%}

<p>If you've already:</p>

<ol><li><strong>Replicated</strong> the error?</li><li>Used Google to<strong> rule out</strong> any arbitrary problems?</li><li>Found the source code you "<strong>think</strong>" is causing the problem?</li><li>Added in <strong>debug points, print statements, console.log</strong> lines to confirm your assumptions?</li><li>Made some <strong>changes</strong>, and the bug still is occurring?</li><li><strong>Smashed</strong> your <strong>head</strong> against the desk <strong>multiple times</strong>??</li></ol>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>Ok, so it's probably time to<strong> pull someone in to help</strong>. After spending an hour or so, if you're struggling to make progress find someone to talk the problem over with, sometimes just discussing the problem will give you new leads or a new road of inquiry.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>Art comes with practice</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>As you can see, finding the root cause of an issue is hard, there are lots of potential routes, and quite often numerous red herrings or dead ends. Finding the optimal way of tackling each issue is a valuable skill in your arsenal. Over time, you will instinctively know where to start your search and save some time. Saying that, <strong>assumptions </strong>are usually a bad thing when looking into the code, it's always best to see what is happening, rather than what you think is!</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>I'd love to know if <strong>you have any tips</strong> for your fellow developer? </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Alternatively, what's the biggest mistake you can make when starting out looking at a problem that is raised?</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>Do you write unit tests to cover every bug you encounter???</strong></p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>Additional Reading</h2>
<!-- /wp:heading -->

<!-- wp:list -->
<ul><li><a href="https://simpleprogrammer.com/effective-debugging/">https://simpleprogrammer.com/effective-debugging/</a></li><li><a href="https://www.codementor.io/mattgoldspink/how-to-debug-code-efficiently-and-effectively-du107u9jh">https://www.codementor.io/mattgoldspink/how-to-debug-code-efficiently-and-effectively-du107u9jh</a></li><li><a href="https://hackernoon.com/how-to-debug-any-problem-ac6f8a867fae">https://hackernoon.com/how-to-debug-any-problem-ac6f8a867fae</a></li><li> <a href="https://alligator.io/js/stack-trace/">https://alligator.io/js/stack-trace/</a> </li></ul>
<!-- /wp:list -->