实用Javascript调试技巧分享

见过太多同窗调试Javascript只会用简单的console.log甚至alert，看着真为他们捉鸡。。由于大多数同窗追求优雅而高效地写代码，却忽略了如何优雅而高效地调试代码，不得不说是有点“偏科”了。下面我就分享一些实用且聪明的调试技巧，但愿能让你们调试本身代码的时候更加从容自信。

1. 不要使用alert

首先，alert只能打印出字符串，若是打印的对象不是String，则会调用toString()方法将该对象转成字符串（好比转成[object Object]这种），因此除非你打印String类型的对象，其余什么信息都获取不到。其次，alert会阻塞UI和javascript的执行，必须点击'OK'按钮才能继续，很是低效。因此，喜欢使用alert的同窗能够改改这个习惯了。

2. 学会使用console.log

console.log谁都会用，可是不少同窗只知道最简单的console.log(x)这样打印一个对象，当你的代码里面console.log多了以后，会很难将某条打印结果和代码对应，因此咱们能够给打印信息加上一个标签便于区分：

let x = 1;
console.log('aaaaaaaa', x);

获得：

标签不必定要有明确的含义，视觉效果显著就能够了，固然有明确意义更好。

事实上，console.log能够接收任意多的参数，最后将这些对象拼接输出，好比：

若是打印信息过多，不容易找到目标信息的话，能够在控制台中进行过滤：

注意点

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

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

3. 给console.log添加样式

若是咱们不想console.log打印结果字体、颜色都同样，咱们想要更醒目的显示也能够作到。咱们可使用CSS来给console.log增长样式。好比：

console.important = function (msg) {
  console.log('%c %s', 'color:white; background-color:#FF1744; font-weight:bold; text-transform: uppercase; font-size:18px; padding:4px', msg);
}

console.todo = function (msg) {
  console.log('%c %s %s %s', 'color:black;background-color:#ffde03; font-size:18px; padding:4px', '–', msg, '–');
}

console.important('This is an important message! ');
console.todo('This is something need to be done');

4. 学会使用console.dir

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

和直接审查元素没有什么区别。

若是咱们想看到DOM对象做为JavaScript对象的结构可使用console.dir，好比：

事实上，console.dir能够打印出任何JavaScript对象的属性列表，好比打印一个方法：

5. 学会使用console.table

咱们常常会遇到这样的场景：获取到一个用户列表，每一个用户有不少属性，可是咱们只想查看其中的某些属性，在用console.log打印出来的时候须要把每一个用户对象展开一个个查看，很是麻烦。而console.table完美的解决这个问题，好比我只想获取到下列用户的id和坐标：

console.log打印结果：

console.table打印结果：

很是的准确和快速！

6. 学会使用console.time

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

7. 快速查找DOM元素

有时咱们须要查找网页上的某些元素，会选择在浏览器控制台经过document.querySelector/document.querySelectorAll来查询。可是chrome和firefox提供了一种更快的方法，使用相似于jQuery的查询语句：

$('.item')返回符合条件的第一个元素，$$('.item')返回全部符合条件的元素。

8. 使用debugger打断点

有时候咱们须要打断点进行单步调试，通常会选择在浏览器控制台直接打断点，但这样还须要先去Sources里面找到源码，而后再找到须要打断点的那行代码，比较费时间。使用debugger关键词，咱们能够直接在源码中定义断点，方便不少，好比：

9. 查到源码文件

有时候咱们想在控制台的Sources中查找某个js源文件，要把文件夹逐一点开找，很是麻烦。其实Chrome提供了文件的搜索功能，只不过大部分时候咱们给忽略了。。

只要按Command + P（windows的快捷键请自行查看）就能弹出搜索框搜索你想要找的文件啦：

10. 压缩JS文件的阅读

有时候咱们须要在Sources中阅读一段js代码，可是发现它被压缩了，Chrome也提供了和方便的格式化工具，让代码变得从新可读：

点完以后变成这样：

以上就是我我的在平时比较经常使用的一些调试小技巧，若是你们有其余好的调试技巧也欢迎分享，谢谢🙏！

最后，推荐你们使用 Fundebug，一款很好用的BUG监控工具~