1.Chrome开发者工具不完全指南（一、基础功能篇）

来源：互联网发布：心动网络官网電話编辑：程序博客网时间：2024/04/27 14:42

这里写图片描述

click 是事件名称.div1 事件是索引名称（也就是通过什么绑定的）attachment 事件来源handler里面包含事件的毁掉主体内容useCapture表示该事件是否向上冒泡

这里写图片描述

Add attribut : 为该元素添加属性Edit attribute：修改该元素的属性Force element state： 为元素激活某种状态（主要用在可以几乎的元素比如a、input、button等）Edit as HTML：编辑该元素（你可以重写它的整个content）甚至修改它的标签名称中间简单的掠过…….Break on：为该元素添加dom操作事件监听。包含三个选项（树结构改变、属性改变、节点移除）。这个选项的作用是帮助我们监控和定位操作元素的代码。请参看下图事例：

这里写图片描述

<html><head>    <meta content="text/html;charset=utf-8"/></head><body><div class="div1">    <div class="div2">        Hello,World    </div>    <div id="div3">Bonjour la Monde</div>    <button id="btn">click me</button></div><script type="text/javascript">    document.getElementById('btn').addEventListener('click',function(){        var q = document.getElementById('div3');        q.remove();    });</script></body></html>

这里写图片描述

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

这里写图片描述

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

这里写图片描述

https://developers.google.com/web/tools/chrome-devtools/profile/network-performance/resource-loading#view-network-timing-details-for-a-specific-resource

这里写图片描述

2.单击面板中的任意一条http信息，会在底部弹出一个新的面板，其中记录了该条http请求的详细参数header（表头信息、返回信息、请求基本状态—请参看http1.1协议内容对号入座）、Preview（返回的格式化转移后文本信息）、response（转移之前的原始信息）、Cookies（该请求带的cookies）、Timing（请求时间变化）

这里写图片描述

3.在主面板的顶部，有一些按钮从左到右它们的功能分别是：是否启用继续http监控（默认高亮选中过）、清空主面板中的http信息、是否启用过滤信息选项（启用后可以对http信息进行筛选）、列出多种属性、只列出name和time属性、preserve log（目前不清楚啥用）、Dishable cahe（禁用缓存，所有的304返回会和fromm cahe都回变成正常的请求忽视cache conctrol 设定）；

这里写图片描述

三、Resources

Resources部分较简单，他主要向我们展示了本界面所加载的资源列表。还有cookie和local storage 、SESSION 等本地存储信息，在这里，我们可以自由地修改、增加、删除本地存储。

这里写图片描述

Timeline

这里写图片描述

Filter requests
这里写图片描述

Copy, save, and clear network information
这里写图片描述

http://web.jobbole.com/82558/

http://www.cnblogs.com/chuncn/archive/2010/11/22/1884783.html

https://developers.google.com/web/tools/chrome-devtools/profile/network-performance/resource-loading#view-network-timing-details-for-a-specific-resource

http://developer.51cto.com/art/201111/304651_1.htm

0 0