Debugging is one of the most important skills of any developer. Being good at debugging means you’re good at solving problems, which is what this job is all about.
The process of debugging also supports learning about the language or framework you’re using and the app you're working on. It’s how we gain experience!
The principles of debugging are universal for any kind of technology, but of course, there is always some framework-specific tooling available to make it easier. We’ll share our own Vue-proven debugging toolbox with you in this article!
Problems in your apps a.k.a. bugs can be caused by syntax or logical errors.
Fixing these errors is called debugging. Usually we only call it debugging when we fix problems in an app that’s already in production. But technically, we also „debug“ while we’re writing new code in the first place: We’re fixing the holes in our algorithm step-by-step.
While this looks like a straightforward process, it will feel messy in the middle. (You probably already know that!) You'll often jump back to (re-)identifying the cause of the problem, because working on a solution usually creates a better understanding of the problem.
Your first go-to tool for Vue debugging is – like with any web app – the browser’s developer tools. They are pretty powerful these days!
If the console shows you warnings or errors, read them. This sounds obvious, but people tend to dismiss them. While they aren’t always as specific as we’d like, they often provide hints on where to look for bugs.
You can use the features of the console API to log messages or the values of variables in the console while your code is executing.
This helps you check f.ex. whether a specific function receives the right values, or when and if it gets called.
Use the console functions somewhere in your code to see the output in the console. You'll be A-OK with knowing the following 3. (When in doubt,
console.log() prints (combinations of) strings, variables and objects
console.table() prints data in an array as a table
console.trace() prints a stack trace – a list of functions that were called up until that point in your code
When the browser reaches this breakpoint, you can head over to the console to look at the variable values at that exact point or execute other functions within the current scope to see what happens.
The official Vue Devtools offer many additional Vue-specific debugging features. You can install it as a browser extension for Firefox / Chrome or as a standalone Electron app, with which you can also debug Safari, Edge and other browsers.
In the browser, you can find the Vue Devtools panel in the developer tools. It lets you navigate the component tree and inspect the props and data of your components. Additionally, you can inspect the (Vuex) state, and all the events triggered. No
console.log needed 🙂
Note that the Vue Devtools only work on apps that are in debug mode, and not on local files (except in Chrome with an extra permission setting for the extension to „Allow access to file URLs“).
Sentry is a monitoring tool that automatically reports errors & exceptions of your apps, and delivers insights about them. So if you’re debugging an issue in a production app, you’ll get a lot more context about it in Sentry’s dashboard: On which device, OS and browser did it happen? It even shows you what the app was doing before the exception occurred.
There are a lot of options to add more custom data to the reported errors if you set up Sentry right.
While it’s the most useful for bigger apps and teams, it has been invaluable for my smaller projects as well, which can easily run on their free plan.
Sentry has a SDK for Vue 2 and 3 apps, as well as integrations for backend languages and frameworks. For advanced usage, Sentry also offers connected insights from across your whole stack.
Your Vue frontend will often rely on fetching data from somewhere, or sending it someplace else. Bugfixing often involves troubleshooting these API requests and responses.
The network tab in the browser devtools shows you all requests and their data. With this info you can check if your data is actually being uploaded or downloaded, and inspect the transferred data like request and response headers, content, timing & size.
Postman is actually a tool for API development, but as we already know: Developing something also means debugging it, so it offers great debugging tools for any API (third-party or your own). It’s great to test, tweak and analyze API requests and responses independently from your app’s context.
With Postman, you can also stack multiple requests together into sequences that can be saved into collections to test and quickly re-test them in combination.
To learn more about how Postman works, head over to the Postman learning center.
There’s an open-source and web-based Postman alternative #madewithvuejs, by the way – check out Hoppscotch!
Ray is a desktop app by Spatie that is such a useful helper for debugging, especially if you work with a stack including Vue & Laravel (like us 😅).
You can send debugging messages and component data to the Ray app and it will format the output and displays the origin of your calls. You can then color-code, group and filter your dumps in a convenient UI.
Use it in your Vue 2 or 3 projects with vue-ray!
Debugging will get easier the more experience you have. After a few years you have handled many bugs and scenarios, and have learned a lot about how to use your frameworks of choice.
Nonetheless I think you’ll have to challenge yourself continuously to be more structured in your debugging process. There are also always new tools, helpers and practices coming up!
I’ll leave you with some tips on how to become a better debugger: