为什么写了这篇博客：

（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）因为，目前并没有系统性的了解前端的知识，只是在后端开发中需要知道前端开发的一些基本内容，所以本篇博客仅仅做一般性介绍；以【能尽量满足后端开发所需】 为目的，所以本篇博客的内容相对简单，一些复杂的操作并没有深入介绍。

目录

一：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.附：切换到不同的终端进行开发模式

本部分转载自：https://zhuanlan.zhihu.com/p/138922503；作者是：【zhaoyanan】。

首先介绍Chrome开发者工具中，调试时使用最多的三个功能页面是：元素（ELements）、控制台（Console）、源代码（Sources），此外还有网络（Network）等。

     ● 元素（Elements）：用于【查看】或【修改】（修改这个多用户前台调试）HTML元素的属性、CSS属性、监听事件、断点等。

     ● 控制台（Console）：控制台一般用于执行一次性代码，查看JavaScript对象，查看调试日志信息或异常信息。

     ● 源代码（Sources）：该页面用于查看页面的HTML文件源代码、JavaScript源代码、CSS源代码，此外最重要的是可以调试JavaScript源代码，可以给JS代码添加断点等。

     ● 网络（Network）：网络页面主要用于查看header等与网络连接相关的信息。

元素（Elements）：用于【查看】或【修改】（修改这个多用户前台调试）HTML元素的属性、CSS属性、监听事件、断点等。

当定位了页面某元素的对应的代码的位置后，可以在定位的源码处查看页面元素的具体内容（比如class，src）；也可以在右边的侧栏中查看全部的属性，如下图位置查看：

定位了页面元素的代码后，可直接双击想要修改的部分，然后就进行修改：修改后可以实时的在浏览器页面上观察到修改后的效果

或者选中要修改部分后点击右键进行修改，如下图：

注意：这个修改也仅对当前的页面渲染生效，不会修改服务器的源代码，故而这个功能也是作为调试页面效果而使用。

如下图所示：（PS：对这些功能的详细用法，暂不清楚，以后有时间深入了解前端的知识的时候，再作深入了解。）

控制台（Console）：控制台一般用于执行一次性代码，查看JavaScript对象，查看调试日志信息或异常信息。

          ● 查看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语句；

……………………………………………………

可以参考Chrome的控制台（Console）的用法（超详细，还未细看），来详细了解Console的内容。

源代码（Sources）：该页面用于查看页面的HTML文件源代码、JavaScript源代码、CSS源代码，此外最重要的是可以调试JavaScript源代码，可以给JS代码添加断点等。

比如我们当前的网页：说白了【源代码（Sources）】最重要的是可以调试JavaScript源代码。对于其中的内容细节不懂，以后有需要的时候，再深入了解也行啦。

本部分转载自：Chrome浏览器的Network面板介绍；转载作者是：【lucky多多】。

网络（Network）：网络页面主要用于查看header等与网络连接相关的信息。

在OA系统二十三中的示例中，Network的内容如下：

如图所示，Chrome的Network面板主要由5个部分组成，包括控制器、过滤器、概览、请求列表、概要，下面简单介绍下这5个部分的作用。

          ● 控制器：控制面板的外观与功能。

          ● 过滤器：过滤请求列表中显示的资源,按住Command（Mac）或Ctrl（Window/Linux），然后点击过滤器可以同时选择多个过滤器。

          ● 概览：显示HTTP请求、响应的时间轴。

          ● 请求列表：默认时间排序，可选择显示列。可以看到所有的资源请求，包括网络请求，图片资源，html,css，js文件等请求，可以根据需求筛选请求项，一般多用于网络请求的查看和分析，分析后端接口是否正确传输，获取的数据是否准确，请求头，请求参数的查看。

          ● 概要：请求总数、总数据量、总花费时间等。

如果选择【过滤器】中的All，那么在【请求列表】会把该页面所有资源文件请求下来：

如果只选择【过滤器】中的XHR 异步请求资源，那么在【请求列表】会把该页面中的XHR 异步请求资源留下来，则我们可以分析相关的请求信息：

XHR类型即通过XMLHttpRequest方法发送的请求，即就是ajax请求；通过查看【XHR 异步请求资源】，我们可以知道【为了加载当前页面中的所有资源，其中的“需要向后台发送请求，获取后台数据的那些东西”】。

简单介绍下每列的含义：（其实，里面好多东西理解的不深~~~）

…………………………

          ● Name：资源的名称

…………………………

          ● Status：HTTP状态代码

…………………………

          ● Type：请求的资源的MIME类型（可以参考HTTP协议：请求的资源的MIME类型）

…………………………

          ● Initiator：发起请求的对象或进程。它可能有以下几种值：

                  Parser（解析器）：Chrome的 HTML 解析器发起了请求（鼠标悬停显示JS脚本）

                  Redirect（重定向）：HTTP重定向启动了请求

                  Script（脚本）：脚本启动了请求

                  Other(其他)：一些其他进程或动作发起请求，例如用户点击链接跳转到页面，或在地址栏中输入网址。

…………………………

          ● Size：服务器返回的响应大小（包括头部和包体），可显示解压后大小

…………………………

          ● Time：总持续时间，从请求的开始到接受响应中的最后一个字节

…………………………

          ● Waterfall：各请求相关活动的直观分析图；（能分割重要的请求耗时,查看具体请求耗时在哪个地方,鼠标指到相关区域可以看到具体耗时）

                          Waterfall示例，比如：

我们具体分析下里面每个各代表什么意思,分别耗时多少,通过这个来分析服务器到底是哪个环节出了问题

…………………………

对边点击【请求列表】中的一个请求，都可以看到该条请求的具体内容

对于某个请求来说，其中有四个主要的模块：

● Header：面板列出资源的请求url、HTTP方法、响应状态码、请求头和响应头及它们各自的值、请求参数等等。

● Preview：预览面板，用于资源的预览。

● Response：响应信息面板包含资源还未进行格式处理的内容。

● Timing：资源请求的详细信息花费时间。

通过上面，其中的可以实现的功能，包括：（部分内容不清楚~~）

● 查看头部，包括请求头、响应头；

● 查看Cookie；

● 预览响应正文：查看图像用；

● 查看响应正文

● 时间详细分布

● 导出数据为HAR格式（关于HAR的内容可以参考：Chrome开发人员工具Network请求之HAR文件）

● 查看未压缩的资源大小：Use Large Request Rows

● 浏览器加载时间（概览、概要、请求列表）DOMContentLoaded 事件的颜色设置为蓝色，而load事件设置为红色

● 将请求数据复制到剪贴板

● 查看请求上下游：按住 shift 键悬停请求上，绿色是上游，红色是下游。

（经过实测是可以的，感觉这个功能很给力，能帮助梳理请求的来龙去脉，帮助调试。）

其中【模拟慢速网络】可以如下操作：（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：浏览器正在读取之前收到的本地数据

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