JS调试技巧

     我们在调试代码时，往往追求优雅而高效的写代码，所以就出现了一系列调试代码的方法。这儿根据我的实际遇到的来讲讲这些调试方法。

1、alert（不推荐使用）

  不推荐使用的调试方法，那我为啥放第一个呢，因为这是初学者刚接触Js时的必经之路。

优点：初学者入门（说笑了，现在来看，这个方法几乎没有啥优点）

缺点：

    （1）、alert()会阻塞UI和js的执行，当运行的时候要关闭弹出框才能进行后续的操作，否则代码将不能进行后续操作，很低效。

    （2）、alert()只能打印输出String，因为alert输出的对象会自动调用toString()方法

    （3）、在输出的是对象的时候，alert()输出的是[object object]，无法看到里面的内容

2、console.log（推荐）

很多前端的小伙伴基本都会用console.log，不过好多都局限于类似于console.log(x)的方式打印x到控制台，其实console.log有很强大的功能。

（1）、首先console.log()它是在控制台上进行打印，对代码没有阻塞的作用。

（2）、可以打印任何类型的数据，接受多个参数，结果拼接输出到控制台，打印结果也可以通过控制台过滤。

（3）、在使用 console.log打印一个引用类型（比如数组和自定义对象）的对象的时候，输出结果可能并不是执行 console.log方法那个时间点的值。

可以发现两个 console.log输出的结果展开后都是 [1, 2, 3, 4]，因为数组是引用类型，所以在展开后获取到的都是数组最新的状态。我们可以使用 JSON.parse(JSON.stringify(...))来解决这个问题：

3、console.dir

这个方法可以查看到DOM对象作为js对象的结构，可以打印出任何js对象的属性列表。

4、console.table

这个方法可以说是很实用了，往往我们会遇到打印用户列表信息，然后我们console.log(users)会得到关于用户的很多内容，但是我目前只想看一部分信息，比如id，name，tel等，那我只需要console.table(users,['id','name','tel'])；就好了，结果会以表格的形式呈现给我们。

 

 5、console.time

可检测一段代码的性能或者异步所需的时间，就用定时器

注：console还有一些比较常用的提示性打印

console对象还有很多方法，等待大家去探寻

 

 6、debugger打断点

在控制台找到source源码，通过debugger关键字在源码中定义断点，单步调试。

查找源码文件时，按Ctrl+P快捷键，快速查找文件