主要内容：
对console比较熟悉的可以跳到第三部分食用。
1.console的简单使用 简单讲述console平时最常使用的几种，包括console.log( )，console.log({ })，console.table( )。
2.console的高级使用 描述console平时较少使用，比较有用的用法。包括console.trace()，console.time()和console.timeEnd()，console.log('%c')等。
3.基于Chrome的Dev Tools的console使用 描述在开发过程中如何利用Chrome的Dev Tools更好地使用console，包括添加时间戳，实时监控console的输出，直接在source中添加console。
console的简单使用
简单讲述console平时最常使用的几种，包括console.log( )，console.log({ })，console.table( )。
比较简单，看如下例子：
console的高级使用
描述console平时较少使用，比较有用的用法。包括console.trace()，console.time()和console.timeEnd()，console.log('%c')等。
console.trace( )
可以用于函数调用溯源。
function fn3(a) {
console.log('fn3')
console.trace();
return;
}
function fn1(a) {
console.log('fn1');
fn2();
}
function fn2(a) {
console.log('fn2')
fn3();
}
fn1();
输出结果如下：
这里打出的堆栈信息还可以右键 Save as 成文档，可以用于团队间沟通。
console.time()和console.timeEnd()
成对使用，两者接受相同的参数，用于识别不同的时间组。可用于输出两者包含内代码执行的时间，一般可用于判断代码执行的性能。
console.log('%c')
可用于添加输出样式，看如下例子：
console.warn( ) 和 console.error( )
输出不能等级的数据
console.assert( )
可用于断言判断，当参数1为false的时候，会打印出参数2。
console.clear()
清空面板中的console输出
基于Chrome的Dev Tools的console使用
描述在开发过程中如何利用Chrome的Dev Tools更好地使用console，包括添加时间戳，实时监控console的输出，直接在source中添加console。
添加时间戳
为了看清楚console输出的时间关系，可以在console前加入时间戳， Ctrl + Shift + P 打开 Command Menus ，找到相应的命令确认即可。看如下例子：
Live expression小工具的使用
在Chrome的Dev Tools的console面板中，第二栏出现一个“眼睛”一样的符号，这是 Live expression 小工具，可以在这里定义实时表达式的监控，可以同时定义多个。 下面举两个例子：
（1）简单的表达式：
（2）监控鼠标点击坐标（已经使用脚本将坐标挂在了window.pos中）：
适用场景：需要实时输出的数据，比如鼠标的坐标，某个元素的变化。
在Sources中添加console
借用断点来使用console。
（1）使用logpoint
可以在添加断点的地方右键Add logpoint ,按照格式添加console，例子如下：
（2）使用条件断点
条件断点中，每次执行到该行的时候都会进行判断，如果添加的条件返回true，则暂停代码的执行。这里并不需要完全的true和false，因此添加的console相关代码并不会暂停代码的执行，这里可以添加相关的console代码打印结果。 可以在添加断点的地方右键Add conditional breakpoint 中添加console代码，例子如下：
在Dev Tools中的sources添加console的有一定的好处，可以不污染工作代码，还可以通过在breakpoint section中一键取消所有定义的断点，十分方便。
Tips：如果在webpack工程化开发中，一般可以在sources看到相应的webpack文件夹（如果看不到，查看是否在webpack中配置了devtool:'source-map'），里面包含了完整的源码，这里同样可以使用断点。除此之外，还可以在sources的Filesystem中添加相应的工程文件，这里进行的操作保存后会同步保存到文件中，可以配合本地服务进行开发，相当于在Chrome中进行代码开发，只不过需要webpack相应的sourceMap，非工程化的项目可以实时更新。
