console.log needs no explanation, but don’t leave it behind–it may also be all you need for simpler bugs.
debugger can also be invaluable for hunting down bugs. Its ability to explore the state of the program and the DOM can’t be duplicated with a lot of other tools.
When trying to log groups of data from a section of code called more than once,
console.group is a fantastic tool for grouping the console logs into collapsible sections. It’s typically called in pairs: one to open a group, and one to close the group.
console.group('Group Name') will open up the next group for console logs to be placed. A call to
console.groupEnd() will close the last group that was opened. An example of what this would look like is below.
The inconvenient part about using
console.group is that, by default, the groups start in an opened format. To have your groups start collapsed, just make a call to
console.groupCollapsed instead of
Lastly, groups can be nested an arbitrary number of levels. Feel free to organize your logs with as many levels of logging as you need.
The next function seems like it might be a little simple, but the implementation adds more helpful functionality for debugging.
console.count('label') will print out the label and the number of times that label has been counted. The important part to note here is that it can recognize the label across your app. The example below will give a quick overview of how this might look when used in your app.
console.table offers another option for visualizing groups of data in a more digestible way. The use case for this function is a lot more narrow than
console.group, but there’s still a good case for it.
Tracking down how your code got to where it is can sometimes provide the insight you need to solve your bug. Putting down your own series of log messages everywhere you may have called your function is one solution, but
console.trace is much easier. Wherever
console.trace is called, a full call stack to the current function will be output, and all of the call locations and line numbers will be linked to the output.
I hope some of these functions of the Console api are new to you and aid you in your debugging.