Original address dev.to

1. Design your console.log

Is it necessary? Probably not, but if you want to leave an Easter egg message on the console of your portfolio website, why not design one? You never know who’s watching. Check mine on Stefi.codes

To do this, you will use the string substitution method explained below, where you can add the %c variable and then add the style shown below as a variable parameter.

console.log(
  "%cDebug with style with these console.log tricks",
  "font-size:50px; background:#F9F9F9; color:#581845; padding:10px; border-radius:10px;"
);
Copy the code

Output:

2. Warnings, errors, and information

Perhaps you already see warnings and errors in the console, but don’t know how to add them. The information icon no longer appears, so there is no visual difference between console.log and console.info in Chrome.

// 4. Warning! console.warn("console.warn()"); / / 5. Error: | console. The error (" the console. The error () "); // 6. Message console.info("console.info()");Copy the code

Output:

This is handy because the browser allows you to filter based on these types.

3. Clear the console

You need a clean console. Just run:

console.clear();
Copy the code

4. Put things together

1. The extension

 console.group("Console group example");
 console.log("One");
 console.log("Two");
 console.log("Three");
 console.groupEnd("Console group example");
Copy the code

Output:

This can be helpful, for example, when looping over an object and wanting to display the results in a more organized manner, as shown below.

 const dogs = [
  { name: "Ashley", age: 5 },
  { name: "Bruno", age: 2 },
  { name: "Hugo", age: 8 }];

 dogs.forEach((dog) => {
  console.group(`${dog.name}`);
  console.log(`This is ${dog.name}`);
  console.log(`${dog.name} is ${dog.age} years old`);
  console.log(`${dog.name} is ${dog.age * 7} dog years old`);
  console.groupEnd(`${dog.name}`);
 });
Copy the code

Output:

2. The collapse

To get the same results, but as a collapsed list, you must change console.group to console.groupCollapsed.

Output:

5. Keep the number of console.logs

The console.count() method is useful if you want to know how many times a component is rendered or how many times a function is called. If you want the counter to restart, you can use countReset.

// 11. Count console.count("one"); console.count("one"); console.count("one"); console.count("two"); console.count("three"); console.count("two");Copy the code

Output:

6. Output arrays or objects as tables

Use this method to organize the output of the array object console.group().

Const dogs = [{name: "Ashley", age: 5}, {name: "Bruno", age: 2}, {name: "Hugo", age: 8},]; const cats = ["Juno", "Luna", "Zoe"]; console.table(dogs); console.table(cats);Copy the code

Output:

7. String substitution and template text

Is string substitution still in use? For the style console.log, yes, but for other use cases we can use template text, I don’t think so. But here’s how it works:

Const emoji = "🙈" console.log("This %s is my favorite!" , emoji);Copy the code

String substitution may have been used to avoid having to add strings together with +.

Const emoji = "🙈" console.log("This "+ emoji+" is my favorite emoji");Copy the code

Using template text, you can easily print the following:

Const emoji = "🙈" console.log(' This ${emoji} is my favorite emoji ');Copy the code

To find other console methods, check the MDN Web documentation.