前端控制台Console高级用法详解：从计时到性能分析

// 定义一个函数，模拟一个耗时的计算过程
function calculateSomething() {
  let sum = 0;
  for (let i = 0; i < 1000000000; i++) {
    sum += i;
  }
  return sum;
}

// 使用 console.time() 开始计时，并给计时器命名
console.time('Calculation Time');

// 执行耗时的函数
const result = calculateSomething();

// 使用 console.timeEnd() 结束计时，并打印经过的时间
console.timeEnd('Calculation Time');

// 如果在计算过程中想要添加额外的标记点，可以使用 console.timeLog()
console.time('Calculation Time');
console.log('中间点输出'); // 假设在某个中间点输出日志
console.timeLog('Calculation Time', '中间点标记'); // 添加标记

// 再次执行耗时的计算
calculateSomething();
console.timeEnd('Calculation Time'); // 结束计时

// 简单新建一个数组吧，新建一个一百万个成员为1的数组
let arr = new Array(1000000).fill(1);
    
// 第一种for循环书写方式    
function forFun1 () {
    for (let i = 0, len = arr.length; i < len; i++) {}
}

// 第二种for循环书写方式    
function forFun2 () {
    for (let i = arr.length; i --; ) {}
    forFun1();
}
// 第三种for循环书写方式  
function forFun3 () {
    for (let i = 0, item; item = arr[i++]; ) {}
}
// 执行三个函数  
function fun () {
  forFun1();
  forFun2();
  forFun3();
}

// 立即开始一个性能分析器
console.profile('测试for循环');
fun();
//
console.profileEnd('测试for循环');

class MyComponent extends React.Component {
  render() {
    console.count('MyComponent 渲染次数');
    return (
      <div>这是一个组件</div>
    );
  }
}

class PerformanceComponent extends React.Component {
  shouldComponentUpdate(nextProps, nextState) {
    console.trace('shouldComponentUpdate 跟踪');
    return nextProps.data !== this.props.data;
  }

  componentDidUpdate(prevProps, prevState) {
    console.trace('componentDidUpdate 跟踪');
    // 执行更新后的操作
  }

  render() {
    const { data } = this.props;
    return (
      <div>数据: {data}</div>
    );
  }
}

console.group('Console');
console.log('warin', "警告");
console.log('error', "错误");
console.log('info', "提示");
console.groupCollapsed('Log');
console.log('%c 自定义样式', "color:red");
console.log('%O', {a:1});
console.log('%d', 12.1);
console.groupEnd();
console.groupEnd();

console.log(`岁月神偷，歌手：%c 金玟岐 `, 'color: #fff;font-size:24px; background:#045133')

const dog = {
    name:"阿黄",
    age: 1.5,
    friends: 12
}
console.log('名字: %s, 年龄: %f, 好友:%d ',dog.name, dog.age, dog.friends)

// 输出：名字: 阿黄, 年龄: 1.5, 好友数:12