5 Tips To Improve Your JavaScript Debugging Skills and Save You Time
Become comfortable using your browser inspector
If you are doing web developer or even some app development your web browser will be your best friend and worst enemy. But you know what they say if you can’t beat them join them. But in all seriousness learning how to take advantage of the inspector your browsers have given you will help you immensely.
If you have never used the inspector if you right-click on any webpage there will be an option at the bottom of the menu that pops up called “inspect” this will bring up a window. This window will show you the webpage’s code and allow you to interact with it. You can change CSS, there is a console to test javascript code, and you can see how your compiler is compiling your code into HTML.
Learning how to use this will allow you to quickly understand if your code isn’t rendering the way you think it should. Most importantly you can mess with your styling all you want, see it update right away, and if you really mess it up you can just refresh and it’ll be back to the code from your editor. You can also just turn certain styling off and on to test certain attributes. This makes the painstaking styling debugging so much easier and faster.
This is also where your code breaks (debugger) will show up if you set them up. The console allows you to test your Javascript code and variables at the time of where your debugger stopped. This allows you to quickly and easily test your javascript state and variables while it is running if you are having state issues and don’t want to mess with a bunch of console logs or if they aren’t helpful. It also has helpful information within the debugger for state and allows you to step through the code line by line.
If you think you are not receiving the data you are expecting or if you are not understanding what is going on with an API check out the network tab. This will show you all of your API calls and their responses. This will help you understand why a call may be failing or if the API is sending the wrong data or you aren’t handling that data properly.
You definitely need to become one with the inspector it will make you so much more productive.
2. Use console logs
Using console logs can be very helpful if you aren’t sure exactly why or where something is breaking. It can be helpful to see if you are even getting into a function that you aren’t sure is getting hit, testing out some logic that may not be acting as expected, or even state or props something is receiving that may not be working as expected.
Using console logs can get messy very quickly and can easily become hard to trace. To make it a little easier I always add a line number. For instance:
console.log(12, 'test')
12 being the line number. The number turns a different color so it makes them easier to see. It also points to what line number your log is on so they don’t get confusing. If there are multiple files it may be easier to add the file name in the console log as well. such as,
console.log(12, `nav bar file: ${codeToTest}`)Having helpful console logs will make things much easier, faster, and less frustrating.
3. Download helpful tools for your code editor
No matter what code editor you use you should be able to download extensions or tools to help you be more efficient. Downloading the tools for the file you are using and linting tools can help you catch errors before even running your code. This can also help you trace where code is being used both in and outside your file which can help track down areas that also may be affected by your changes.
Some extensions I use are (you can read more about them in this article):
GitLens - allows you to quickly and easily cycle through previous commits for files - SUPER helpful
styled-components snippets - super helpful if you use styled-components
Remote extensions (not a debugger one just great) - for VS Code allows you to code off a server rather than your local computer keeps all your snippets and code in one place without having to worry about what computer you are on
4. Download helpful tools for your web browser
Most browsers (especially chrome) have tools you can download for your browser to help make your life easier. If you are using React or Vue I strongly recommend you download their respective tools. These tools give you great insight into your store/state and also have built-in debuggers. These extensions will help you debug your React and Vue project much faster.
There are other tools as well for testing things like CORS, APIs (through postman), and viewing JSON. You can get JSON formatters, Postman extensions, and tools that allow you to turn CORS off and on. These all make it faster to test things all in one place, read your responses more easily, and quickly toggle settings without having to change any code or wait for a rebuild. Here are some of the extensions that I use:
CORS Toggler - adds Access-Control-Allow-Origin: * rule to the response header.
Postman Interceptor - Sends requests fired through the Postman chrome app.
5. Understand how the language you are working in works
This one may sound odd but better understanding how the language you are working in works under the hood can make debugging much easier. Knowing how your language rerenders, how the loops work, how async works, all helps to understand why certain errors may be happening. It will help you understand why a loop may happen too many times, why your state isn’t quite what you expect, or why data may not be coming back when you expect. Taking the time to understand this will not only make you a better debugger but a better dev in general.
