Chrome dev tool

发现自己是个假前端，Chrome develop tool 好多功能没被用到，感觉好可惜。用的好，生产力杠杠的。
所以就比如说，加载延迟，内存泄漏呀什么的要知道怎么看，问题出在哪里很重要。
记录下容易被忽略的一些功能，为V8举杯

一.Element

1、Event Listeners选项，观察该元素绑定的事件。

click 是事件名称

.div1 事件是索引名称（也就是通过什么绑定的）

attachment 事件来源

handler里面包含事件的毁掉主体内容

useCapture表示该事件是否向上冒泡

2、Break on：为该元素添加dom操作事件监听。包含三个选项（树结构改变、属性改变、节点移除）。这个选项的作用是帮助我们监控和定位操作元素的代码。

3、按快捷键ctrl+F可以看到底部有输入框，在输入框中输入你想要查找的任何内容，如果匹配到了，都会在面板中高亮显示

二、Network 是一个监控当前网页所有的http请求的面版，它主体部分展示的是每个http请求，每个字段表示着该请求的不同属性和状态

Name：请求文件名称
Method：方法（常见的是get post）
Status：请求完成的状态
Type：请求的类型
Initiator：请求源也就是说该链接通过什么发送（常见的是Parser、Script）
Size：下载文件或者请求占的资源大小
Time：请求或下载的时间
Waterfall（Timeline）：该链接在发送过程中的时间状态轴（我们可以把鼠标移动到这些红红绿绿的时间轴上，对应的会有它的详细信息：开始下载时间，等待加载时间，自身下载耗时）

---

Stalled/Blocking：在请求能够被发出去前的等等时间。包含了用于处理代理的时间。另外，如果有已经建立好的连接，那么这个时间还包括等待已建立连接被复用的时间，这个遵循Chrome对同一源最大6个TCP连接的规则。
Proxy Negotiation：处理代理的时间。
DNS Lookup：查找DNS的时间。页面上每个新的域都需要一次完整的寻路来完成DNS查找。
Initial Connection / Connecting：用于建立链接的时间，包括TCP握手及多次尝试握手，还有处理SSL。
SSL：完成SSL握手的时间。
Request Sent / Sending：发起请求的时间，通常小到可以忽略。
Waiting (TTFB)：等待响应的时间，具体来说是等待返回首个字节的时间。包含了与服务器之间一个来回响应的时间和等待首个字节被返回的时间。
Content Download / Downloading：用于下载响应的时间

对于header部分请参考http协议

三、Sources 功能面板是资源面板，他主要分为四个部分，四个部分并不是独立的，他们互相关联，互动共同实现一个重要的功能:监控js在执行期的活动。简单来说就是断点啦。

后续。。。。。