chrome控制台调试

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作为控制台里的变量。
输出带有样式的文字和图片：