Posted on Jun 13, 2024 • Edited on Jun 14, 2024

Super useful console.log tricks

#productivity #tooling #javascript #beginners

When developing, debugging or troubleshooting web applications, console.log is one of the most frequently used tools by developers. It offers a straightforward method for outputting data to the console, which helps in understanding code execution and locating problems. Still, a lot of developers are just utilising a small portion of console.log's capabilities.
We'll look at many console.log tips in this article to help you with debugging and development.

Basic Tricks:

Multiple Values: Log multiple values with commas separating them

console.log("Message: Hi Dhanush", 10, true);

Template Literals: Use template literals for formatted strings:

const name = "Dhanush"; console.log(`Hello, ${name}!`);

Formatting and Organization:

console.table: Present data in a neat table format:

const data = { name: "Dhanush", hobby: "Chess" }; console.table(data);

console.group/groupCollapsed: Organize logs with collapsible sections:

console.group("Network Info"); console.log("IP:", "192.168.1.1"); console.groupCollapsed("Details"); // Use for initially hidden sections console.log("MAC Address:", "AA:BB:CC:DD:EE:FF"); console.groupEnd(); console.groupEnd();

console.clear: Clear the console for a fresh start.

Advanced Debugging:

console.dir: Get a detailed object structure view:

const person = { name: "Dhanush", hobbies: ["youtube", "chess"] }; console.dir(person);

console.assert: Log only if a condition fails (useful for debugging assumptions):

const age = 18; console.assert(age >= 21, "User must be over 21");

console.count/console.countReset: Create a counter for tracking occurrences:

console.count("API Calls"); // Increments each time called console.count("API Calls"); console.countReset("API Calls"); // Resets the counter console.count("API Calls");

console.time/console.timeEnd: Measure code execution time:

console.time("Loop Time"); for (let i = 0; i < 1000; i++) { // Do something } console.timeEnd("Loop Time");

console.trace: Print a stack trace to pinpoint where an error occurred.

function a() { function b() { console.trace(); } b(); } a();

Browser Information and Interaction:

console.log(console): Explore the available console methods themselves.

console.log(console)

console.log(navigator): Access browser information (user agent, language, etc.).

console.log(navigator)

Fun and Creative Uses:

ASCII Art: Create basic images using console characters:

console.log(" ____") console.log(" / _ \\") console.log(" ( o.o )") console.log(" \\___/")

Simple Animations: Combine console.clear with multiple lines for basic animations.

let position = 0; const width = 20; // Width of the console "screen" const speed = 100; // Speed of the animation (in milliseconds) function animate() { console.clear(); let output = ''; // Create a string with spaces followed by a dot for (let i = 0; i < width; i++) { if (i === position) { output += '●'; // The moving dot } else { output += ' '; } } console.log(output); // Update position position++; // Reset position to create a looping animation if (position >= width) { position = 0; } } // Set an interval to update the animation frame setInterval(animate, speed);

Logging Levels (Browser Dependent):

console.log: General information.
console.debug: Debugging messages (often hidden by default).
console.info: Informational messages.
console.warn: Warning messages (usually yellow text).
console.error: Error messages (usually red text).

console.log('This is a general information message.'); console.debug('This is a debugging message.'); console.info('This is an informational message.'); console.warn('This is a warning message.'); console.error('This is an error message.');