September 17, 2019
Moving beyond console.log() — 8 Console Methods You Should Use When Debugging JavaScript and Node
The console functions you have never used for debugging!
By Marco Antonio Ghiani
6 min read
Moving beyond console.log and learn the console functions you have never used for debugging!
The Console API
Every JavaScript developer has used console.log('text'). The console module is one of the most common utilities in JavaScript, and the API implemented in Node:
provides a simple debugging console that is similar to the JavaScript console mechanism provided by web browsers.
This is the definition written in the Node.js documentation page for the Console module 😅. However, beginners are prone to consult online tutorials instead of reading the documentation while starting with new technologies, missing the chance to learn how to properly use this new tool to 100% of its potential.
When talking about the Console API, newbies usually use only some functions like 👌console.log(), ⚠️ console.warn(), or ❌ console.error() to debug their application, while often there are many other methods which can perfectly implement our requirements and improve debugging efficiency.
This article is made to expose some of the most interesting console methods with related examples that I use while teaching at Codeworks. So let's see a list of the 8 best functions from the Console module!
All the following methods are available in the global instance console, so it is not necessary to require the console module.
1) console.assert ✅
The console.assert function is used to test if the passed argument is a truthy or falsey value. In the case that the passed value is falsey, the function logs the extra arguments passed after the first one, otherwise, the code execution proceeds without any log.
The assert method is particularly useful whenever you want to check the existence of values while keeping the console clean (avoid logging long list of properties, etc.).
2) console.count and console.countReset 💯
These two methods are used to set and clear a counter of how many times a particular string gets logged in the console:
3) console.group and console.groupEnd 🎳
.group and .groupEnd create and end a group of logs in your console. You can pass a label as the first argument of .group() to describe what it is concerned about:
4) console.table 📋
This particular method is incredibly useful to describe an object or array content in a human-friendly table:
console.table makes it easier for the inspection and logging of nested and complex arrays/objects.
5) console.time and console.timeEnd ⏱
In the case that you want to check the performance of your code in execution time, and to solve it you create a start timestamp with the Date API and use it to compute the difference after your code execution? Something like this:
Well, using the time and timeEnd functions, it is not necessary to do this trick. You can create your timing report simply by doing:
Summary
With only 3 minutes of your time, you now have a larger scope of some of the wonderful tools available in the Console API. Integrate them with your debugging habits and your development speed will increase exponentially!
See you with the next chapter of Learning Node.js! 🚀🎉
Comments, shares, and discussion about the topic are always accepted and I'll be glad to answer any of your questions!
Thanks for reading the article!
Exciting news! I'm moving all of my content into one home — my personal website https://marcoghiani.com/.
Everything will be easier to find, better organized, and packed with fresh updates.
To stay in the loop and never miss a beat, be sure to subscribe to my newsletter! You'll be the first to know about new posts, exclusive content, and more! You can find some of these posts there!
The Fullscreen API is a game-changer for your website! Discover how the Fullscreen API can enhance user experience on your blog by offering immersive, full-screen viewing for…
How the useEventListener Hook Will Shrink Your React Components The useEventListener React custom hook helps attach event listeners to a React component keeping the code readable and…
Lazy Load React Components With Strong Type Inference Create a simple utility function to encapsulate lazy loading of React components in your codebase, without compromising…
Master the Art of Refactoring: 10 Techniques for Building Maintainable Code Discover 10 powerful refactoring techniques to level up your front-end coding skills.
Unlocking the Power of Type Encoding / Decoding with io-ts Revolutionize your development workflow and eliminate bugs with the io-ts library.
Introducing React v18 with real-world examples A simplified overview of the latest features introduced with React v18. Automatic Batching, new hooks, improved…
React Custom Hooks #3: Simplify Your Code with useToggle and useBoolean Learn how to simplify your React code with the useToggle and useBoolean custom hooks. Discover how these hooks can help…
React Custom Hooks #2: Optimize Your Font Size with useFontSize Improve your React app's user experience with the useFontSize custom hook. Discover how to optimize your font sizes and…
React Custom Hooks #1: Manage Your Data with useLocalStorage Manage your data efficiently with the useLocalStorage custom hook. Learn how to simplify data storage and retrieval in…
How to Use React useReducer Effectively Learn how to use the useReducer hook in React to manage your app's state more effectively. Discover best practices and…
6 Essential NPM Commands for Highly Productive Developers Discover 6 essential NPM commands to improve your productivity as a developer. Learn how to optimize your development…
How a Simple Daily Routine Built A Writing Habit. Learn how a simple daily routine can help you build a writing habit. Discover practical tips and strategies for…
Write a JavaScript Fetch Wrapper in Less Than 1kb Learn how to write a lightweight JavaScript fetch wrapper in less than 1kb. Discover how this powerful tool can…
Do I Really Know Programming? 5 Signs You're on the Right Track Wondering if you know programming? Discover 5 signs that you're on the right track to becoming a skilled developer…
Remote Work Transforms You Into Your Best Version. Discover how remote work can help you become your best self. Learn practical tips and strategies for staying productive…
4 Must-Read Books for Everyone in Tech and Why Find out which books you should be reading as a tech professional. Discover why these books are essential for building…
5 Git Shortcuts to Improve Your Coding Speed and Efficiency Simplify your Git workflow and speed up your coding with these 5 essential Git shortcuts. Learn how to work smarter…
42 Mac Keyboard Shortcuts: Boost Your Productivity 5x Faster Spend less time clicking and more time doing with these 42 Mac keyboard shortcuts. Increase your productivity and…
10 Programming Code Smells That Affect Your Codebase Improve the quality of your codebase by eliminating these 10 common programming code smells. Ensure maintainability…
UseDeepEffect Hook in React: A Comprehensive Guide for Improved Performance Learn how to use the useDeepEffect hook in React to optimize your app's performance. Get step-by-step instructions for…
5 Tips to Speed Up Your MacBook Productivity A collection of hints to improve MacBook performance.
How to Become a Better Software Engineer: Proven Tips and Strategies Transform your skills and become a better software engineer with these proven tips and strategies. From coding to…
3 JavaScript Refactoring Techniques for Clean Code and Best Practices Improve the quality of your JavaScript code with these 3 essential refactoring techniques. Follow these best practices…
Boost Your React App with 4 Custom Hooks Discover 4 powerful custom hooks to enhance your React app. These hooks will help you improve performance…
How to Use Component Composition in React Get started with component composition in React with this beginner's guide. Learn the basics of this essential…
Refactoring a React Component: Best Practices for Better Code Follow these 5 best practices for refactoring a React component and improve the quality of your codebase. Learn how to…
Moving beyond console.log() - 8 Console Methods You Should Use When Debugging JavaScript and Node Improve your JavaScript and Node debugging with these 8 powerful console methods beyond console.log(). Learn how to use…
How to Setup Your Redux Store for a High-Performing React Application Learn how to set up your Redux store for a high-performing React application with this step-by-step guide. Discover the…
How I Became a Fast Learner Changing My Habits. 9 effective habits to learn faster and increase your productivity.
Building a High-Performance Web Application with Advanced Koa.js Boilerplate Maximize your web application's performance with this advanced Koa.js boilerplate. Learn how to create a…
How to Use the useViewport Custom Hook in React Enhance your React development process with the useViewport custom hook. Our guide offers a step-by-step tutorial on…
How to Filter Object Properties in JavaScript A simple JavaScript polyfill of the filter array method applied to object properties
How to Implement Array Flat and FlatMap Methods in JavaScript Learn how to use the Array flat and flatMap methods in JavaScript and speed up your development process. Our guide…
From Error-First Callback Functions to Promises in JavaScript Make the transition from error-first callback functions to promises in JavaScript with our guide. Learn how to use…
Object and Array Deep Clone: How to Implement in JavaScript A straightforward implementation for a deep clone method in JavaScript