【JavaScript】console控制台调试技巧 | JavaScript调试技巧

　　对于前端开发者来说，在开发过程中需要监控某些表达式或变量的值的时候，用 debugger 会显得过于笨重，取而代之则是会将值输出到控制台上方便调试。最常用的语句就是console.log(expression)了。
　　然而对于作为一个全局对象的console对象来说，大多数人了解得还并不全面，当然我也是，经过我的一番学习，现在对于这个能玩转控制台的 JS 对象有了一定的认识，与大家分享一下。
　　console 对象除了console.log()这一最常被开发者使用的方法之外，还有很多其他的方法。灵活运用这些方法，可以给开发过程增添许多便利。

---

console方法

清空控制台

1）通过点击左上角的Clear console按钮
2）右键单击控制台空白区域，选择Clear console（如果没有空白区域，请参考第三点或第一点）
3）控制台中输入命令console.clear();


上下文

　　top — 在默认状态下，Console的上下文（context）为top（顶级）。不过当你检查元素或使用Chrome插件上下文时，它会发生变化。
　　你可以在此更改Console执行的上下文（当你在玩JavaScript的delete方法时可能会遇到你删除的对象属性报错没有声明，实际上你确实定义了，那么此时你应该看下上下文是否对应）。控制台会在你应用的上下文中运行你输入的JS代码。
　　


格式化代码　
　

格式化后的效果 =>（可看到后面多了一个formatted）

console.log与alert的区别

　　现在假设一个场景，如果一个数组里面有成百上千的元素，但是你想知道每个元素具体的值，这时候想想如果你用alert那将是多惨的一件事情，因为alert会阻断线程运行，你不点击alert框的确定按钮，下一个alert就不会出现。
　　那么这时用console.log来替换一下，是不是立马发现了它的魅力。


debugger

　　debugger是临时应急调试工具，一旦它在你的代码中出现，Chrome会自动地执行到它所在位置时停下。你甚至可以将它放在条件语句中，只要你需要时运行。

if(thisThing){
    debugger;
}

以表格的形式显示对象

　　有些时候，你想查看一组复杂的对象。你可以用console.log打印并滚动查看，或者使用console.table来更加轻松地查看你所处理的对象。

var animals = [
    {
  animal: