WEB浏览器F12调试页面

WEB浏览器F12调试页面

1. Elements—标签页，可以查看并且编辑页面元素，在左侧可以点选某一个元素，该元素会在页面上高亮，同时在右侧显示该元素的所有样式；
2. Console—Console面板，就是Javascript控制台，Console最有用的，就是打断点的时候进行查看；
   3.Sources—Sources标签页，可以查看到请求的资源情况；可以查看当前网站的HTML，及其引入的所有CSS、Javascript文件。重要的是，在Javascript文件中的任何一行，我们都可以设置断点，脚本将会在这一行停下来。触发断点时，我们可以查看断点所在的作用域内的所有变量的值；
   右侧窗格显示了局部变量、监视变量以及调用栈。右侧窗格的上方有继续、下一步、进入函数、跳出函数、禁用断点等按钮；
3. Network—查看网页的http通信情况，可以查看当前页面的所有网络请求；
4. Performance—performance检测页面性能；
5. Memory—内存分析的作用，内存分析工具可以帮助你了解应用的内存使用情况，从而帮助你避免内存泄漏或内存的过度消耗；
6. Application—application主要用来查看有哪些cookies和local Storage(H5本地存储Web storage特性的API), 测试的时候，有时需要清理和查看；
7. Security—通过该面板你可以去调试当前网页的安全和认证等问题并确保您已经在你的网站上正确地实现HTTPS；
8. Audits—对当前网页进行网络利用情况、网页性能方面的诊断，并给出一些优化建议。比如列出所有没有用到的CSS文件等；
   Network 面板
   在Network页面下方出现了一个个的条目，其中一个条目就代表一次发送请求和接收响应的过程。
   ①Name：请求名称；
   ②Status：响应状态码。200为响应成功，这个可以判断请求是否的到了正常响应；
   ③Type：请求文档类型。document即为一个HTML文档，即HTML代码；
   ④Initiator：请求源。用来标记请求是由哪个对象或进程发起的；
   ⑤Size：从服务器下载的文件和请求资源的大小。如果是从缓存中得到的资源，则为from cache；
   ⑥Time：发起请求到获得响应的总时间；
   ⑦Waterfall：网络请求的可视化瀑布流；
   
   19 requests：19个请求数，当前网页总共向服务器发送19个请求；
   79.1 KB transferred：79.1KB就是通过网络总共传送79.1KB数据；
   3.6 MB resources：3.6MB当前页面所调用的资源总数为3.6MB；
   Finish:2.68s—这是当前网页从开始监控到结束所经历的时间2.68s(这说明这个网页是不断动态更新的，所以时间会这么长)；
   DOMContentLoaded:1.41s—这是当前页面的DOM结构对象加载完毕的时间为1.41s；
   Load:1.40s—这是页面整体加载完毕的时间为1.73s；注意，这个时间不包括网页加载后通过js脚本继续与服务器发生通讯联系（比如ajax）的时间；

Network面板具体http请求解析

1. Headers 头部 / Headers接口
   1.1 General 请求地址和方法，不属于headers，只用于收集请求url和响应的status等信息
   1.11 Request URL: http://47.110.250.226:10002/business/task/get/getList.do 请求的URL
   1.12 Request Method ：POST 请求使用的方法
   1.13 Status Code : 200 响应状态码
   1.14 Remote Address: 47.110.250.226:10002 远程服务器的地址和端口
   1.15 Referrer Policy: no-referrer-when-downgrade Referrer判别策略
   1.2 Response Headers (7) 响应的头部
   1.21 Access-Control-Allow-Origin: *
   1.22 Connection: keep-alive
   1.23 Content-Length: 8636
   1.24 Content-Type: application/json;charset=UTF-8
   1.25 Date: Wed, 21 Oct 2020 06:19:34 GMT 标识产生响应的时间
   1.26 Keep-Alive: timeout=20
   1.27 Vary: Origin 服务器缓存的管理信息
   1.3 Request Headers (10) 请求的头部
   1.31 Accept: application/json, text/plain, / 请求报头域，用于指定客户端可接受哪些信息类型，客户端可以处理的内容类型；
   1.32 Accept-Encoding: gzip, deflate 指定客户端可接受的语言类型；
   1.33 Accept-Language: zh-CN,zh;q=0.9 指定客户端可接受的内容编码；
   1.34 Connection: keep-alive
   1.35 Content-Length: 165
   1.36 Content-Type: application/x-www-form-urlencoded;charset=UTF-8 请求类型
   1.37 Host: 47.110.250.226:10002 请求资源所在服务器；
   指定请求资源的主机IP和端口号，其为请求URL的原始服务器或网关的位置；
   1.38 Origin: http://47.110.250.226:9888 表明请求来自于哪个站点；
   1.39 Referer: http://47.110.250.226:9888/dist47/index.html 用来标识这个请求是从哪个网页过来的。服务器拿到这一信息做相应处理，如来源统计，防盗链等；
   对请求中URL的原始获取方；
   1.40 User-Agent: Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.108 Mobile Safari/537.36 一个特殊的字符串头，可以使服务器识别客户使用的操作系统及版本等信息。在做爬虫时一定要加上此信息1.40 Cookie：网站为了辨别用户进行会话跟踪而储存在用户本地的数据。主要功能是维持当前访问会话；（非常重要！！！）
   Content-Type：互联网媒体类型，在HHTP协议消息中，用来表示具体请求中的媒体信息类型；
   1.4 Form Data(8)
   FormData 接口提供了一种表示表单数据的键值对 key/value 的构造方式，基于POST方法传递数据，其请求内容格式为Content-Type: multipart/form-data，用来指定请求内容的数据编码格式，就是http请求中的multipart/form-data，它会将表单的数据处理为一条消息，以标签为单元，用分隔符分开，既可以上传键值对，也可以上传文件。当上传的字段是文件时，会有Content-Type来表名文件类型；content-disposition，用来说明字段的一些信息；由于有boundary隔离，所以multipart/form-data既可以上传文件，也可以上传键值对，它采用了键值对的方式，所以可以上传多个文件。
   1.41 page : 0
   1.42 size : 0
   1.43 businessGroupId: 100
   1.44 sTime: 0
   1.45 eTime: 0
   1.46 state: -13
   1.47sign:eyJ0b2tlbiI6ImU4MTg2NWVmYzZhODRkMGY4MGIxYTYyYzg5MzZhNGYzIiwidWlkIjo2NCwic291cmNlIjowfQ==
   1.48 uid:64
2. Preview Preview (预览功能) 和Response的结果似乎一模一样，控制台会把发送过来的json数据自动转换成javascript的对象格式，以层层展开，方便前端工程师遍历调用；
3. Response Response 接口呈现了对一次HTTP请求的响应数据；
4. Timing Timing标签中可以显示资源在整个请求生命周期过程中各部分时间花费信息；

Parameters：2363fa030ab392b21696c81a9de4e75bfcdfdc4b0c31b7962d932368b919f3f808a1deebcda5bdb4d8114469b2a393ddd229452452dba8c20ca5a9af057dbf87fea52a10677200f059c4aea519a96f438d01aaaffaa28fb69001b2c5b3db94a3be2db4d1b1fdc3506c59a66de913ba61a731a9f87be12503ce6214299a9e8ed53efba7d00c90904faf5904370f30ac2a4504493ec2b44d13532e22bffe1d2f090bae12d655f82fdd6791d63c24ff98

Parameters：{// 定义创建资源栈时，用户可以定制化的参数。}
Mappings：{// 定义映射信息表，映射信息是一种多层的Map结构。}
Resources：{// 所需资源的详细定义，包括资源间的依赖关系、配置细节等。}

Parameters：定义创建资源栈时，模板用户可以定制化的参数。通常，模板的编辑者会把ECS的规格设计成一个参数。参数支持默认值。使用参数可以增强模板的灵活性，提高复用性。使用模板创建资源栈时，可以根据实际的评估结果来选择合适的规格。

parameters参数问题
参数使用过密文传递，把参数组成json 加密后放进parameters= 请求上来

F12调试页面
Elements标签页：Elements标签页的左侧就是对页面HTML结构的查看与编辑，你可以直接在某个元素上双击修改元素的属性；
Elements标签页的右侧Styles页面
Network标签页：Network标签页对于分析网站请求的网络情况、查看某一请求的请求头和响应头还有响应内容很有用。注意是在你打开Chrome开发者工具后发起的请求，才会在这里显示；

Sources标签页：Sources标签页可以查看到请求的资源情况，包括CSS、JS、图片等的内容。也可以设置各种断点。对存储的内容进行编辑然后保存也会实时的反应到页面上。

Audits标签页：这个对于优化前端页面、加速网页加载速度很有用;点击run按钮，就可以开始分析页面，分析完了就可以看到分析结果了；

Elements：主要是用来调试网页中的html标签代码和css样式代码；
Console：可以查看错误信息、打印调试信息、调试js代码，还可以当作JavaScript API查看；
Source:查看js文件、调试JS代码；
Network：查看网页的http通信情况，包括Method、Type、Timeline（网络请求的时间响应情况）等；
Timeline:查看js的执行时间，页面元素渲染时间等；
Profiles：用来查看网页的性能，比如CPU和内存消耗；
Resources：用来查看加载的各种资源文件，比如js、css、图片等；
Audits：可以分析当前网页，可以快速的分析出哪些资源被使用、哪些资源没有使用，然后提出建议；

Console标签页：Console面板就是Javascript控制台了；可以查看错误信息、打印调试信息、调试js代码，还可以当作JavaScript API查看；①我们可以用console来调试js代码；②Console 的api功能， 控制台的核心对象是Console，如果我想查看console都有哪些方法和属性，我可以直接在Console中输入“console”并执行；或者用"console.dir(console)",同样可以实现查看console对象的方法和属性。

Security面板简介
通过该面板你可以去调试当前网页的安全和认证等问题并确保您已经在你的网站上正确地实现HTTPS。
HTTPS（Hyper Text Transfer Protocol over Secure Socket Layer），是以安全为目标的HTTP通道，简单讲是HTTP的安全版。即HTTP下加入SSL层，HTTPS的安全基础是SSL，因此加密的详细内容就需要SSL。 它是一个URI scheme（抽象标识符体系），句法类同http:体系。用于安全的HTTP数据传输。https:URL表明它使用了HTTP，但HTTPS存在不同于HTTP的默认端口及一个加密/身份验证层（在HTTP与TCP之间）。
HTTPS和HTTP的区别主要为以下四点：
① https协议需要到CA申请证书，一般免费证书很少，需要交费。
② http是超文本传输协议，信息是明文传输，https则是具有安全性的ssl加密传输协议。
③ http和https使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。
④ http的连接很简单，是无状态的；HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，比http协议安全。
如果网页是安全的，则会显示这样一条消息：This page is secure (valid HTTPS).。
通过点击View certificate可以查看main origin的服务器证书信息。
点击左侧可以查看指定源的连接和证书详情。
如果网页是不安全的，则会显示：This page is not secure.。
该面板可以区分两种类型的不安全的页面：
如果被请求的页面通过HTTP提供服务，那么这个主源就会被标记为不安全。
如果被请求的页面是通过HTTPS获取的，但这个页面接着通过HTTP继续从其他来源检索内容，那么这个页面仍然被标记为不安全。这就是所谓的混合内容页面,混合内容页面只是部分受到保护,因为HTTP内容(非加密的内容)可以被嗅探者入侵,容易受到中间人攻击。
点击左侧则提供一个跳转到Network面板视图的链接信息。

F12调试面板
Timing面板：可以显示资源在整个请求生命周期过程中各部分时间花费信息，可能会涉及到如下过程的时间花费情况；
①Queuing ：排队的时间花费。可能由于该请求被渲染引擎认为是优先级比较低的资源（图片）、服务器不可用；超过浏览器的并发请求的最大连接数（Chrome的最大并发连接数为6）；
②Stalled ：从HTTP连接建立到请求能够被发出送出去(真正传输数据)之间的时间花费；
包含用于处理代理的时间，如果有已经建立好的连接，这个时间还包括等待已建立连接被复用的时间；
③Proxy Negotiation ：与代理服务器连接的时间花费；
④DNS Lookup ：执行DNS查询的时间。网页上每一个新的域名都要经过一个DNS查询。第二次访问浏览器有缓存的话，则这个时间为0；
⑤Initial Connection / Connecting ：建立连接的时间花费，包含了TCP握手及重试时间；
⑥SSL ：完成SSL握手的时间花费；
⑦Request sent ：发起请求的时间；
⑧Waiting (Time to first byte(TTFB)) ：是最初的网络请求被发起到从服务器接收到第一个字节这段时间，它包含了TCP连接时间；发送HTTP请求时间和获得响应消息第一个字节的时间。TTFB这个部分的时间花费如果超过200ms，则应该考虑对网络进行性能优化了；
⑨Content Download： 获取Response响应数据的时间花费；

Network 面板
在Network页面下方出现了一个个的条目，其中一个条目就代表一次发送请求和接收响应的过程。
①Name：请求名称；
②Status：响应状态码。200为响应成功，这个可以判断请求是否的到了正常响应；
③Type：请求文档类型。document即为一个HTML文档，即HTML代码；
④Initiator：请求源。用来标记请求是由哪个对象或进程发起的；
⑤Size：从服务器下载的文件和请求资源的大小。如果是从缓存中得到的资源，则为from cache
⑥Time：发起请求到获得响应的总时间；
⑦Waterfall：网络请求的可视化瀑布流；

19 requests：19个请求数，当前网页总共向服务器发送19个请求；
79.1 KB transferred：79.1KB就是通过网络总共传送79.1KB数据；
3.6 MB resources：3.6MB当前页面所调用的资源总数为3.6MB；
Finish:2.68s—这是当前网页从开始监控到结束所经历的时间2.68s(这说明这个网页是不断动态更新的，所以时间会这么长)；
DOMContentLoaded:1.41s—这是当前页面的DOM结构对象加载完毕的时间为1.41s；
Load:1.40s—这是页面整体加载完毕的时间为1.73s；注意，这个时间不包括网页加载后通过js脚本继续与服务器发生通讯联系（比如ajax）的时间；

Web前段的渲染耗时，如何能准备的测试各种数据（从点击页面开始到加载结束的总耗时、调用接口从发送到收到响应的耗时，web前端收到响应后的渲染时间等等）；
Network就可以看到接口响应时间，以及页面加载总时间；

HTTP具体应用

1. Cookie, HTTP协议是无状态的，主要是让HTTP协议尽可能简单，使它能够处理大量事务。HTTP/1.1引入Cookie来保存状态信息； Cookie是服务器发送到用户浏览器并保存在本地的一小块数据，它会在浏览器之后项同一服务器再次发起请求时自动被携带上，用于告知服务端两个请求是否来自同一浏览器。
2. 缓存，降低客户端获取资源的延迟；缓存通常位于内存中，读取缓存的速度更快。并且缓存在地理位置上也有可能比源服务器来得近，例如浏览器缓存只能缓存GET请求，不能缓存其他类型请求。

3. HTTP状态码
   

4. 跨域资源共享(CORS)
   跨域资源共享(CORS)是一种机制，它使用额外的HTTP头来告诉浏览器运行在一个origin(domain)上的Web应用被准许访问来自不同源服务器上的指定的资源。当一个资源从与该资源本身所在的服务器不同的域、协议或端口请求一个资源时，资源会发起一个跨域HTTP请求；简单请求（不会被触发CORS预检请求）； 非简单请求（触发CORS预检请求）；
   理解CORS跨域原理
   背景：现在的前端开发中都是前后端分离开发模式，数据的获取并非同源，所以跨域的问题在日常开发中特别常见；
   跨域的基本概念：浏览器为了一定的安全因素，增加了同源策略，有违同源策略的操作都是被禁止的，这个时候就会发生我们所说的跨域，如果没有同源策略会怎样？请求发送出去，数据没有回来；
   广义跨域：浏览器加载的资源很多都是跨域的，只是有些资源的加载浏览器是允许的；图片、CSS、Script等资源是不受同源策略限制；
   狭义跨域：常说的跨域主要是ajax请求无法完成；
   古老的JSONP：JSONP的优点足够老，能兼容各种浏览器，无兼容问题；它发送的不是ajax请求；

CORS的两种请求
浏览器将CORS请求分成两类：简单请求(simple request)和非简单请求(预检请求)（no-so-simple request）。只要同时满足以下两大条件，就属于简单请求。
(1)请求方法是以下三种方法之一：HEAD GET POST
(2)HTTP请求头信息不超出以下几种字段：
Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain；
凡是不同时满足上面两个条件，就属于非简单请求。
浏览器对这两种请求的处理，是不一样的。

Ajax请求
Ajax是一种异步请求数据的web开发技术，对于改善用户的体验和页面性能很有帮助。简单地说，在不需要重新刷新页面情况下，Ajax通过异步请求加载后台数据，并在网页上呈现出来。常见运用场景有表单验证是否登入成功，百度搜索下拉框提示和快递单号查询等等。Ajax的目的是提高用户体验，较少网络数据的传输量。同时，由于Ajax请求获取的是数据而不是HTML文档，因此节省网络带宽，让互联网用户网络体验更加顺畅。
Ajax原理
解释Ajax原理之前，我们不妨先举个“领导想找小李汇报工作”例子，领导想找小李问点事，就委托秘书去叫小李，自己就接着做其他事情，直达秘书告诉他小李已经到了，最后小李跟领导汇报工作。

Ajax请求数据流程与“领导想找小李汇报工作”类似。其中最核心依赖是浏览器提供的XMLHttpRequest对象，它扮演的角色相当于秘书，使得浏览器可以发出HTTP请求与接收HTTP响应，浏览器接着做其他事情，等收到XHR返回来的数据再渲染页面。