google工具总结

google工具总结

Elements

主要用来查看前面界面的html的Dom结构，和修改css的样式，css可以即时修改，即时显示。

console

这个除了查看错误信息，打印调试信息，写一些测试脚本以外，还可以当作JavaScript API查看用。

Sources

主要用来调试js和查看源代码。

Network

红色圆圈

记录按钮处于打开状态时会在此面板进行网络连接的信息记录，关闭后则不记录。

清楚按钮

清楚按钮清楚当前的网络连接记录信息。

捕获截屏

捕获截屏记录页面加载过程中一些时间点的页面渲染情况，截图根据可视窗口截取。

过滤器

过滤器 能够自定义筛选条件，找到自己想要资源信息。
指定条件：
domain:资源所在的域，即url中的域名部分。如domain:api.github.com
has-response-header:资源是否存在响应头，无论其值是什么，如has-response-header:Access-Control-Allow-Origin
is:当前时间点在执行的请求，当前可用值:running
larger-than:显示大于指定值大小规格的资源，单位时字节B.K和M也是可以的，如large-than:150K。
method:使用何种HTTP请求方式。如GET
mime-type:也写作content-type,时资源类型的标识符。如text/html
scheme:协议规定。如HTTPS
set-cookie-name:服务器设置的cookies名称
set-cookie-value:服务器设置的cookies的值
set-cookie-domain:服务器设置的cookies的域
status-code:HTTP响应头的状态码

Preserve log

是否保留日志，当选择保留日志，重新加载url当前界面时，之前请求显示的资源信息，会保留下来。

Disable cache

是否进行缓存，当打开开发者工具时生效，打开这个开关，则页面资源不会存入缓存，可以从Status栏的状态码看文件请求状态。

Offline

设置模拟限速。

Network主题内容介绍

Name/Path

资源名称以及URL路径

Method

Http请求方法(GET或者POST)

Status/Text

Http状态码/文字解释(200,ok)

Type

请求资源的MIME类型，MIME时html,css,js等。

Initiator

解释请求是怎么发起的，有四种可能的值

1. Parser:请求是由页面的html解析时发送
2. Redirect:请求是由页面重定向发送
3. script:请求是由script脚本处理发送的
4. other:请求是由其他过程发送的，比如页面里的Link链接点击。

size/content

size是响应头部和响应体结合的大小，content是请求解码后的大小。

请求文件具体说明

分为四个模块

Headers

面板列出资源的请求url,HTTP方法，响应状态码，请求头和响应头及它们各自的值，请求参数等等。

Preview

预览面板，用于资源的预览

Response

响应信息面板包含资源还未进行格式处理的内容

Timing

资源请求的详细信息花费时间

Performance

浏览器运行时的性能表现。
Performance工具使用
style.top与offsetTop的区别