JavaScriptconsole.log()小技巧

本文转载自微信公众号“前端先锋”（jingchengyideng）。

每个前端都会用 JavaScript 控制台打日志或调试。但是 console 对象比 console.log() 有更多的东西。

计算属性名称

ES6 的计算属性名称特别有用，因为它们可以通过在变量周围添加一对大括号来帮你识别的变量。

 
 
 
  
  
  const x = 1, y = 2, z = 3; 
  
  
   
  
  
  console.log({x, y, z}); // {x: 1, y: 2, z: 3}

console.trace()

console.trac() 与 console.log() 完全相同，但它也会输出整个栈跟踪，能让你确切地知道到底发生了什么。

 
 
 
  
  
  const outer = () => { 
  
  
    const inner = () => console.trace('Hello'); 
  
  
    inner(); 
  
  
  }; 
  
  
   
  
  
  outer(); 
  
  
  /* 
  
  
    Hello 
  
  
    inner @ VM207:3 
  
  
    outer @ VM207:5 
  
  
    (anonymous) @ VM228:1 
  
  
  */

console.group()

console.group() 可以把日志分组为可折叠的结构，当有多个日志时特别有用。

 
 
 
  
  
  console.group('Outer');           // 创建一个名为 'Outer' 的组 
  
  
  console.log('Hello');             // 在 'Outer' 组中输出日志 
  
  
  console.groupCollapsed('Inner');  // 创建一个名为 'Inner' 的组，折叠状态 
  
  
  console.log('Hellooooo');         // 在 'Inner' 组中输出日志 
  
  
  console.groupEnd();               // 结束当前组, 'Inner' 
  
  
  console.groupEnd();               // 结束当前组, 'Outer' 
  
  
  console.log('Hi');                // 在组外输出日志

日志级别

除了 console.log() 之外，还有其他一些日志记录级别，例如 [console.debug()](https://developer.mozilla.org/en-US/docs/Web/API/Console /debug)、 console.info()、 console.warn()和 console.error()。

 
 
 
  
  
  console.debug('Debug message'); 
  
  
  console.info('Useful information'); 
  
  
  console.warn('This is a warning'); 
  
  
  console.error('Something went wrong!');

console.assert()

console.assert() 提供了一种简便的方法，仅在断言失败时将某些内容记录为错误(例如当第一个参数为 false 时)，否则完全跳过日志。

 
 
 
  
  
  const value = 10; 
  
  
   
  
  
  console.assert(value === 10, 'Value is not 10!'); // 不输出日志 
  
  
  console.assert(value === 20, 'Value is not 20!'); // 输出日志："Value is not 20!"

console.count()

可以用 console.count() 来统计一段代码执行了多少次。

 
 
 
  
  
  Array.from({ length: 4 }).forEach( 
  
  
    () => console.count('items')  // 名为 items 的计数器 
  
  
  ); 
  
  
  /* 
  
  
    items: 1 
  
  
    items: 2 
  
  
    items: 3 
  
  
    items: 4 
  
  
  */ 
  
  
  console.countReset('items');  // 重置计数器

console.time()

console.time() 提供了一种快速检查代码性能的方法，但是由于精度较低，不可用于真正的基准测试。

 
 
 
  
  
  console.time('slow comp');     
  
  
  console.timeLog('slow comp');  
  
  
  console.timeEnd('slow comp');

CSS

最后一个，还可以在 console.log() 中用 %c 字符串替换表达式将 CSS 应用于日志的各个部分。

 
 
 
  
  
  console.log( 
  
  
    'CSS can make %cyour console logs%c %cawesome%c!', 
  
  
    'color: #fff; background: #1e90ff; padding: 4px',  
  
  
    '',  
  
  
    'color: #f00; font-weight: bold', 
  
  
    '' 
  
  
  );

网站标题：JavaScriptconsole.log()小技巧
链接地址：http://www.shufengxianlan.com/qtweb/news19/468169.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容