Chrome开发工具

Chrome开发工具

共有9个标签页(elements,console,source,network,performance,memory,application,security,audits)

主要讲下elements和network，简单说下application，其中network是核心部分。

1、elements标签的作用

elements标签允许从浏览器的角度看页面，也就是说可以看到chrome渲染页面所需的html,css和dom对象，此外，还可以编辑内容更改页面显示效果。

1.1、利用elements标签快速查找网页元素

点击这个按钮用于快速查找页面元素，单击该按钮后，在网页上某一处单击，就会自动显示并选中该元素在HTML里的位置。

 1.2、elements标签结构

elements标签分为两个区域，并且相辅相成。

区域a显示整个页面的HTML信息，单击选中某一行内容的时候，区域b跟着显示相关的信息

 区域b中几个常用信息:

1、styles标签:

styles标签显示当前点击选中内容的css样式，并可对元素的css进行查看与编辑修改

2、computed标签:

computed标签显示当前选中的边距属性、边框属性，用图像显示一个整体的效果

3、 event listeners标签:

event listeners标签是整个网页事件触发的JavaScript

 2、network标签的作用

在network标签页可以看到页面向服务器请求的信息、请求的大小以及请求所花费的时间，从发起网页页面请求request后分析http请求得到的各个请求信息(包括状态，类型，大小，所用的时间，request和response等)，network结构组成如下:

 network对于开发几个比较重要的部位

(1)overview:显示获取到请求的时间轴信息，主要是对每个请求信息在服务器的响应时间进行记录。这个主要是为网站开发优化方面提供数据参考。

(2)filters: 控制request table具体显示那些内容

几个常见的:

a.ALL:返回当前页面全部加载的信息，就是一个网页全部所需要的代码，图片等请求。

b.XHR:筛选Ajax的请求链接信息，前面讲过Ajax核心对象XMLHTTPRequest,XHR取于XMLHTTPRequest的缩写

c.JS:主要筛选JavaScript文件

d.CSS:主要是CSS样式内容

e.Img:是网页加载的图片,关于URL的图片都可以在这里找到

f.Media:是网页加载的媒体文件，如MP3,RMVB等音频视频文件资料

g.Doc: 是HTML文件，主要用于响应当前的网页内容

(3)requests table:按前后顺序显示所有捕捉的请求信息，单击请求信息可以查看该详细信息

对于每条请求信息，可以单击查看该请求的详细信息，

每条详细信息可以划分为4点:

a. Headers:该请求的HTTP头部信息

b.Preview:根据所选的请求类型(json,图片,文本)，显示相应的预览

c.Response:显示HTTP的Response信息

d.Timing: 显示请求在整个生命周期中各部分花费的时间

  3.application标签

最主要的作用可以查看cookies ,local Storage的值