API

API的英文即 Application Programming Interface 首字母的缩写，直译是：程序之间的接口。

Chrome DevTools

本文为转载，稍作修改不影响基本内容。

文章链接：https://blog.csdn.net/duleilewuhen/article/details/135542760

一、概述

在网页 鼠标右击-检查 或者 F12 打开DevTools，Chrome DevTools 主要包含以下10个部分：

在这里插入图片描述

序号	面板	说明
1	`Device Mode` -设备模式	打造移动设备优先的完全自适应式网站。注意：该模式不可替代真实设备测试
2	`Elements` -元素面板	元素面板，查看Web页面的HTML与CSS，最重要的是可以双击元素，对当前页面进行修改
3	`Console` -控制台面板	控制台面板。在这里可以查看到 JS 的错误信息，也可以执行键入的JS脚本
4	`Sources` -源代码面板	要用于查看web应用的资源列表和查看及调试js代码
5	`Network` -网络面板	页面中各种资源请求的情况。这里能看到资源的名称、状态、使用的协议、资源类型、资源大小、资源时间线等情况
6	`Performance` -性能面板	页面各项性能指标的火焰图。这里能看到白屏时间、FPS、资源加载时间线、内存变化曲线等等信息
7	`Memory` -内存面板	可以记录某个时刻的页面内存情况，一般用于分析内存泄露
8	`Application` -应用面板	记录Web页面加载的所有资源信息，包括存储数据、缓存数据、图片、字体、JS脚本、CSS样式表等
9	`Security` -安全面板	安全面板，查看Web页面的安全和认证情况，确保网站上正确地实现了HTTPS
10	Customize and control DevTools	主菜单

二、设备模式（Device Mode）

2.1 面板概述

使用 Chrome DevTools 的 Device Mode 打造移动设备优先的完全自适应式网站，切换 Device Mode 按钮可以打开或关闭 Device Mode。

在这里插入图片描述

通过该视图控件，你可以设定下面两种模式：

自适应。 使视口可以通过任意一侧的大手柄随意调整大小
特定设备。 将视口锁定为特定设备确切的视口大小，并模拟特定设备特性

2.2 设备切换

默认是pc端的显示方式，点击后以移动端格式显示，再次点击便退回到pc端显示格式。

在这里插入图片描述

三、元素面板（Elements）

3.1 面板概述

Chrome DevTools 的 Elements 可帮助您深入了解和调试网页的HTML、CSS和 JavaScript。其可用于查看或修改HTML元素的属性、编辑DOM、编辑CSS属性、监听事件、断点等。也可以直接点击元素进行CSS、html修改。

在这里插入图片描述

3.2 编辑样式

使用 Styles 窗格可以修改与元素关联的 CSS 样式，如下图所示：

在这里插入图片描述

3.2.1 添加、启用和停用 CSS 类

点击 .cls 按钮可以查看与当前选定元素关联的所有 CSS 类。从这里，可以执行以下操作：启用或停用当前与元素关联的类、向元素添加新类，如下图所示：

在这里插入图片描述

3.2.2 添加或移除动态样式

我们可以在元素上手动设置动态伪类选择器，例如 :active、:focus、:hover 和 :visited。可以通过两种方式在元素上设置动态状态：

在 Elements 面板内右键点击某个元素，然后从菜单中选择目标伪类，将其启用或停用。
在 Elements 面板中选择元素，然后在 Styles 窗格中点击 :hov 按钮，使用复选框启用或停用当前选定元素的选择器。

3.2.3 快速向样式规则添加背景色或颜色

Styles窗格提供了一个用于向样式规则快速添加 text-shadow、box-shadow、color和 background-color 声明的快捷方式。样式规则的右下角有一个由三个点组成的图标。您需要将鼠标悬停到样式规则上才能看到这个图标：

在这里插入图片描述

将鼠标悬停到此图标上可以调出添加 text-shadow、box-shadow、color 和 background-color 声明的快捷方式。

3.2.4 使用 Color Picker 修改颜色

要打开 Color Picker，请在 Styles 窗格中查找一个定义颜色的 CSS 声明（例如 color: blue）。声明值的左侧有一个带颜色的小正方形。正方形的颜色与声明值匹配。点击小正方形可以打开 Color Picker：

在这里插入图片描述

您可以通过多种方式与 Color Picker 交互：

在这里插入图片描述

取色器。 通过鼠标悬停到某种颜色上去获取颜色值。
当前颜色。 当前值的可视表示。
当前值。 当前颜色的十六进制、RGBA 或 HSL 表示。
调色板。 当前生成的几组颜色。
着色和阴影选择器。
色调选择器。
不透明度选择器。
颜色值选择器。 点击可以在 RGBA、HSL 和十六进制之间切换。
调色板选择器。 点击可以选择不同的模板。

3.3 编辑 DOM

Elements 面板中的 DOM 树视图可以显示当前网页的 DOM 结构，通过 DOM 更新实时修改页面的内容和结构。

3.3.1 查看元素事件侦听器

在 Event Listeners 窗格中查看与 DOM 节点关联的JavaScript事件侦听器，如下图所示：

在这里插入图片描述

启用 Ancestors 复选框时查看祖先实体事件侦听器，即除了当前选定节点的事件侦听器外，还会显示其祖先实体的事件侦听器
启用 Framework listeners 复选框时查看框架侦听器，DevTools 会自动解析事件代码的框架或内容库封装部分，然后告诉您实际将事件绑定到代码中的位置。

四、控制台面板（Console）

在开发期间，可以使用控制台面板记录诊断信息，或者使用它作为 shell 在页面上与 JavaScript 交互，可以查看错误信息、打印调试信息、调试js代码，还可以当作JavaScript API查看。

4.1 消息堆叠

如果一条消息连续重复，而不是在新行上输出每一个消息实例，控制台将“堆叠”消息并在左侧外边距显示一个数字。此数字表示该消息已重复的次数，如下图所示：

在这里插入图片描述

如果倾向于为每一个日志使用一个独特的行条目，请在 DevTools 设置中启用 Show timestamps，如下图所示：

在这里插入图片描述

由于每一条消息的时间戳均不同，因此，每一条消息都将显示在各自的行上，如下图所示：

在这里插入图片描述

4.2 选择执行环境

以下屏幕截图中以蓝色突出显示的下拉菜单称为 Execution Context Selector

在这里插入图片描述

通常，会看到此环境设置为 top（页面的顶部框架）。其他框架和扩展程序在其自身的环境中运行。要使用这些其他环境，就需要从下拉菜单中选中它们。例如，如果要查看 <iframe> 元素的日志输出，并修改该环境中存在的某个变量，就需要从 Execution Context Selector 下拉菜单中选中该元素。

五、源代码面板（Sources）

在源代码面板中设置断点来调试 JavaScript ，或者通过Workspaces（工作区）连接本地文件来使用开发者工具的实时编辑器。调试JavaScript，保存在DevTools中所做的更改，保存并运行JavaScript片段，并将您在DevTools中所做的更改保存到磁盘。也用来查看加载的各种资源文件，比如js、css、图片等。

5.1 面板概述

打开Source面板，我们就会看到如下界面：

在这里插入图片描述

根据上图三个区域对应分别是：资源区、工作区、控制台，其中，资源区分为如下部分：

名称	描述
Page	展示当前Web页面所包含的资源文件，在这里对工作区中的代码进行修改并不会保留，刷新页面就会重置
Filesystem	当我们的Web页面在本地时，我们就可以通过Filesystem选项卡，将本地项目文件夹添加到DevTools的工作区，以直接将对页面的修改保存到本地，还提供对本地文件进行管理（添加文件、删除文件、修改文件等）。
Overrides
Contentscript	用于存放的是Chrome扩展的“注入”页面的JS脚本的独立空间
Snippets	可以在这里创建代码片段，并独立运行和调试，刷新页面不会丢失

而在工作区中，我们点击行号可以添加/移除断点，在断点上打开右键菜单可以禁用断点，以及设置断点触发条件进行编辑（比如可以设置断点在程序循环多少次后触发）

在这里插入图片描述

而控制区这里提供有调试操作按钮，以及一些调试信息的显示，顶部的几个按钮便是调试代码的核心按钮：

在这里插入图片描述

上图调试按钮红框内，从左到右，各个图标表示的功能分别为：

在这里插入图片描述

下面我们介绍一下调试按钮下面的各项功能

名称	描述
Watch	跟踪监控变量，点击"+“号添加变量名。
Call Stack	函数调用栈，显示执行路径。
Scope	查看属性作用域。
Beakpoints	查看属性作用域。
XHR/fetch Breakpoints	当XHR的请求URL包含某一特定的字符串时所触发的断点。
DOM Breakpoints	当改变一个节点或其子元素时所触发的断点。
Global Listeners	全局监听器，绑定在 window 对象上的事件。
Event Listener Breakpoints	事件发生时所触发的断点。

5.2 格式化混淆代码

在某些情况下，我们需要对混淆的代码做一定的调试，但这是我们看到的代码是乱成一团，毫无格式可言：

在这里插入图片描述

那我们可以点击下方的格式化按钮对代码进行格式化：

在这里插入图片描述

5.2 断点调试

在这里插入图片描述

5.2.1 代码行断点

点击 Sources 选项卡，打开包含您想要调试的代码行的文件并找到该代码行，点击左边的行号，这样一个蓝色图标就显示在行号上，表明该代码行设置好断点了。

在这里插入图片描述

5.2.2 条件代码行断点

当我们知道需要调试的代码的确切位置且在满足条件下才调试的时候，使用条件代码行断点。想要设置条件的代码行断点，这就需要点击 Sources 选项卡，打开包含想要调试的代码行的文件并找到该代码行，右键点击左边的行号，选择添加条件断点。然后代码行下面会显示一个对话框，在对话框中输入你的条件，按Enter激活断点，行号上出现橙色图标。

在这里插入图片描述

5.2.3 事件监听器断点

当想要暂停事件侦听器代码时，使用事件侦听器断点。想要设置事件监听器断点，这就需要点击 Sources 选项卡，展开 “Event Listener Breakpoints” 窗格（DevTools显示事件类别），选中这些类别中的一个可以暂停该类别的任何事件，或者展开类别并检查特定事件。

在这里插入图片描述

5.2.4 异常断点

当您想暂停引发捕获或未捕获异常的代码行时，使用异常断点。想要设置异常断点，就需要点击 Sources 选项卡，点击暂停，启用后变成蓝色。如果除了未捕获的异常外，还想暂停捕获的异常，请选中 “Pause on caught exceptions” 复选框。

在这里插入图片描述

六、Network 面板

6.1 面板概述

每个文件的加载、请求的发送都是一次网络交互，在Network面板中能够看到所需资源文件是否被加载、请求的接口到底返回了没有、能够知道哪个资源没载完从而导致整个web的呈现等等。Netwrok面板中会记录应用程序的每一次网络交互信息，每次交互的详细时间、HTTP请求头和响应头、cookies、WebSocket的数据等等……按区域划分大概分为如下几个区域：

在这里插入图片描述

Controls - 控制 Network 功能选项，以及一些展示外观
Filters - 控制在 Requests Table 中显示哪些类型的资源
Overview - 此图表显示了资源检索时间的时间线。如果看到多条竖线堆叠在一起，则说明这些资源被同时检索
Requests Table - 此表格列出了检索的每一个资源。默认情况下，此表格按时间顺序排序，最早的资源在顶部。点击资源的名称可以显示更多信息。提示：右键点击 Timeline 以外的任何一个表格标题可以添加或移除信息列
Summary - 可以一目了然地看到页面的请求总数、传输的数据总量、加载时间

preserve log - 保留上一个页面接口调用信息，默认情况下跳转、重定向会清空前一个页面的网络请求
Disable cache - 浏览器会绕过本地缓存，强制每次请求都从服务器重新加载最新的网页文件、样式表（CSS）和脚本（JS）等资源

6.2 Requests Table 区域

标题栏的对应描述：

Name (名称) : 资源的名称。
Status (状态) : HTTP 状态代码。
Type (类型) : 请求的资源的 MIME 类型。
Initiator (发起) : 发起请求的对象或进程。它可能有以下几种值：
- Parser (解析器) : Chrome 的 HTML 解析器发起了请求。
- Redirect (重定向) : HTTP 重定向启动了请求。
- Script (脚本) : 脚本启动了请求。
- Other (其他) : 一些其他进程或动作发起请求，例如用户点击链接跳转到页面，或在地址栏中输入网址。
Size (大小) : 响应头的大小（通常是几百字节）加上响应数据，由服务器提供。
Time (时间) : 总持续时间，从请求的开始到接收响应中的最后一个字节
Timeline/Waterfall (时间轴) : 显示所有网络请求的可视化统计信息

6.3 查看 HTTP 相关信息

6.3.1 查看网络请求的参数

可以通过点击 query string parameters (查询字符串参数)旁边的 view URL encoded (查看 URL 编码)或 view decoded (查看解码)链接，查看 URL 编码或解码格式的 query string parameters (查询字符串参数)。在使用 postman 复制相关入参时尤其实用。

在这里插入图片描述

七、Performance 模块

7.1 面板概述

在 Performance 面板可以查看页面加载过程中的详细信息，比如在什么时间开始做什么事情，耗时多久等等。相较于 Network 面板，不仅可以看到通过网络加载资源的信息，还能看到解析 JS、计算样式、重绘等页面加载的方方面面的信息，如下图所示：

在这里插入图片描述

录制一段时间
重启页面，录制整个页面加载的过程。比较常用
清除这一次性能录制的记录
上传页面性能录制的数据
下载页面性能录制的数据
多次录制时可选择要展示的性能记录
是否捕捉页面加载过程的截图
是否记录内存变化
垃圾回收，点击了即进行一次垃圾回收

八、Memory 面板

记录页面跟随时间的内存使用情况，如果需要比时间轴面板提供的更多信息，可以使用“配置”面板，例如跟踪内存泄漏。

在这里插入图片描述

九、Application 面板

查看一些本地存储、会话存储、已索引数据库、Cookie、缓存、帧等。

在这里插入图片描述

十、Security 面板

调试当前网页的安全和认证等问题。

在这里插入图片描述

如果网页是安全的，则会显示这样一条消息：This page is secure (valid HTTPS).。通过点击View certificate可以查看main origin的服务器证书信息。如果网页是不安全的，则会显示：This page is not secure.。

Postman

postman中文文档

界面导航说明

请求：

params：get请求传参。

Authrization：鉴权

Headers：请求头

　　accept:客户端接收的数据类型。

　　content-type:客户端发送给服务器的数据类型

　　user-agent:客户端的类型

　　xmlhttprequest:异步请求

Body：Post请求传参

　　none：没有参数

　　form-data：文件上传（包含键值对和文件上传）

　　x-www-from-urlencodeed：表单请求（键值对）

　　raw：使用原始数据格式请求（JSON，XML，HTML，Text，Javascript）

　　binary：二进制文件上传。

Pre-request-script：请求之前的脚本。

Tests；请求之后的脚本。

Setting：设置

Cookies：用于自动管理Cookie的功能

响应：

Body：返回的信息

　　Pretty（各种格式查看返回数据）

　　Raw（文本格式）

　　Preview（网页）

Cookie：响应Cookie

token鉴权码：

　　csrf_token：一般情况下有效期是7-15天。

　　access_token：一般情况下有效期是10分钟-2小时

Headers：响应头

TestResults：测试结果

200 响应码

GET 请求

GET 请求基本操作

（1）点击主界面「+」号，新建一个请求页

（2）选择 GET 请求命令

（3）输入 API 地址

在 GoRest API 设计中 GET 请求无需鉴权，所有我们直接点击「Send」即可远程调取服务器信息。

如果我们只想看调取其中一位用户的信息应该怎么办呢？我们可以在 API URL 中带上参数。

带参数的 GET 请求

如果我们想查询 ID 为 2043 的用户信息，我们只需要在请求页面中的 Params(参数) 标签页的 KEY - VALUE 内填写对应的参数即可，之后 Postman 会自动在 API URL 中生成你填写的参数，使 URL 带上参数 GET 请求。

https://gorest.co.in/public/v1/users?id=2043

设置完成后，点击「Send」

我们可以看到，返回值中仅包含我们请求的 user id 为 2043 的用户信息。

GET 请求中的多条件查询

有时，我们需要使用 API 进行多条件查询操作，比如想找 name 值为 kalacloud.com ，同时 gender 值为 male 的用户。（特别提示：此格式是通用写法，但最终要看 API 的开发者如何约定调用方式）

BaseURL + ResourceName + ? + key1 = value1 + & + key 2 = value 2 ……

主 URL 之后使用 ? 连接参数，参数与参数之间使用 & 连接符连接。

https://gorest.co.in/public-api/users/?name=kalacloud.com&gender=male

当然，我们可以直接在 Postman 的 Params 中直接填写 KEY - VALUE

让 Postman 帮我们生成，然后点击「Send」

可以看到 API GET 调取了我们设定的两个 VALUE 值的 data 信息。

特别提示，你可以点击右上角的「Bulk Edit」进行参数的批量编辑

POST 请求

POST 方式一：模仿浏览器

在发送一个get请求之后，postman会自动保存cookis，我们只需复制 Payload 的数据格式到 body ，复制 x-csrf-token 到 Headers ，发送这个 POST 请求

自动方式可以参考

POST 方式二：鉴权 在 Authorization 中添加鉴权方式和密钥，postman会自动添加到Headers，按照api写入所需body，发送这个 POST 请求

用 Postman 发送第一个 PUT 更新请求

PUT 请求一般用于更新服务器已有资源，如果服务器中没有对应的资源，那么 PUT 会创建相应的资源（特别提醒：虽然 PUT 有创建新资源的功能，但是否能创建成功，最终取决于你调用的 API 是否支持此功能）

打开你的 Postman 我们来创建一个 PUT 请求。

点击「+」号，新建一个请求页
请求类型选择「PUT」
根据第6节我们使用 POST 请求创建的资源 ID 为 1475 ，又根据 GoRest API 的文档得知，修改资源的 API 地址为
```
https://gorest.co.in/public/v1/users/{{ID}}
```
，所以我们要使用 PUT 修改 ID 为 1475 资源的请求地址应该写：

https://gorest.co.in/public/v1/users/1475

选择在 Body 标签中填写 JSON 格式的资源修改信息。我们将 1475 中的邮箱由
```
[email protected]
```
修改为 [email protected]，所以我们在 Body 中填写以下代码。

{
  "name": "kalacloud",
  "gender": "Male",
  "email": "[email protected]",
  "status": "Active"
}

选择 Auth 标签，进行 API 鉴权，鉴权方法详见本文第6节《使用 Postman 对 API 鉴权》
点击「Send」发送 PUT 请求

如上图所示，可以看到红4位置响应代码返回 200 ，这说明 PUT 请求已经执行成功。
返回的 Body 信息中，email 字段已经更新为 [email protected]