The latest articles on DEV Community by Josey Kinnaman (@joseykinnaman). https://dev.to/joseykinnaman https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F541100%2Fbb83dc2a-98b9-48b7-97ea-87781fff41a2.jpeg https://dev.to/joseykinnaman en Josey Kinnaman Tue, 15 Dec 2020 19:56:46 +0000 https://dev.to/joseykinnaman/the-art-of-debugging-2ooe https://dev.to/joseykinnaman/the-art-of-debugging-2ooe <p>I will start out by saying, I am a junior developer, so 85% of the time... I am the bug. I have however developed some tips and tricks along the way that have helped pinpointing my bugs as well as in writing cleaner and dryer code. </p> <h2> Steps to Debugging </h2> <ol> <li> <p><strong>Start by writing clearly planned and tested code:</strong><br> This may seem like a no brainer but the process of "sharpening the axe before cutting down the tree" really, really helps in the debugging process. Before I code at all or even write a README.md I start by asking myself 3 questions and writing them out in Evernote (for searchability later on).</p> <ol> <li>What am I trying to code and/or what is the bug that I am trying to solve? What do I already know about said code?</li> <li>What questions do I have/things do I not know?</li> <li>Answers to those questions as I find them. I then begin to make my README.md, user stories, and diagrams (if not already existing). When I have a pretty clearly documented plan I begin to write or modify tests. Often once I solve or find a bug, I will come back and modify or update tests and documentation.</li> </ol> </li> <li><p><strong>Check for esLint errors or highlighted/non highlighted code in VS Code.</strong> It is always worth taking the time to set up esLint for a project. </p></li> <li><p>Check variables and spelling check syntax.</p></li> <li> <p><strong>Dev Tools:</strong> I really love Chrome Dev tools. I think it is worth it though to test code in multiple browsers. </p> <ul> <li>Check the console for errors: is the error obvious?</li> <li>Reproduce the error if semantic (enter data into a form etc.) </li> <li>Try <code>console.log()</code> , <code>console.error()</code> , <code>print</code> . I feel like these are very base level debugging tools and are sometimes more trouble than they are worth after the fact. I find these tools more helpful while writing initial code. </li> </ul> <ul> <li><p><strong><em>Comment out code</em></strong> in and error message to help locate an error using comment tags. Once you pinpoint the error look at syntax, spelling, and functionality. </p></li> <li> <p>Sources tab -&gt; Event listener breakpoints -&gt; step into , step over, step out of... etc. </p> <ul> <li>Pause code at other break points </li> </ul> </li> <li><p>If trouble shooting an API request... checkout the Network tab to see the amount of requests be sent and what is being received. </p></li> </ul> </li> </ol> <p>There are also numerous different language specific debugging tools that come in very handy during coding and debugging but these steps are a great start. What tips do you use and when do you crack and ask for another set of eyes? Thanks for reading!</p> beginners javascript testing bugs