js之调试小技巧

console.log

console.log('标签名',值); 可以根据标签名区分输出的数据

在使用 console.log打印一个引用类型（比如数组和自定义对象）的对象的时候，输出结果可能并不是执行 console.log方法那个时间点的值。但是可以用 JSON.parse(JSON.stringify(...))来解决这个问题

console.dir

可以输出DOM对象的JS对象结构

我们有时候想看看一个DOM对象里面到底有什么属性和方法，但是常规的console.log打印出来的只是HTML标签

如果我们想看到DOM对象作为JavaScript对象的结构可以使用 console.dir

console.table

可以输出table格式的对象数据，因此如果想要打印对象数据，一般使用这个

alert-不推荐

alert只能打印出字符串，如果打印的对象不是 String，则会调用 toString()方法将该对象转成字符串；如果打印的数据是对象，则会变成 [object Object]

alert会阻塞UI和javascript的执行，必须点击'OK'按钮才能继续，非常低效

console.time

有时候我们想知道一段代码的性能或者一个异步方法需要运行多久，这时候需要用到定时器，JavaScript提供了现成的 console.time方法

debugger

有时候我们需要打断点进行单步调试，一般会选择在浏览器控制台直接打断点，但这样还需要先去Sources里面找到源码，然后再找到需要打断点的那行代码，比较费时间。

使用 debugger关键词，我们可以直接在源码中定义断点，方便很多

查到源码文件

有时候我们想在控制台的 Sources中查找某个js源文件，要把文件夹逐一点开找，非常麻烦。其实Chrome提供了文件的搜索功能，直接执行命令：ctrl+P进行搜索