Debugging VueJS

I love JavaScript. It’s a messy, dynamic, and sometimes tiring love, but it’s love nonetheless. JavaScript allows you to build projects your own way — you can be light on your feet and change paradigms very quickly. This permits for lightning fast development, but also permits for many bugs to creep into your code and knowing how to stomp out those bugs is critical to being a successful JavaScript developer.

For this article, I’ll be focusing on debugging using the VueJS front-end library, which is what we use here at DealerOn for our front-end development, but the process I use to debug my code can be applied to vanilla JavaScript and many other frameworks. I’ll also be using code from a personal project of mine for examples while I walk through my approach for debugging. Lastly, before we jump in, keep in mind that this is just my personal approach and is by no means meant to be seen as the only approach. If you find a personal debugging process that works for you, feel free to embrace it and go that route!

My Process

1. Check the Console
2. Manual Tracing
3. Vue Dev Tools
4. Console.log(“old faithful”)
5. There are Unit Tests!

---

1) Check the Console

Vue Console Errors

This is the very first thing you should do. Vue gives you extremely useful warnings and errors in the console that will tell you when and where something broke. This is one of the easier problems you’ll come across. If the error is screaming at you that you broke something, then you’re in luck, because it’s usually pretty easy to find and fix from there. Vue is pretty good at warning you about a problem (and what component the problem is located in) before it even breaks. Then, if your code breaks, the console gives you pretty useful information about what happened. As you can see here, somewhere I’m accessing a property of an undefined object. I just need to find where i’m accessing that property and find why it’s undefined. Easy!

2) Manual Tracing

“Oh no, but Tracey! I found where my error was in my code, but I still have no idea what’s causing it,” you say clearly frustrated. Well, before getting into some of the useful tools at your disposal. Let’s first take some time to walk through your code. This is the step that has been most beneficial to my growth as a developer. Look at your code and follow the logic. Grab a pen and paper, or do it in your head, but step through your own code without running it.

Not only does this make you extremely familiar with your code, but it forces you to think and reconsider why you made some of the choices you did. If you’re tracing your code and you find that it’s extremely convoluted and hard to follow, could your code be neater? Could the logic be redone in a simpler way? What parts can be changed to make this easier to follow? The fast-paced nature of JavaScript can lead to sloppy, needlessly complex code. Answering these questions will force your skills as a developer to grow and make your code better and less error prone in the future. But, as is often the case with JavaScript, you’ll find it was just a typo.

45 minutes of debugging for this!

3) Vue Dev Tools

Sometimes your errors aren’t as simple as a typo. Sometimes your code is “working” but it’s just not doing what you expected it to do (or anything at all). Vue Dev Tools can be extremely useful here. They can be downloaded as a chrome extension, and allow you to inspect elements as Vue components. This gives you a much more detailed view of the state of a component at any given point. It lists all of the props, computed fields, data, and events fired. This is extremely useful information.

For example, lets say you’re expecting the data of a component to change after an event is fired. The dev tools let you inspect the component real time to confirm that the data is changing how you expect. Vue Dev Tools will also allow you access any component you have highlighted as $vm0 in your console, which you can then use to check fields and call methods for further testing!

Thank you Vue Dev Tools!

4) Console.log(“old faithful”)

When all else has failed and things are looking dark, your best friend is always console.log. Sometimes the information provided by props in the Vue Dev Tools just isn’t enough, and you need to deep dive into methods and know what the state of a variable is at an exact moment or if a block of code was even hit at all. When developing your Vue project, I find it useful to intermittently place console.logs throughout your project as you’re developing. For example,

setTimeFormat () {
  if (this.e1 === ‘AM’) {
    this.ok = true
    this.collapsed = null
    this.updateSlots()
    console.log(‘SetTimeFormat AM: ’, this.e1)
    this.e1 = null
  } 
  else if (this.e1 === ‘PM’) {
    this.collapsed = true
    this.ok = null
    this.updateSlots()
    console.log(‘SetTimeFormat PM: ’, this.e1)
    this.e1 = null
  }
}

Now, when this code runs, you can confirm that it’s working correctly each time it’s called because you can make the logger tell you where the value is coming from and what it’s value is at that moment. Placing helpful and informative console.logs as you develop can be likened to creating Unit tests in many other languages. It doesn’t always seem necessary at the time, but it can save you a lot of headaches down the line.

5) There are Unit Test!

Vue Cli actually lets you build your projects with Unit Tests straight out of the box using Jest or Mocha! These JavaScript testing frameworks allow you to develop your components with unit tests built around them to ensure they’re outputting values you expect. I can’t stress enough how important this is because many developers, old and new alike, have no idea that you can begin testing with Vue straight from the jump! Vue has some amazing documentation on how to create components with unit testing in mind and they explain how to do it better than I ever could, so here is a link to that information.

Conclusion

One of the biggest complaints I receive from people that are new to JavaScript is how difficult and tedious it can be debugging, but it doesn’t have to be! JavaScript (especially with Vue) has tons of tools at it’s disposal to make catching those nasty bugs painless. I hope this article gave you some insight as to what steps you could take and what tools you can use when you run across your own issues in the future. Happy Coding!

---