chrome浏览器控制台是前端常用的调试工具，它拥有八个功能面板，常用的有elements,console,sources,network。
每个模块的功能为：
- elements:查看和编辑当前页面中的html和css元素。
- console:用于输出调试信息，执行脚本等
- network:查看http请求的详细信息
- source:查看和调试当前页面所加载的文件
这里主要记录一下console,network和source的用法
console
平时使用console,一般都是在js中使用console.log打印出变量信息之类的，很少用到其他功能。其实它还提供了其他的输出信息的方法如：
console.info输出提示信息
console.error输出错误信息
console.warn输出警示信息
-
console.assert对输入的表达式进行判断，只有表达式为false时才输出信息。
-
console.count:统计代码被执行的次数
-
console.dir:以树形结构展示对象的所有属性和方法，因为有时使用console.log打印，只有[object Object]
- console.time开始计时
-
console.timeEnd结束计时
network
network显示浏览器发起的所有请求，每个资源都占一行，包含了name(资源名、url路径),status(请求的状态)，type（请求资源的mime类型），initiator(请求如何发起/由什么发起),size(size是响应头部和响应体结合起来的大小)，time（从请求开始到接收到最后一个字节的总时长），waterfall（显示请求的各个阶段的所用时间）
source
可以看到当前页面所加载的脚本和源文件。通过左边的文件目录打开文件，鼠标点击行号就可以设置和删除断点了。通过右侧的菜单栏可以看到断点有多种，如：代码断点、dom断点、异步请求断点、事件监听断点等。
-
代码断点：直接点击文件中的行号设置断点，这里还能进行条件断点，在断点处点击右键，选择edit breadpoint即可添加条件，当条件为true时才会断点：
-
事件断点：通过elements>event listener可以查看某个元素添加了哪些事件
可以直接跳到source面板查看对应的监听函数，对事件监听函数添加断点。除了对某个元素的事件添加断点，也可以对全局事件添加断点。在source面板的右侧选择需要监听的事件即可。
dom断点：直接右击dom元素可以对该dom元素的变化添加断点,包括：
1.subtree modifications:当对该节点的子节点添加、删除、交换顺序、修改内容和属性时触发断点，对该节点本身的修改不会触发断点。
2.attribute modifications:当节点属性发生变化时触发，对子节点的任何修改都不会触发断点。
3.node removal:当节点被删除时触发。xhr断点：监听所有xhr请求，一旦 xhr 调用时就会在 request.send() 的地方触发。
debugger断点：debugger断点是直接在js代码中加入debugger关键字，当js代码执行到debugger时，会触发断点：
$('#add').click(function() {
debugger;
$('ul').append('<li>222</li>');
})
观察信息
触发了断点后，在显示区可以看到当前环境的各个变量和函数信息，也能够在调试功能区观察当前环境的各种信息，如执行上下文栈、作用域链等。
断点操作
从左到右依次是：
- 暂停/恢复脚本执行（程序执行到下一断点停止）
- 跳到下一行
- 进入当前函数
- 跳出当前函数
- 关闭/开启所有断点（不会取消）
- 异常情况自动断点设置
其他常用指令
-
$_ 返回上一次表达式的值
- $0-$4:返回最近n次的选择的元素,$0为当前选中的元素
- $(selector) 与jQuery用法一样，返回所选择的元素。
-
copy(Object):直接复制字符串表达式
如图将当前选中元素以html代码的形式复制，可以直接粘贴在文本中。
- debug(function):指定函数被调用时触发断点功能，使用undebug()取消
- getEventListeners(Object):返回指定元素所有绑定的事件。
- monitor(function):监听这个函数的调用，返回函数调用时的参数。
-
monitorEvents(object,[events]):监听指定元素上的指定事件，可以传单个事件或者多个事件，返回监听函数的参数。
如图第三个语句为监听key类型的事件监听函数。
除了key，还有mouse、touch、control类型，如下图
-
页面中如果有元素定义了id，可以直接用这个id作为控制台里的变量。
-
输出带有样式的文字和图片：
