JavaScript调试技巧

Posted 2022-09-09 知其黑、受其白

阅读目录

• 阐述
• • debugger
  • console.table(animals) 用表格显示对象
  • 使用 console.time() 和 console.timeEnd() 测试循环
  • console.log() 和 console.dir() 的区别

阐述

我们调试javascript一般会用到Chrome和Firefox的控制台作为调试工具，本文列出了几条用于调试Javascript的技巧，掌握它们，让我们花更少的时间来解决错误和 bug，从而提高开发效率。

debugger

除了 console.log, debugger 是我们最喜欢、快速的调试工具。
执行代码后，Chrome 会在执行时自动停止。
你甚至可以把它封装成条件，只在需要时才运行。

if (thisThing) 
    debugger;

console.table(animals) 用表格显示对象

有时， 有一组复杂的对象要查看。可以通过 console.log 查看并滚动浏览，亦或者使用console.table 展开，更容易看到正在处理的内容！

var animals = [
     animal: 'Horse', name: 'Henry', age: 43 ,
     animal: 'Dog', name: 'Fred', age: 13 ,
     animal: 'Cat', name: 'Frodo', age: 18 
];

console.table(animals);

使用 console.time() 和 console.timeEnd() 测试循环

要得知某些代码的执行时间，特别是调试缓慢循环时，非常有用。
甚至可以通过给方法传入不同参数，来设置多个定时器。
来看看它是怎么运行的：

console.time('Timer1');

var items = [];

for(var i = 0; i < 100000; i++)
   items.push(index: i);


console.timeEnd('Timer1');

console.log() 和 console.dir() 的区别

console.log() 会在浏览器控制台打印出信息。
console.dir() 可以显示一个对象的所有属性和方法。

<script>
var animals = [
     animal: 'Horse', name: 'Henry', age: 43 ,
     animal: 'Dog', name: 'Fred', age: 13 ,
     animal: 'Cat', name: 'Frodo', age: 18 
];

console.log(animals);
</script>

<script>
var animals = [
     animal: 'Horse', name: 'Henry', age: 43 ,
     animal: 'Dog', name: 'Fred', age: 13 ,
     animal: 'Cat', name: 'Frodo', age: 18 
];

console.dir(animals);
</script>