ToB企服应用市场:ToB评测及商务社交产业平台

标题: 前端console用法分享 [打印本页]
作者: 王國慶    时间: 2024-10-16 15:51
标题: 前端console用法分享
console对于前端人员来讲肯定都不陌生，相信大部分开发者都会利用console来举行调试，但它能做的绝不但限于调试。
最常见的控制台方法

作为开发者，最常用的 console 方法如下：

控制台打印结果：

本日我分享的是一些 console 的高级用法。
首先，看一下 console 提供了哪些方法，在控制台打印一下：

在 Chrome 123 版本，可以看到有 25 个方法。这篇文章将先容一部分比力实用的方法，了解专业的前端都怎么运用 console的。
打印时间


常见的一种场景是盘算步伐执行时间，以跟踪操作所需的时间。这便可以通过利用console.time()启动计时器并传入标签，然后通过相同的标签利用console.timeEnd()结束计时器来实现。甚至还可以利用console.timeLog()在长时间运行的操作中添加标记。
  1. // 定义一个函数，模拟一个耗时的计算过程
  2. function calculateSomething() {
  3.   let sum = 0;
  4.   for (let i = 0; i < 1000000000; i++) {
  5.     sum += i;
  6.   }
  7.   return sum;
  8. }
  10. // 使用 console.time() 开始计时，并给计时器命名
  11. console.time('Calculation Time');
  13. // 执行耗时的函数
  14. const result = calculateSomething();
  16. // 使用 console.timeEnd() 结束计时，并打印经过的时间
  17. console.timeEnd('Calculation Time');
  19. // 如果在计算过程中想要添加额外的标记点，可以使用 console.timeLog()
  20. console.time('Calculation Time');
  21. console.log('中间点输出'); // 假设在某个中间点输出日志
  22. console.timeLog('Calculation Time', '中间点标记'); // 添加标记
  24. // 再次执行耗时的计算
  25. calculateSomething();
  26. console.timeEnd('Calculation Time'); // 结束计时
复制代码

性能分析

我们已经知道通过 console.time() 和 console.timeEnd() 我们可以了解一段代码的运行时间。
但是，假如我们必要分析较为复杂的 JavaScript 逻辑代码，想要从中找出步伐运行的性能瓶颈，假如继续利用 console.time() 方法，意味着我们必要大量的插入该方法，这显然是鸠拙的，不保举大家这么搞。
相对于复杂逻辑的 JavaScript 步伐调优，此时 console.profile() 和 console.profileEnd() 便派上用场了。通过新建一个性能分析器(基于cpu的利用环境)，使之成为函数性能分析的利器。
用法和 console.time() 的一样，console.profile()开始，console.profileEnd()结束，必要传递一个参数作为标签利用，通俗来说，就是为这个性能分析器起个名字。看下如下代码，我们测试几种不同for循环誊写方式的耗时环境：
  1. // 简单新建一个数组吧，新建一个一百万个成员为1的数组
  2. let arr = new Array(1000000).fill(1);
  3.    
  4. // 第一种for循环书写方式   
  5. function forFun1 () {
  6.     for (let i = 0, len = arr.length; i < len; i++) {}
  7. }
  9. // 第二种for循环书写方式   
  10. function forFun2 () {
  11.     for (let i = arr.length; i --; ) {}
  12.     forFun1();
  13. }
  14. // 第三种for循环书写方式  
  15. function forFun3 () {
  16.     for (let i = 0, item; item = arr[i++]; ) {}
  17. }
  18. // 执行三个函数  
  19. function fun () {
  20.   forFun1();
  21.   forFun2();
  22.   forFun3();
  23. }
  25. // 立即开始一个性能分析器
  26. console.profile('测试for循环');
  27. fun();
  28. //
  29. console.profileEnd('测试for循环');
复制代码
打开控制台运行如上步伐：

嗯，打印了两句话，性能分析器开启和结束。这就完了？？
在哪儿检察性能分析结果呢？别急，继续往下看

在控制台可以找到这个 javaScript性能分析器，英文 javaScript Profiler, 假如你在自己欣赏器找不到， 可能是你没有启动这个试验性功能。

在设置中找到实行, 然后开启即可。
打印计次

console.count() 是一个在欣赏器控制台中用于计数的 API，它允许开发者在调试过程中跟踪函数调用的次数或某些特定代码块的执行次数。
例如, 在React开发中， 想要跟踪一个子组件被渲染的次数：
  1. class MyComponent extends React.Component {
  2.   render() {
  3.     console.count('MyComponent 渲染次数');
  4.     return (
  5.       <div>这是一个组件</div>
  6.     );
  7.   }
  8. }
复制代码

在这个例子中，每次 MyComponent 组件渲染时，控制台都会显示渲染次数的计数器。
堆栈跟踪

console.trace() 是一个非常有用的欣赏器控制台方法，它可以在代码的特定位置插入一个跟踪点，然后输出一个堆栈跟踪，显示调用堆栈的每一层。这对于调试复杂的函数调用和理解代码执行流程非常有用。
举个例子，在React性能优化中，console.trace() 可以用来追踪性能瓶颈的泉源。通过在关键的渲染或更新方法中插入跟踪点，可以了解哪些操作占用了大量时间。
  1. class PerformanceComponent extends React.Component {
  2.   shouldComponentUpdate(nextProps, nextState) {
  3.     console.trace('shouldComponentUpdate 跟踪');
  4.     return nextProps.data !== this.props.data;
  5.   }
  7.   componentDidUpdate(prevProps, prevState) {
  8.     console.trace('componentDidUpdate 跟踪');
  9.     // 执行更新后的操作
  10.   }
  12.   render() {
  13.     const { data } = this.props;
  14.     return (
  15.       <div>数据: {data}</div>
  16.     );
  17.   }
  18. }
复制代码
打印表格

console.table()方法将对象/数组打印为格式整齐的表格，照旧以上面dog对象为例：

分组打印

当存在许多输出信息时，你可能想对它们举行构造。一个小而有用的工具是 console.group()和console.groupEnd()。所有在console.group和console.groupEnd之间的console调用都会被分组在一起。调用groupEnd()减少一个级别(回到上一个层级)。
  1. console.group('Console');
  2. console.log('warin', "警告");
  3. console.log('error', "错误");
  4. console.log('info', "提示");
  5. console.groupCollapsed('Log');
  6. console.log('%c 自定义样式', "color:red");
  7. console.log('%O', {a:1});
  8. console.log('%d', 12.1);
  9. console.groupEnd();
  10. console.groupEnd();
复制代码

console.log() 进阶

console.log() 除了上面说的基本用法，还支持下面这些输出方式。
自定义CSS样式输出
  1. console.log(`岁月神偷，歌手：%c 金玟岐 `, 'color: #fff;font-size:24px; background:#045133')
复制代码

支持占位修饰符 %c来自定义样式。
格式化输出内容
输特别式化的字符串，除了利用占位符 %c来定义 css样式， 还支持以下几种占位符:
占位符描述%s字符串%d / %i整数%f浮点数%o / /%Oobject对象
  1. const dog = {
  2.     name:"阿黄",
  3.     age: 1.5,
  4.     friends: 12
  5. }
  6. console.log('名字: %s, 年龄: %f, 好友:%d ',dog.name, dog.age, dog.friends)
  8. // 输出：名字: 阿黄, 年龄: 1.5, 好友数:12
复制代码
%o / /%O 固然都指对象，但%o 表现DOM对象:

%O 则表现javaScript对象, 我们可以打印一下上面的dog对象：

大家可能以为，我直接简朴的console.log(xxx)输出就行，为什么还要了解这些占位符？
   占位符这种写法在复杂的输出时，能保证模板和数据分离，布局更加清晰。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4