chrome devtools使用指南之一

前言

学习谷歌浏览器的开发者工具，方便自己在日后的项目开发中提高生产效率。

面板

面板效果如下：

可以看到如下菜单栏：
Elements,Resources,Network,Timeline,Profiles,Resources,Security,Audits,Console。

可以使用Ctrl+[ 和 Ctrl+]在面板间切换。

Elements

Elements面板是用来修改DOM相关的，可以修改样式和html代码等。
可以通过选中DOM节点后进行对应的属性查看：

我们可以通过选中节点后右键Edit as HTML来直接对html进行修改：

我们还可以通过EventListeners来查看节点上对应的事件，并转到响应函数的位置：

其中每个事件有以下几个属性：

• handler:函数，可以通过右键Show Function Definition来找到定义。
• isAttribute:如果该事件是通过DOM属性监听则为true。比如onClick。
• lineNumber：行数
• listenerBody：函数本身的内容。
• node：绑定监听事件的DOM节点，移动上去可以对应DOM位置
• type：事件类型，比如click
• useCapture：addEventListener是否设置

修改样式

通过Styles可以修改DOM的样式，还可以通过点击颜色来使用取色器：

Resources

该栏目主要存放web对应的cookie，cache，websql
还有localStorage和SessionStorage等信息。

这里主要看一下cookies的列：

对应的属性如下：

• Name — cookie名字.
• Value — cookie值.
• Domain — 域名.
• Path — 路径.
• Expires / Maximum Age— 最大时间，对于session来说一直是“session”.
• Size — 大小.
• HTTP — 如果打钩则说明只能通过HTTP传输.
• Secure — 如果打钩则说明必须安全传输.

至于后面两种设置，可以看看这篇文章。

清除

我们可以手动清除：

Frames
我们可以在Frames中看到网页所有的字体、图片、脚本和样式文件：

Networks

网络面板结构图：

每一列含义如下：
- Name：资源的URL
- Method：HTTP协议的请求方式，GET或POST
- Status and Text：HTTP状态码
- Type：资源类型
- Initiator：请求发起者，可能是一个脚本也可能是重定向等
- Timeline：资源加载所需时间线

再来看看Timeline，我们可以查看不同的时间：

分别对应：
- Strat Time:按照每个网络请求的开始时间排序
- Response Time:按照响应时间排序
- End Time：按照完成时间排序
- Duration：按照总时间排序
- Latency：响应和开始请求之间的时间

当我们点击某一个资源后，出现Header，Preview，Responser和Timing。可以用来查看HTTP各种类型的头信息和响应结果：

这里的Timing则显示资源在加载各个阶段的耗时：

每个阶段意义如下：

• Stalled:用户代理花费时间
• Proxy:连接代理服务器的时间
• DNS Lookup:DNS查询时间
• Initial Connection:建立TCP连接所需时间
• SSL:建立SSL安全通道时间
• Request Sent:发送网络请求花费时间
• Waiting(TTFB):等待初始响应时间，也称为Time To First Byte，可以理解为延迟。
• Content Download:接收响应数据花费时间

参考

Web安全之Cookie管理
Elements
Resources
NetWork