推荐几个不错的console调试技巧实现(2)

上图中的第二行因为arr.length > 5值为false,因此打印出后面的信息。如果在某些场景下你需要评估当前的数据是否满足某个条件,那么不妨使用console.assert()方法来在控制台中查看断言信息。

6、console.trace()

该方法用于在控制台中显示当前代码在堆栈中的调用路径,通过这个调用路径我们可以很容易地在发生错误时找到原始错误点,示例如下:

function foo(data) { if (data === null) { console.trace(); return []; } return [data.a, data.b]; } function bar1(data) { return foo(data); } function bar2(data) { return foo(data); } bar1({a: 1, b: 2}); // -> [1, 2] bar2(null); // -> []

在上面代码中,我们分别在bar1和bar2函数中调用foo函数并传入不同的参数,很显然bar2函数在执行时会进入if语句并执行console.trace()方法,以下是控制台中打印结果:

推荐几个不错的console调试技巧实现

可以看到自下而上的一条调用路径,并可以快速判定是在bar2函数中传入了不合适的参数null而导致出错,方便我们跟踪发生错误的原始位置。

7、console.count()

该方法相当于一个计数器,用于记录调用次数,并将记录结果打印到控制台中。其接收一个可选参数console.count(label),label表示指定标签,该标签会在调用次数之前显示,示例如下:

for (let i = 1;i <= 5;i++) { if (!(i % 2)) { console.count('even'); } else { console.count('odd'); } }

代码中如果i是偶数,则会对even计数器进行计数,否则对odd计数器进行计数,执行后我们会在控制台中看到如下列表:

odd: 1
even: 1
odd: 2
even: 2
odd: 3

8、console.time() & console.timeEnd()

这两个方法一般配合使用,是JavaScript中用于跟踪程序执行时间的专用函数,console.time方法是作为计算的起始时间,console.timeEnd是作为计算的结束时间,并将执行时长显示在控制台。如果一个页面有多个地方需要使用到计算器,则可以为方法传入一个可选参数label来指定标签,该标签会在执行时间之前显示。在以往我们计算程序的执行时间时,我们一般会采用如下方式:

const startTime = performance.now(); let sum = 0; for(let i = 0;i < 100000;i++) { sum += i; } const diffTime = performance.now() - startTime; console.log(`Execution time: ${ diffTime }`);

这是一种比较传统的做法,我们还可以使用console.time来实现:

console.time('sum'); let sum = 0; for(let i = 0;i < 100000;i++) { sum += i; } console.timeEnd('sum');

控制台效果如下:

推荐几个不错的console调试技巧实现

相比于第一种实现方式,我们没有设置任何临时变量并且没有做任何计算。

9、console.group() & console.groupEnd()

顾名思义,对数据信息进行分组,其中console.group()方法用于设置分组信息的起始位置,该位置之后的所有信息将写入分组,console.groupEnd()方法用于结束当前的分组,示例如下:

class MyClass { constructor() { console.group('Constructor'); console.log('Constructor executed'); this.init(); console.groupEnd(); } init() { console.group('init'); console.log('init executed'); console.groupEnd(); } } const myClass = new MyClass();

控制台效果如下:

推荐几个不错的console调试技巧实现

该方法的作用主要是让我们在控制台打印的日志更加清晰可读。

10、浏览器转为编辑器

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/d4d0b2bcb5e3834062c6a80d2636f142.html