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
解释请求是怎么发起的,有四种可能的值
- Parser:请求是由页面的html解析时发送
- Redirect:请求是由页面重定向发送
- script:请求是由script脚本处理发送的
- other:请求是由其他过程发送的,比如页面里的Link链接点击。
size/content
size是响应头部和响应体结合的大小,content是请求解码后的大小。
请求文件具体说明
分为四个模块
Headers
面板列出资源的请求url,HTTP方法,响应状态码,请求头和响应头及它们各自的值,请求参数等等。
Preview
预览面板,用于资源的预览
Response
响应信息面板包含资源还未进行格式处理的内容
Timing
资源请求的详细信息花费时间
Performance
浏览器运行时的性能表现。
Performance工具使用
style.top与offsetTop的区别