For today’s post, I wanted to cover a few more debugging techniques that I have found helpful.
I utilize alerts throughout my code for one-off, rudimentary variable watching. I do not use it for a ton of repeated watches, because that would be just plain annoying. But it is a quick and easy way to see the value of a variable.
var myVar = "Some Value";
Anyone who knows me, knows I am big on comments. It has saved me countless hours where my memory has failed me. Another way I use comments is to prevent code from processing. Say I have a section of code that is causing problems. I may either not deal with it currently as it may be a side feature, or I may want to reveal the functionality line by line as I am debugging. Comments are an easy way to do this.
// Single line comment
/* Multi-line comment */
Web Developer Toolbar
This is an add in to FireFox. It allows you to look at cookies, turn css on/off, highlight areas of the page, etc.
Sometimes it is helpful to utilize DOM manipulation techniques to create/edit DOM elements for logging to be able to see things get created on the fly.
It is sometimes helpful to use break points to stop your code mid-stream. We can do this within the inspector. Having the ability to pause it at any moment is helpful to examine the state of your project at a given point. On a side note, putting in watch statements along with breakpoints is a useful technique.
A hinter/linter tool, such as JSHint, is a great way to ensure your code is structured well. This will catch unused variables, missing semi-colons, etc. It will not ensure your code works…just that it is structured correctly and elegant.
So, those are just a high-level, fly-by of some of the techniques/tools I have used to debug my projects. I hope they are helpful for you.