Debugging is an important aspect of software development. I don’t have any exact data to back this up and can only go by my own but it is safe to say that I probably spend at least 60% of my time Debugging or stepping through code.
I find the best way to learn and understand what a particular section of code does is step through it and inspecting the value of variables etc. Often I find this is most important when trying to explore approaches to optimize or improve code.
using the console
Using good old
Developers see the power they can write values of variables out to the console! This is usually in the opening chapter of the book and typically real debugging tips only start to emerge in Chapter 12 or so, but who has ever read a whole text book on any software development subject.
Nobodies got time to go through 11 chapters, especially when the intervening chapters are so dull and boring and want to explain in excruciating detail why strings are immutable and how to rewrite that BubbleSort algorithm,
We wanna solve the worlds problems and if
console.log() will help me to see what I need to see then that is all we need!
Developers start fiddling about with the console API and discover we can do all sorts of cool things with it! If we use
console.table() we can display our results in a tabular format
Developers start going crazy with this new found power and pretty soon the code base becomes populated with
The trouble is developers for the most part become quite lazy and forget to remove some console.log() statements and tend to ship code out to production with console.log() statements still in the code!
These statements become easier for other developers to find using my next favourite tool!
Browser based Developer Tools!
Firebug became the go to tool to read all your console.log() in the browser! It truly was that awesome!
Gradually browser incorporated tools started becoming more advanced and you could start doing a whole lot more! Even enabling you to step through code intercept requests, check performance and whole lot more!
Pretty soon every major browser implemented some kind of Developer Tool! Probably the most popular amongst the Developer community became Chrome Dev Tools!
The problem always seem to emerge that a bug only manifested itself within a particular browser on a particular platform with a define resolution! So there always a need to use a tool like BrowserStack to emulate a specific browser and platform to be able to use developer tools to help debug it.
The developer tools not only enable developers to step through the code but they can also see and manipulate variable values to help detect and fix issues. This really reduces the need for the Console.log statements in code,
For instance, I have been doing a lot of of Vue.JS based development work lately and have found the Vue.js Devtools plugin to be really helpful for Vue Specific Functionality.
Integrated Development Environment Debugging
I have been a big fan of IDE’s and for the most part prefer to use them. I know there are developers out there who would undoubtedly swear by making use of Vim for almost everything! However, I just don’t like the experience, I really did try become a Vimmer but we never really clicked!
In my experience, it also ensures you don’t get the bleeding of layers problem in your application.
Human beings in general are completely rubbish at multi tasking and it is my belief that is a complete fallacy and recipe for disaster to think that a Full Stack Developer can think about the Full Software Development Stack all at the same time!
I like to divide my work up into defined periods of time where I will be thinking of one layer to the problem at a time. That way you concentrate wholly on one dimension at a time.
I’m an All Products Pack Subscriber which I find provides me with the best value and I literally have no restrictions on product selection and choice.
Using Webstorm it is pretty easy to set up your project to enable debugging and stepping through of the code within your IDE.
Jetbrains have already quite extensively documented the process of Working with Vue.js in WebStorm so I won’t repeat or duplicate them here.
Once you have it all configured and running you get a very rich debugging experience!
Which you can obviously use to write Unit Tests and debug Unit Tests etc.
Developers spend a lot more time debugging code than they do actually writing new code! So why not make that experience a lot more pleasurable and ensure you have an extensive tool set at your disposal!
f you enjoyed this article and would like to be notified when the follow up this is published or even would like to know when I publish more tutorials why not subscribe to my newsletter.
Alternatively use the comments below to let me know of any omissions or queries or even just to send me some hate mail!