admin管理员组文章数量:1530845
为什么写了这篇博客:
(1)原因一
在【OA系统二十三:请假审批四】这篇博客中,加载【请假审批这个内嵌页面】后,这个内嵌页面中需要显示【待审批请假数据】的列表数据,而这些列表数据,是通过ajax请求从后台获取的;其中使用到了【Network中的XHR】来观测当前界面中的ajax请求:
(2)原因二
Chrome的开发者工具(F12)也非常重要,有必要较为彻底地了解一下;
本篇博客的参考文章有:
(1)https://zhuanlan.zhihu/p/138922503;作者是:【zhaoyanan】。
(2)Chrome浏览器的Network面板介绍;转载作者是:【lucky多多】。
(3)Chrome 控制台console的用法(学了之后对于调试js可是大大有用的哦);转载作者是:【JingDing】。
说明:
(1)因为,目前并没有系统性的了解前端的知识,只是在后端开发中需要知道前端开发的一些基本内容,所以本篇博客仅仅做一般性介绍;以【能尽量满足后端开发所需】 为目的,所以本篇博客的内容相对简单,一些复杂的操作并没有深入介绍。
目录
一:Chrome开发者工具
0.概述:元素(ELements)、控制台(Console)、源代码(Sources),网络(Network)简述
1.元素(Elements)
(1)定位页面元素的代码位置(或称之为查看元素代码):
(2)修改元素的代码与属性:(前台调试开发的时候,比较常用这种操作)
(3)右边的侧栏个功能的介绍:
2.控制台(Console)
(1) 控制台(Console)简介
(2)控制台(Console)参考的一篇文章(还没有看,当前也没必要看~~,以后有需要了再看也不迟啦)
3.源代码(Sources)
4.网络(Network)
(1)面板组成
(2)如果只选择【过滤器】中的XHR 异步请求资源,那么在【请求列表】会把该页面中的XHR 异步请求资源留下来
(3)【请求列表】介绍
(4)以【请求列表】中某条请求为例,介绍请求的具体内容
(5)控制器
5.附:切换到不同的终端进行开发模式
一:Chrome开发者工具
本部分转载自:https://zhuanlan.zhihu/p/138922503;作者是:【zhaoyanan】。
0.概述:元素(ELements)、控制台(Console)、源代码(Sources),网络(Network)简述
首先介绍Chrome开发者工具中,调试时使用最多的三个功能页面是:元素(ELements)、控制台(Console)、源代码(Sources),此外还有网络(Network)等。
● 元素(Elements):用于【查看】或【修改】(修改这个多用户前台调试)HTML元素的属性、CSS属性、监听事件、断点等。
● 控制台(Console):控制台一般用于执行一次性代码,查看JavaScript对象,查看调试日志信息或异常信息。
● 源代码(Sources):该页面用于查看页面的HTML文件源代码、JavaScript源代码、CSS源代码,此外最重要的是可以调试JavaScript源代码,可以给JS代码添加断点等。
● 网络(Network):网络页面主要用于查看header等与网络连接相关的信息。
1.元素(Elements)
元素(Elements):用于【查看】或【修改】(修改这个多用户前台调试)HTML元素的属性、CSS属性、监听事件、断点等。
(1)定位页面元素的代码位置(或称之为查看元素代码):
当定位了页面某元素的对应的代码的位置后,可以在定位的源码处查看页面元素的具体内容(比如class,src);也可以在右边的侧栏中查看全部的属性,如下图位置查看:
(2)修改元素的代码与属性:(前台调试开发的时候,比较常用这种操作)
定位了页面元素的代码后,可直接双击想要修改的部分,然后就进行修改:修改后可以实时的在浏览器页面上观察到修改后的效果
或者选中要修改部分后点击右键进行修改,如下图:
注意:这个修改也仅对当前的页面渲染生效,不会修改服务器的源代码,故而这个功能也是作为调试页面效果而使用。
(3)右边的侧栏个功能的介绍:
如下图所示:(PS:对这些功能的详细用法,暂不清楚,以后有时间深入了解前端的知识的时候,再作深入了解。)
2.控制台(Console)
控制台(Console):控制台一般用于执行一次性代码,查看JavaScript对象,查看调试日志信息或异常信息。
(1) 控制台(Console)简介
● 查看JS对象的及其属性
● 执行JS语句
● 查看控制台日志:当网页的JS代码中使用了console.log()函数时,该函数输出的日志信息会在控制台中显示。日志信息一般在开发调试时启用,而当正式上线后,一般会将该函数去掉。
在OA系统二十三中的示例中,控制台(Console)的内容就是后台返给前台的JSON对象:
其实,对【控制台(Console)】的具体用法不是特别清楚,但是通过:新CSDN文章转成PDF、打印(去空白)(https://blog.csdn/weixin_44618906/article/details/108823621?utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-8.control&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-8.control)这篇文章可以印证:在Console中可以执行JS语句;
……………………………………………………
(2)控制台(Console)参考的一篇文章(还没有看,当前也没必要看~~,以后有需要了再看也不迟啦)
可以参考Chrome的控制台(Console)的用法(超详细,还未细看),来详细了解Console的内容。
3.源代码(Sources)
源代码(Sources):该页面用于查看页面的HTML文件源代码、JavaScript源代码、CSS源代码,此外最重要的是可以调试JavaScript源代码,可以给JS代码添加断点等。
比如我们当前的网页:说白了【源代码(Sources)】最重要的是可以调试JavaScript源代码。对于其中的内容细节不懂,以后有需要的时候,再深入了解也行啦。
4.网络(Network)
本部分转载自:Chrome浏览器的Network面板介绍;转载作者是:【lucky多多】。
网络(Network):网络页面主要用于查看header等与网络连接相关的信息。
在OA系统二十三中的示例中,Network的内容如下:
(1)面板组成
如图所示,Chrome的Network面板主要由5个部分组成,包括控制器、过滤器、概览、请求列表、概要,下面简单介绍下这5个部分的作用。
● 控制器:控制面板的外观与功能。
● 过滤器:过滤请求列表中显示的资源,按住Command(Mac)或Ctrl(Window/Linux),然后点击过滤器可以同时选择多个过滤器。
● 概览:显示HTTP请求、响应的时间轴。
● 请求列表:默认时间排序,可选择显示列。可以看到所有的资源请求,包括网络请求,图片资源,html,css,js文件等请求,可以根据需求筛选请求项,一般多用于网络请求的查看和分析,分析后端接口是否正确传输,获取的数据是否准确,请求头,请求参数的查看。
● 概要:请求总数、总数据量、总花费时间等。
(2)如果只选择【过滤器】中的XHR 异步请求资源,那么在【请求列表】会把该页面中的XHR 异步请求资源留下来
如果选择【过滤器】中的All,那么在【请求列表】会把该页面所有资源文件请求下来:
如果只选择【过滤器】中的XHR 异步请求资源,那么在【请求列表】会把该页面中的XHR 异步请求资源留下来,则我们可以分析相关的请求信息:
XHR类型即通过XMLHttpRequest方法发送的请求,即就是ajax请求;通过查看【XHR 异步请求资源】,我们可以知道【为了加载当前页面中的所有资源,其中的“需要向后台发送请求,获取后台数据的那些东西”】。
(3)【请求列表】介绍
简单介绍下每列的含义:(其实,里面好多东西理解的不深~~~)
…………………………
● Name:资源的名称
…………………………
● Status:HTTP状态代码
…………………………
● Type:请求的资源的MIME类型(可以参考HTTP协议:请求的资源的MIME类型)
…………………………
● Initiator:发起请求的对象或进程。它可能有以下几种值:
Parser(解析器):Chrome的 HTML 解析器发起了请求(鼠标悬停显示JS脚本)
Redirect(重定向):HTTP重定向启动了请求
Script(脚本):脚本启动了请求
Other(其他):一些其他进程或动作发起请求,例如用户点击链接跳转到页面,或在地址栏中输入网址。
…………………………
● Size:服务器返回的响应大小(包括头部和包体),可显示解压后大小
…………………………
● Time:总持续时间,从请求的开始到接受响应中的最后一个字节
…………………………
● Waterfall:各请求相关活动的直观分析图;(能分割重要的请求耗时,查看具体请求耗时在哪个地方,鼠标指到相关区域可以看到具体耗时)
Waterfall示例,比如:
我们具体分析下里面每个各代表什么意思,分别耗时多少,通过这个来分析服务器到底是哪个环节出了问题
- Queueing 是排队的意思
- Stalled 是阻塞 请求访问该URL的主机是有并发和连接数限制的,必须要等之前的执行才能执行之后的,这段时间的耗时
- DNS Lookup 是指域名解析所耗时间
- Initial connection 初始化连接时间,这里一般是TCP 3次连接握手时间
- SSL https特有,是一种协议
- Request sent 发送请求所消耗的时间
- Waiting 等待响应时间,这里一般是最耗时的
- Content Download 下载内容所需要消耗的时间
…………………………
(4)以【请求列表】中某条请求为例,介绍请求的具体内容
对边点击【请求列表】中的一个请求,都可以看到该条请求的具体内容
对于某个请求来说,其中有四个主要的模块:
● Header:面板列出资源的请求url、HTTP方法、响应状态码、请求头和响应头及它们各自的值、请求参数等等。
● Preview:预览面板,用于资源的预览。
● Response:响应信息面板包含资源还未进行格式处理的内容。
● Timing:资源请求的详细信息花费时间。
通过上面,其中的可以实现的功能,包括:(部分内容不清楚~~)
● 查看头部,包括请求头、响应头;
● 查看Cookie;
● 预览响应正文:查看图像用;
● 查看响应正文
● 时间详细分布
● 导出数据为HAR格式(关于HAR的内容可以参考:Chrome开发人员工具Network请求之HAR文件)
● 查看未压缩的资源大小:Use Large Request Rows
● 浏览器加载时间(概览、概要、请求列表)DOMContentLoaded 事件的颜色设置为蓝色,而load事件设置为红色
● 将请求数据复制到剪贴板
- Copy Link Address:将请求的网址复制到剪贴板
- Copy Response:将响应包体复制到剪贴板
- Cop as cURL:以 cURL 命令形式复制请求
- Copy All as cURL:以一系列 cURL 命令形式复制所有请求
- Copy All as HAR:以 HAR 数据形式复制所有请求
● 查看请求上下游:按住 shift 键悬停请求上,绿色是上游,红色是下游。
(经过实测是可以的,感觉这个功能很给力,能帮助梳理请求的来龙去脉,帮助调试。)
(5)控制器
其中【模拟慢速网络】可以如下操作:(maybe现在的理解并不准确,或者是错误的,后续如果有新的理解,随时更改)
(1)设置【慢速请求】
……………………………………………………
(2)【慢速请求】的演示;(说实话,这儿不咋懂~~,也没仔细逐个研究)
其中的Timing中的内容阐述:
Queueing:浏览器在以下情况下对请求排队
● 存在更高优先级的请求
● 此源已打开六个 TCP 连接,达到限值,仅适用于 HTTP/1.0 和 HTTP/1.1
● 浏览器正在短暂分配磁盘缓存中的空间
Stalled:请求可能会因 Queueing 中描述的任何原因而停止
DNS Lookup:浏览器正在解析请求额IP地址
Proxy Negotiation:浏览器正在与代理服务器协商请求
Request sent:正在发送请求
ServiceWorker Preparation:浏览器正在启动Service Worker
Request to ServiceWorker:正在将请求发送到Service Worker
Waiting(TTFB):浏览器正在等待响应的第一个字节。TTFB表示Time To First Byte(至第一字节的时间)。此时间包括1次往返延迟时间及服务器准备响应所用的时间
Content Download:浏览器正在接收响应
Receiving Push:浏览器正在通过 HTTP/2 服务器推送接收此响应的数据
Reading Push:浏览器正在读取之前收到的本地数据
5.附:切换到不同的终端进行开发模式
Network还有一个好的地方就是这里的设备图标,点击它可以切换到不同的终端进行开发模式,移动端和pc端的一个切换,可以选择不同的移动终端设备,同时可以选择不同的尺寸比例,chrome浏览器的模拟移动设备和真实的设备相差不大,是非常好的选择
版权声明:本文标题:Chrome浏览器开发者工具介绍;(包括,Network面板介绍,XHR等等) 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/dongtai/1725797927a1043211.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论