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

原文地址dev.to

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. 警告！
 console.warn("console.warn()");

// 5. 错误:|
console.error("console.error()");

// 6. 信息
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. 计数
 console.count("one");
 console.count("one");
 console.count("one");
 console.count("two");
 console.count("three");
 console.count("two");

输出：

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

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

 // 13. 数组表
 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 文档。