JavaScript调试技巧

梦里梦外; 2023-10-06 23:49 8阅读 0赞

#### 阅读目录 ####

*  阐述
 *   *  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);

![在这里插入图片描述][52b2adccd5aa465d8ef540e6748fef6c.png]

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

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

console.time('Timer1');
    
    var items = [];
    
    for(var i = 0; i < 100000; i++){
        
       items.push({
        index: i});
    }
    
    console.timeEnd('Timer1');

![在这里插入图片描述][13563b10a112461599010595af07df53.png]

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

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

![在这里插入图片描述][3d1572e970334e9bba6472d493527692.png]

![在这里插入图片描述][5a37f672dd354c79a7c8ecc9edfc6cae.png]

[52b2adccd5aa465d8ef540e6748fef6c.png]: https://img-blog.csdnimg.cn/52b2adccd5aa465d8ef540e6748fef6c.png
[13563b10a112461599010595af07df53.png]: https://img-blog.csdnimg.cn/13563b10a112461599010595af07df53.png
[3d1572e970334e9bba6472d493527692.png]: https://img-blog.csdnimg.cn/3d1572e970334e9bba6472d493527692.png
[5a37f672dd354c79a7c8ecc9edfc6cae.png]: https://img-blog.csdnimg.cn/5a37f672dd354c79a7c8ecc9edfc6cae.png