JavaScript console.log() 小技巧

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

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

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

[[388058]]

计算属性名称

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

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

console.trace()

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

  1. const outer = () => { 
  2.   const inner = () => console.trace('Hello'); 
  3.   inner(); 
  4. }; 
  5.  
  6. outer(); 
  7. /* 
  8.   Hello 
  9.   inner @ VM207:3 
  10.   outer @ VM207:5 
  11.   (anonymous) @ VM228:1 
  12. */ 

console.group()

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

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

日志级别

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

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

console.assert()

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

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

console.count()

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

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

console.time()

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

  1. console.time('slow comp');     
  2. console.timeLog('slow comp');  
  3. console.timeEnd('slow comp');  

CSS

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

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

 

责任编辑:赵宁宁 来源: 前端先锋
相关推荐

2018-01-26 10:42:44

前端JavascriptConsole对象

2023-08-31 09:10:18

JavaScript调试

2020-03-25 08:26:44

console.log前端

2023-02-24 08:00:00

2024-04-15 00:00:00

console语法树AST

2020-01-09 08:26:16

代码JS开发

2024-04-08 11:42:14

代码console开发

2024-03-18 07:56:49

CSSJS代码调试

2024-10-29 12:54:27

2022-08-22 08:32:17

招聘函数string

2011-07-15 17:35:19

JavaScript

2023-07-27 15:04:10

Node.js核心API

2022-07-04 08:51:43

条件语句JavaScript

2017-09-12 15:11:12

Chrome

2021-03-27 10:59:45

JavaScript开发代码

2023-04-26 15:19:36

JavaScripMap数组

2021-03-15 08:13:19

JavaScript开发代码

2019-12-20 14:32:55

JavaScript函数开发

2020-12-14 08:30:02

JavaScript开发代码

2020-09-26 21:50:26

JavaScript代码开发
点赞
收藏

51CTO技术栈公众号