为什么写了这篇博客：
（1）原因一
在【OA系统二十三：请假审批四】这篇博客中，加载【请假审批这个内嵌页面】后，这个内嵌页面中需要显示【待审批请假数据】的列表数据，而这些列表数据，是通过ajax请求从后台获取的；其中使用到了【Network中的XHR】来观测当前界面中的ajax请求：
（2）原因二
Chrome的开发者工具（F12）也非常重要，有必要较为彻底地了解一下；
本篇博客的参考文章有：
（1）https://zhuanlan.zhihu.com/p/138922503；作者是：【zhaoyanan】。
（2）Chrome浏览器的Network面板介绍；转载作者是：【lucky多多】。
（3）Chrome 控制台console的用法（学了之后对于调试js可是大大有用的哦）；转载作者是：【JingDing】。
说明：
（1）因为，目前并没有系统性的了解前端的知识，只是在后端开发中需要知道前端开发的一些基本内容，所以本篇博客仅仅做一般性介绍；以【能尽量满足后端开发所需】 为目的，所以本篇博客的内容相对简单，一些复杂的操作并没有深入介绍。
目录
0.概述：元素（ELements）、控制台（Console）、源代码（Sources），网络（Network）简述
（2）修改元素的代码与属性：（前台调试开发的时候，比较常用这种操作）
（2）控制台（Console）参考的一篇文章（还没有看，当前也没必要看~~，以后有需要了再看也不迟啦）
（2）如果只选择【过滤器】中的XHR 异步请求资源，那么在【请求列表】会把该页面中的XHR 异步请求资源留下来
一：Chrome开发者工具
本部分转载自：https://zhuanlan.zhihu.com/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.net/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浏览器的模拟移动设备和真实的设备相差不大，是非常好的选择
1013
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
