加入收藏 | 设为首页 | 会员中心 | 我要投稿 核心网 (https://www.hxwgxz.com/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 建站 > 正文

灵活使用console让 js调试更简单

发布时间:2019-04-04 22:39:54 所属栏目:建站 来源:前端小智
导读:Web开发最常用的高度就是 console.log ,虽然 console.log 占有一席之地,但很多人并没有意识到 console 本身除了基本 log 方法之外还有很多其他方法。 适当使用这些方法可以使调试更容易,更快速,更直观。 console.log() 在console.log 中有很多人们意想

assert() 与 log() 是相同的函数,assert()是对输入的表达式进行断言,只有表达式为false时,才输出相应的信息到控制台,示例如下:

  1. var arr = [1, 2, 3];  
  2. console.assert(arr.length === 4); 

有时我们需要更复杂的条件句。例如,我们已经看到了用户 WAL0412 的数据问题,并希望仅显示来自这些数据的事务,这是直观的解决方案。

  1. console.assert(tx.buyer === 'WAL0412', tx); 

这看起来不错,但行不通。记住,条件必须为false,断言才会执行,更改如下:

  1. console.assert(tx.buyer !== 'WAL0412', tx); 

与其中一些类似,console.assert() 并不总是特别有用。但在特定的情况下,它可能是一个优雅的解决方案。

console.count()

另一个具有特殊用途的计数器,count只是作为一个计数器,或者作为一个命名计数器,可以统计代码被执行的次数。

  1. for(let i = 0; i < 10000; i++) {  
  2.   if(i % 2) {  
  3.     console.count('odds');  
  4.   }  
  5.   if(!(i % 5)) {  
  6.     console.count('multiplesOfFive');  
  7.   }  
  8.   if(isPrime(i)) {  
  9.     console.count('prime');  
  10.   }  

这不是有用的代码,而且有点抽象。这边也不打算演示 isPrime 函数,假设它是成立的。

执行后我们会得到一个列表:

  1. odds: 1  
  2. odds: 2  
  3. prime: 1  
  4. odds: 3  
  5. multiplesOfFive: 1  
  6. prime: 2  
  7. odds: 4  
  8. prime: 3  
  9. odds: 5  
  10. multiplesOfFive: 2  
  11. ... 

还有一个相关的 console.countReset(),可以使用它重置计数器。

console.trace()

trace() 在简单的数据中很难演示。当您试图在类或库中找出是哪个实际调用者导致了这个问题时,它的优势就显现出来了。

例如,可能有 12 个不同的组件调用一个服务,但是其中一个组件没有正确地设置依赖项。

  1. export default class CupcakeService {   
  2.   constructor(dataLib) {  
  3.     this.dataLib = dataLib;  
  4.     if(typeof dataLib !== 'object') {  
  5.       console.log(dataLib);  
  6.       console.trace();  
  7.     }  
  8.   }  
  9.   ...  

(编辑:核心网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

热点阅读