Chrome深入



一、 按钮
1. 箭头按钮：用于在页面选择一个元素来审查和查看它的相关信息。
2. 设备图标：切换到不同终端进行开发
    3.Elements功能标签页，用来查看，修改页面上的元素，包括DOM标签，一次性在浏览器中修改之后，再到代码中进行修改。研究别人特别炫酷的样式。
4. Console控制台：打印和输出相关的命令信息，obj的json string格式的key/value,对于数据里面有哪些字段和属性一目了然。在你的项目环境内，该项目可执行项目内的方法。
5.Network网络请求标签页：看到所有的资源请求，包括网络请求，图片资源,html,css,js等请求，分析后端接口是否正确传输。请求头，请求参数。XHR:异步请求资源。
6.Security标签页 可以告诉你这个网站的安全性，查看有效证书等
7.Headers页签
General
(1) Request URL:Client请求地址
（2）Request Method：请求类型 get、post、put、delete等
（3）Status Code：响应状态码 200、404、503等
（4）Remote Address：域名对应的真实ip:port
  Request header
• Accept：客户端/发送端能够接收的数据类型 text/html,application/xhtml+xml,application/xml； Accept-Encoding：浏览器可以支持的- web服务器返回内容压缩编码类型 gzip, deflate
• Accept-Language：浏览器可接收的语言 zh-CN,zh;q=0.8
• Cache-Control：请求和响应遵循的缓存机制，当前请求的Cache-Control不会影响另一个请求的缓存处理。private(默认)、no-cache、must-revalidate、max-age。这个参数有几种不同的使用场景：
o 打开一个新的窗口。private、no-cache、must-revalidate会重新请求服务器; max-age在超过时间年龄值时才会重新请求。
o 地址栏回车。private、must-revalidate只有第一次时会请求服务器; no-cache每次都会请求；max-age在超过时间年龄值时才会重新请求。
o 后退按钮。只有no-cache每次都重新请求服务器。
o 刷新。全部重新请求服务器
• Connection: 是否保持与服务器的tcp长连接。keep-alive(默认)、close。Keep-alive代表服务会保留当前连接一段时间被其他请求重复使用；close代表请求之后关闭连接。
• Content-Length: 请求体的长度
• Content-Type: 请求内容的格式/类型 application/x-www-form-urlencoded application/json
• Cookie: 客户端缓存的Cookie，在请求发送时会发送到服务端
• Host: 请求的服务器域名
• Referer: 当前请求的来源
• User-Agent: 发出请求的客户端信息 Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/49.0.2623.112 Safari/537.36
Form data(post)
这个版块是在Request Method为post请求类型时显示的post表单数据。

Query String Parameter(get)
这个版块是在Request Method为get请求类型时向服务端传递的请求参数。
3. Response header
4. Cache-Control：请求和响应遵循的缓存机制
5. Connection：是否保持与服务器的tcp长连接。keep-alive(默认)、close。Keep-alive代表服务会保留当前连接一段时间被其他请求重复使用；close代表请求之后关闭连接。
6. Content-Type：响应内容的格式/类型text/html;charset=UTF-8标识返回的内容是文本类型，html格式。
7. Content-Encoding：web服务器支持的返回内容压缩编码类型 gzip
8. Content-Language：响应体的语言
9. Content-Length：响应体的长度
10. Date: 消息发出时间(GMT) Sat, 23 Apr 2016 07:47:54 GMT GMT+8=北京时间
11. Expires: 响应过期时间
Transfer-Encoding：文件传输编码chunked标识传输内容长度不确定，如果以gzip方式输出时，就不必申请一个很大的字节数组了，可以一块一块的输出，更科学，占用资源更少。
12. Vary: 提示使用缓存响应还是从原始服务器请求，即当缓存中存在一个未过期的响应是否能被后续的请求服用，Accept-Encoding、User-Agent。如果vary的值中返回了User-Agent，那么通过不同的浏览器打开相同的页面都会重新请求服务器；如果Vary中没返回User-Agent，那么客户端缓存把它看成是相同的页面，相同的请求，直接给用户返回缓存的内容；如果返回的值是Accept-Encoding，将请求头信息中的Accept-encoding字段的值（gzip等）作为缓存的key;如果vary的值为*表示缓存不会去做判断；
13. Preview页签
14. Preview页签展示请求响应后的预览。
15. Response页签
16. Response页签显示响应的具体内容。
17. Cookie页签
18. Cookie页签以key-value形式展示客户端所有的Cookie信息。
19. Timing页签
20. Timing页签展示的是从请求开始到响应结束整个过程每个阶段经历的时间或者说耗时。
21. 到这里就基本介绍完了Chrome network面板的所有属性（其他浏览器大同小异），掌握了这些知识点在开发调试HTTP应用的过程中会非常的得心应手。
22. 好记性不如烂笔头，下面是我记录的一些常见HTTP服务错误代码：
23. 400 网页不存在或请求参数语法有误
24. 401 账户无访问权限
25. 403 网站没有绑定默认首页或者绑定默认首页错误
26. 404 访问的资源不存在，服务宕机
27. 500 服务器内部错误
28. 502 网关错误，服务宕机
29. 503 由于临时过载或维护，服务器无法处理请求
30. HTTP应用问题处理的步骤一般是检查URL是否写错、网络是否正常、DNS是否解析正确、应用自身代码问题。
31. 接下来介绍两款比较不错HTTP服务测试工具，firefox的RESTClient和Chrome的Postman。
32. 先来看下firefox的RESTClient。RESTClient是由中国人开发的基于浏览器的测试工具，是firefox的一个插件，操作简单，用户可以方便的根据需求创建和测试HTTP请求。
33. 

二、 概念
1. DOM元素：html元素，比如a,br,input等一系列标签元素
2. Audits标签页 可以帮你分析页面性能，优化前端页面，分析后得到的报告。
3. F10：单步执行；F11：单步跳入此执行块。
    4. HttpServletRequest对象代表客户端的请求,通过客户端这个方法，可以获取客户端请求的所有消息