前端-3-chrome浏览器调试和http请求响应信息

参考前端chrome浏览器调试总结
参考http请求加响应

1 开发者模式

1.1 箭头按钮

(1)箭头按钮
用于在页面选择一个元素来审查和查看它的相关信息，当我们在Elements这个按钮页面下点击某个Dom元素时，箭头按钮会变成选择状态。

(2)设备图标
点击它可以切换到不同的终端进行开发模式，移动端和pc端的一个切换，可以选择不同的移动终端设备，同时可以选择不同的尺寸比例，chrome浏览器的模拟移动设备和真实的设备相差不大，是非常好的选择。

(3)Element内容
用来查看，修改页面上的元素，包括DOM标签，以及css样式的查看，修改，还有相关盒模型的图形信息。
当鼠标选择元素时，右侧的css样式对应的会展示出此id的样式信息，此时可以在右侧进行一个修改，修改即可在页面上生效。

当浏览网站看到某些特别炫酷的效果和难做的样式时候，打开这个功能，即可看到别人是如何实现的。

1.2 console控制台

用于打印和输出相关的命令信息，其实console控制台除了熟知的报错，打印console.log信息外，还有很多相关的功能。

一些对页面数据的指令操作，比如打断点正好执行到获取的数据上，由于数据都是层层嵌套的对象，这个时候查看里面的key/value不是很方便。

此时就可以用这个指令查看，obj的json string 格式的key/value，对于数据里面有哪些字段和属性即可一目了然。

展开如下：

1.3 Sources

js资源页面，这个页面内我们可以找到当然浏览器页面中的js源文件，方便查看和调试，所有的代码都是压缩之后的。可以点击下面的{}大括号按钮将代码转成可读格式。

(1)Sinppets
比如当想不起某个方法的具体使用时候，会打开控制台随意写一些测试代码，或者想测试一下刚刚写的方法是否会出现期待的样子，但是控制台一打回车，本想换行但是却执行刚写的半截代码。

所以推荐使用Sources下面的左侧的Sinppets代码片段按钮，这时候点击创建一个新的片段文件，写完测试代码后把鼠标放在新建文件上run，再结合控制台查看相关信息。

新建了一个片段代码，在你的项目环境页面内，该片段可执行项目内的方法。

var a = ["A","B","C","D"]
console.log(a);

(2)Content scripts
Chrome 的一种扩展程序，它是按照扩展的ID来组织的，这些文件也是嵌入在页面中的资源，这类文件可以读写和操作我们的资源，需要调试这些扩展文件，则可以在这个目录下打开相关文件调试，但是几乎我们的项目还没有相关的扩展文件，所以啥也看不到，平时也不需要关心这块。

1.4 Network

网络请求标签页，可以看到所有的资源请求，包括网络请求，图片资源，html,css，js文件等请求，可以根据需求筛选请求项，一般多用于网络请求的查看和分析，分析后端接口是否正确传输，获取的数据是否准确，请求头，请求参数的查看。

选择了All，就会把该页面所有资源文件请求下来。
选择XHR 异步请求资源，则可以分析相关的请求信息。

打开一个Ajax异步请求，可以看到它的请求头信息，是一个POST请求，参数有哪些，还可以预览它的返回的结果数据，这些数据的使用和查看有利于我们很好的和后端工程师们联调数据，也方便我们前端更直观的分析数据。

2 http请求和响应

2.1 http请求

HTTP请求是指：客户端通过发送HTTP请求向服务器请求对资源的访问。 它向服务器传递了一个数据块，也就是请求信息。
HTTP 请求由三部分组成：请求行、请求头和请求正文。

 请求行：请求方法 URI 协议/版本
 请求头(Request Header)
 【请求空行 标志着请求头结束，请求正文（请求体）的开始】
 请求正文

2.1.1 请求的数据示例

(1)一个HTTP请求的数据实例

(1)POST /index.html HTTP/1.1   请求方法 url 协议/版本号
(2-1)Host: localhost  主机地址
(2-6)User-Agent: Mozilla/5.0 (Windows NT 5.1; rv:10.0.2) Gecko/20100101 Firefox/10.0.2
(2-3)Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8