你没有充分利用 JS 控制台的全部功能 👎 :-(

这里有 5 种方法可以让你提高控制台日志记录技能

这样的开头真是让人沮丧，不是吗？不过，坚持下去，我保证你读完这篇博客后，会对 Javascript 充满热情。

所以去抓住一个🍺，给这个帖子一个大大的❤️，让我们直接进入它。

这里有 5 种方法可以让你提高控制台日志记录技能

1. console.log('COLORED_TEXT')

您必须%c在每次出现时使用一个参数来表达您想要的样式

console.log(
  '%c Object A instantiated %c before B !!  ',
  'background: white; color: red', 
  'background: red; color:white'
);

请注意，你可以使用任何 CSS 属性作为参数。对于上面的字符串，它是这样渲染的

2. console.table(ARRAY_OF_OBJECTS)

当您想要打印对象数组
时请使用此功能 例如，如果您想要打印以下内容：

const arrayOfBooks = [
  { title: 'Heart of Darkness', author: 'Joseph Conrad' },
  { title: 'A Walk in the Woods', author: 'Bill Bryson' },
  { title: 'Rich Dad Poor Dad', author: 'Robert Kiyosaki' }
];

那么你们都console.log(arrayOfBooks)知道

但如果你改用

console.table(arrayOfBooks)

您将获得以下输出：

推断数组是什么不是至少好 300 倍并且更容易吗？

3. console.image('URL_OF_IMG')

大家抓紧！在你离开控制台亲自尝试之前，我要告诉你，这个功能在浏览器中原生不支持 JavaScript。

您必须首先使用以下脚本标签从 CDN 加载此 JS 资源：

<script src='https://raw.githubusercontent.com/adriancooney/console.image/master/console.image.min.js'></script>

有关☝️的更多详细信息，请参阅此链接https://github.com/adriancooney/console.image。显然，该项目已经不再维护（最后一次提交大约是 6 年前），因为实在没什么可做的了console.image:)

*奖励：*您可以console.meme加入 CDN 来制作类似这样的内容：

根据他们的 Github Readme 的格式如下：

console.meme(upper text, lower text, meme type|url, width, height)

4. console.warn(YOUR_MESSAGE)

您可以使用它来指示日志消息，向开发人员显示这实际上并不是破坏项目的事情，而是在将来的提交中修复它

console.warn('Image Kirk_0932.jpg dimensions are slightly off and its causing a small part to be hidden from the user')

这是控制台中⚠️警告消息的屏幕截图

5. 控制台。** ( *)

如果你们想知道第五件很酷的事情，那么就让我在这篇文章上获得 20 个关注者和 20 个赞💕❤️💕❤️💕。

-------- 编辑 1（达到目标）-----------

5. console.time() 测试你的 API

您可以在控制台中跟踪 API 调用获取数据所需的时间。您可以使用它来计算平均时间，如果您觉得它很糟糕，可以向后端开发人员咨询 ;P

因此，将相同的标签传递'API_TEST'给time函数timeEnd即可使其工作。

console.time("API_TEST");

const fiftyTests = Array.from(
     { length: 50 }, 
     () => fetch('https://jsonplaceholder.typicode.com/todos/1'));

for(const prom of fiftyTests) {
  const resp = await prom;
  const json = await resp.json();
  console.count('Fetched ');
}

console.timeEnd("API_TEST");

现在，您可以看到在控制台中打印出接连进行 50 次 api 调用所需的时间。

现在您可以将其除以 50 来获取 API 响应所需的平均时间。

⚠️ 不要使用Promise.all()因为它会同时等待所有承诺，并在所有承诺都得到解决后通知您，这违背了我们的目的

感谢阅读，
下次再见，
愿
上帝保佑你:)