✨ 7 个技巧和窍门让你的 console.log() 输出脱颖而出

1. 设置 console.log 的样式

这有必要吗？可能没必要，但如果你想在作品集网站的控制台上留下彩蛋信息，为什么不弄个有样式的呢？你永远不知道谁会看。看看我的stefi.codes代码

为此，您可以使用下面解释的字符串替换方法，其中添加 %c 变量，然后作为变量参数添加样式，如下所示。

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

输出：

2. 警告、错误和信息

您可能在控制台中看到过警告和错误，但不知道如何添加它们。信息图标不再显示，因此 Chrome 中的 console.log 和 console.info 之间没有视觉差异。

 // 4. WARNING!
 console.warn("console.warn()");

// 5. ERROR :|
console.error("console.error()");

// 6. INFO
console.info("console.info()");

输出：

这很方便，因为浏览器允许您根据这些类型进行过滤。

3. 清除控制台

需要一个干净的控制台。只需运行：

console.clear();

4. 将事物组合在一起

1. 扩展

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

输出：

例如，当循环遍历一个对象并希望以更有条理的方式显示结果（如下所示）时，这会很有帮助。


 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}`);
 });

输出：

2. 崩溃

要获得相同的结果但作为折叠列表，您必须更改console.group为console.groupCollapsed。

输出：

5. 统计 console.logs

如果你想知道组件渲染了多少次，或者某个函数被调用了多少次，console.count() 方法会很有用。如果你想让计数器重新开始，可以使用 countReset。

 // 11. COUNTING
 console.count("one");
 console.count("one");
 console.count("one");
 console.count("two");
 console.count("three");
 console.count("two");

输出：

6. 将数组或对象输出为表格

使用该方法组织数组对象的输出console.group()。

 // 13. TABLE for ARRAYS
 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);

输出：

7. 字符串替换和模板字面量

字符串替换还能用吗？对于 console.log 的样式来说，是的，但对于其他用例，比如我们可以使用模板字面量，我觉得不行。不过它的具体做法如下：

const emoji = "🙈"
console.log("This %s is my favorite!", emoji);

可能已经使用字符串替换来避免使用 + 将字符串相加。

const emoji = "🙈"
console.log("This " + emoji+ " is my favorite emoji");

使用模板文字可以轻松输出如下内容：

const emoji = "🙈"
console.log(`This ${emoji} is my favorite emoji`);

要查找其他控制台方法，请查看MDN Web Docs。

文章来源：https://dev.to/stefirosca/7-tips-tricks-to-make-your-console-log-output-stand-out-389g