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 指定客户端可接受的语