chrome开发者工具

chrome开发者工具常用的四个功能模块：

• Elements：查看html的Dom结构，修改css的样式。css可以即时修改，即时显示。

• console：这除了查看错误信息、打印调试信息(console.log())、写一些测试脚本以外，还可以当作Javascript API查看用。例如我想查看console都有哪些方法和属性，我可以直接在Console中输入"console"并执行

• Sources：主要用来调试js和查看源代码

• Network：

---

Elements: 

styles列出所有样式代码

Computed主要用于查看盒模型，点击对应区域会在页面中阴影显示。

---

Network：

• 记录按钮：处于打开状态时会在此面板进行网络连接的信息记录

• 清除按钮：清除当前的网络连接记录信息。

• 过滤器:能够自定义筛选条件，查找资源

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

• 是否进行缓存

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

• 设置模拟限速，设置限速可以模拟处于各种网络环境下的不同用户访问本页面的情况

请求资源的信息

• Name/Pat：资源名称以及URL路径 （main.css）

• Method：Http请求方法 (GET或者POST)

• status/Text：Http状态码/文字解释 （200，ok）

• Type ：请求资源的MIME类型，MIME是Multipurpose Internet Mail Extensions (html,css,js等)

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

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

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

请求文件具体内容

•  Headers: 列出资源的请求url、HTTP方法、响应状态码、请求头和响应头及它们各自的值、请求参数等等
• Previews:  资源的预览（图片、js等等）
• Response：响应信息面板包含资源还未进行格式处理的内容
• Timing：资源请求的详细信息花费时间