谷歌开发者工具 - 网络篇
Chrome DevTools - Network网络篇
- 一、官网
- 二、主要用途
- 三、网络篇
- 1.网络工具栏
- (1)网络活动
- (2)保留日志
- (3)网络状况
- (4)网络设置
- 2.搜索和过滤
- (1)搜索
- (2)过滤
- 1.输入框过滤
- 2.类型过滤
- 3.按时间过滤
- 4.屏蔽网络请求
- 3.分析请求
- (1)标头
- 2.载荷
- 3.预览和响应
- 4.启动器(好用)
- 5.时间
- 4.右键资源实用功能
- (1)标头选项自定义开启
- (2)替换内容(好用)
一、官网
https://developer.chrome.com/docs/devtools/open?hl=zh-cn
二、主要用途
- 记录网络活动
- 检查网络请求
- 对网络请求进行过滤和排序
- 搜索网络标头和响应
- 更改加载行为
- 屏蔽网络请求
- 更改网络条件
- 调试
prefetch
推测规则 - 替换HTTP响应标头
- 使用通配符替换多个网址的标头
- 保存和到处网络请求数据
三、网络篇
1.网络工具栏
本章分享,网络活动,保留日志,网络状况,网络设置四部分。筛选板块单独分享,保存和到处网络请求数据HAR文件暂未想到场景这里不做介绍了(有使用过的同志欢迎传授知识)
(1)网络活动
当您打开开发者工具时,只要开发者工具已打开,网络请求就会自动记录在 Network 面板中
功能一:红色按钮,代表记录网络活动的状态开关,关闭后新的网络状态不被记录
功能二:清除 Requests 表格中的所用请求 clear
(2)保留日志
开启保留日志后,当次的网络记录被保存刷新后仍存在
使用场景:方便进行多个接口的两次记录对比
(3)网络状况
停用缓存:停用浏览器缓存以模拟初次访问者
网络节流:模拟慢速网络连接
(4)网络设置
1.大请求行:ui层面的视觉变化,方便开发者更清晰地查看请求信息
2.按帧分组:将网络请求按照其所属的 iframe 或 框架(frame) 进行分组显示,使用场景:多个iframe嵌入,这里没有实际的场景就从官网拿下图供大家理解
3.概览:概览其实也属于筛选的一种 - 按时间筛选,后面会在搜索筛选中再提到
4.屏幕截图:截取屏幕截图,以分析用户在等待网页加载时看到的内容,根据截图切片与概览时间轴的联动可以清晰的看到这个节点的接口状态和时间
2.搜索和过滤
(1)搜索
场景:在请求标头、载荷(key支持搜索value不可以)和响应内部查找时
(2)过滤
1.输入框过滤
场景一:通过字符串和正则表达式指定资源单一搜索 - 输入框直接输入
场景二:过滤掉单一资源 - 输入框输入然后反转
场景三:过滤掉多个资源 - 通过‘-’标记符指定搜索(为了案例明显这里双重取反)
2.类型过滤
3.按时间过滤
与上面网络设置-概览的联动
4.屏蔽网络请求
右键请求,选择屏蔽请求网址
场景:联调阶段有的接口非必要/影响后续操作可以屏蔽掉
3.分析请求
针对单个请求的细致分析
(1)标头
这里响应头的内容是可以被更改的,流程是创建个文件夹来存发修改的请求,后续的请求走文件夹中修改后的 , 这里我觉得更常用的还是修改接口的响应内容 - 后续会提到
修改方式:两种
2.载荷
即请求的内容,get/post的请求内容,这里可以通过搜索key来定位到
3.预览和响应
总结来讲都是看后台反馈数据的
响应:原始数据视图,适合调试和分析
预览:解析后的友好视图,适合快速查看你内容(json/html…)
4.启动器(好用)
记录请求的调用栈,对问题定位和各种调用层级深的网络请求特别友好
5.时间
- 加入队列。浏览器会在连接开始之前以及在以下情况下将请求加入队列:
- 还有优先级更高的请求。请求优先级由资源类型以及其在文档中的位置等因素决定。如需了解详情,请参阅fetchpriority
指南的资源优先级部分。
- 此来源已有 6 个 TCP 连接处于打开状态,这是上限。(仅适用于 HTTP/1.0 和 HTTP/1.1。)
- 浏览器正在磁盘缓存中暂时分配空间。- 已暂停。连接开始后,请求可能会因队列中所述的任何原因而暂停。
- DNS 查询。浏览器正在解析请求的 IP 地址。
- 初始连接。浏览器正在建立连接,包括 TCP 握手或重试以及协商 SSL。
- 代理协商。浏览器正在与代理服务器协商请求。
- 已发送请求。请求正在发送中。
- ServiceWorker 准备工作。浏览器正在启动服务工件。
- 向 ServiceWorker 发出请求。请求正在发送到服务工件。
- 等待中 (TTFB)。浏览器正在等待响应的第一个字节。TTFB 是“Time To First Byte”(收到第一个字节的时间)的缩写。此时间包括 1 次往返延迟
- 时间和服务器准备响应所需的时间。
- 内容下载。浏览器会直接从网络或 Service Worker 接收响应。此值是读取响应正文所花费的总时间。大于预期值可能表示网络速度缓慢,或者浏览器正忙于执行其他工作,导致延迟读取响应。
4.右键资源实用功能
(1)标头选项自定义开启
(2)替换内容(好用)
场景:后台定义好协议后,可以通过自己定义内容来直接进行联调,不需要伪代码且流程顺畅
相关文章:
谷歌开发者工具 - 网络篇
Chrome DevTools - Network网络篇 一、官网二、主要用途三、网络篇1.网络工具栏(1)网络活动(2)保留日志(3)网络状况(4)网络设置 2.搜索和过滤(1)搜索…...
量子退火与机器学习(1):少量数据求解未知QUBO矩阵,以少见多
文章目录 前言ー、复习QUBO:中药配伍的复杂性1.QUBO 的介入:寻找最佳药材组合 二、难题:QUBO矩阵未知的问题1.为什么这么难? 三、稀疏建模(Sparse Modeling)1. 欠定系统中的稀疏解2. L1和L2的选择: 三、压缩感知算法(C…...
JDK高频面试题(包重点)
一、什么是JDK JDK(Java Development Kit)即 Java 开发工具包,是 Java 编程的基础与核心,由 Sun Microsystems(现归属于 Oracle 公司 )开发,主要作用如下: 1、提供编译环境 它包含了…...
本地部署 LLaMA-Factory
本地部署 LLaMA-Factory 1. 本地部署 LLaMA-Factory2. 下载模型3. 微调模型3-1. 下载数据集3-2. 配置参数3-3. 启动微调3-4. 模型评估3-5. 模型对话3-6. 导出模型3-7. 使用 vllm 推理 1. 本地部署 LLaMA-Factory 下载代码, git clone https://github.com/hiyouga/…...
内置ALC的前置放大器D2538A/D3308
一、概述 D2538A/D3308是芯谷科技推出的带有ALC(自动电平控制)的前置音频放大器芯片,最初产品为单声道/立体声收录机及盒式录音机而开发,作为录音/回放的磁头放大器使用;由于产品的高增益、低噪声及ALC外部可调的特性&…...
20241227解决使用向日葵远程工具连接ubuntu20.04.5出现黑屏的问题
20241227解决使用向日葵远程工具连接ubuntu20.04.5出现黑屏的问题 2024/12/27 14:40 参考资料: 百度:先日葵 https://sunlogin.oray.com/ 贝锐向日葵 百度:向日葵 连接 ubuntu22.04.5 黑屏 https://blog.csdn.net/catssi/article/details/139…...
Thinkphp 使用workerman消息实现消息推送完整示例
1.版本说明:ThinkPHP6.0 、PHP8.0 2.实现原理 应用场景,监听用户登陆,修改用户登陆状态,通过心跳时间计算用户是否下线,其他应用场景自行修改逻辑即可。 第一步:安装workerman composer require topthin…...
Word论文交叉引用一键上标
Word论文交叉引用一键上标 1.进入Microsoft word使用CtrlH快捷键或单击替换按钮 2.在查找内容中输入[^#] 3.鼠标点击,标签为“替换为:”的文本框,注意光标一定要打在图红色方框圈中的文本框中! 4.点击格式选择字体 5.勾选上标…...
使用vue3搭建前端模拟增删改查
主要工具 vue3 element-plus axios mockjs 使用mockjs模拟数据 import Mock from "mockjs"; // 内存模拟数据 const arr []; for (let i 0; i < 10; i) {arr.push({id: Mock.mock("id"),name: Mock.mock("cname"),place: Mock.mock("c…...
Stream API 的设计融合了多个经典设计模式
Stream API 的设计融合了多个经典设计模式: 1. 策略模式(Strategy Pattern) 策略模式定义了一个算法的家族,将每个算法封装起来,并使它们可以互换。Stream API 中的每个操作(如 filter(), map()ÿ…...
京东零售数据可视化平台产品实践与思考
导读 本次分享题目为京东零售数据可视化平台产品实践与思考。 主要包括以下四个部分: 1. 平台产品能力介绍 2. 业务赋能案例分享 3. 平台建设挑战与展望 作者:梁臣 京东 数据产品架构师 01平台产品能力介绍 1. 产品矩阵 数据可视化产品是一种利用…...
mysql高频面试题
1. mysql里的索引类型 2. 聚簇索引和非聚簇索引的区别 聚簇索引适合场景: 主键、唯一性要求高的字段。需要对数据进行范围查询时。对数据的读取频繁,并且数据行的插入和删除较少时。非聚簇索引适合场景: 较多的查询条件,或者需要基于某些非主键字段进行查询时。需要创建多个…...
MySQL中Performance Schema库的详解(下)
昨天说了关于SQL语句相关的,今天来说说性能相关的,如果没有看过上篇请点传送门https://blog.csdn.net/2301_80479959/article/details/144693574?fromshareblogdetail&sharetypeblogdetail&sharerId144693574&sharereferPC&sharesource…...
算法day_7 算法练习
这是我在2024年12月25日的算法练习,加油!(▽) 题目一 💪 1337. 矩阵中战斗力最弱的 K 行 已解答 | 简单 题目描述 📝 给你一个大小为 m * n 的矩阵 mat,矩阵由若干军人和平民组成,分别用 1 和 0 表示。…...
一文详解MacOS+CLion——构建libtorch机器学习开发环境
对于希望在本地环境中进行深度学习开发的开发者来说,配置合适的工具链是至关重要的一步。本文旨在帮助您在 macOS 操作系统上,利用 CLion IDE 和 PyTorch 的 C依赖库——libtorch,快速搭建起一个高效的开发环境。这里我们将一步步地讲解如何下…...
CSS系列(39)-- Shapes详解
前端技术探索系列:CSS Shapes详解 ✨ 致读者:探索形状布局的艺术 👋 前端开发者们, 今天我们将深入探讨 CSS Shapes,这个强大的形状布局特性。 基础形状 🚀 圆形与椭圆 /* 基础圆形 */ .circle {widt…...
kafka的备份策略:从备份到恢复
文章目录 一、全量备份二、增量备份三、全量恢复四、增量恢复 前言:Kafka的备份的单元是partition,也就是每个partition都都会有leader partiton和follow partiton。其中leader partition是用来进行和producer进行写交互,follow从leader副本进…...
Android着色器SweepGradient渐变圆环,Kotlin
Android着色器SweepGradient渐变圆环,Kotlin import android.content.Context import android.graphics.Canvas import android.graphics.Color import android.graphics.Paint import android.graphics.Path import android.graphics.SweepGradient import android…...
SQL 实战:聚合函数高级用法 – 多层分组与动态统计
在数据分析中,聚合函数如 COUNT()、SUM()、AVG()、MAX()、MIN() 等是最常用的工具之一。它们允许我们对大量数据进行汇总和统计。然而,随着业务需求的复杂化,我们常常需要进行更复杂的统计操作,例如多层次的分组统计、动态分组等。…...
从零创建一个 Django 项目
1. 准备环境 在开始之前,确保你的开发环境满足以下要求: 安装了 Python (推荐 3.8 或更高版本)。安装 pip 包管理工具。如果要使用 MySQL 或 PostgreSQL,确保对应的数据库已安装。 创建虚拟环境 在项目目录中创建并激活虚拟环境ÿ…...
Spring Boot 3.4新特性:RestClient和RestTemplate的重大更新详解
本文将深入探讨Spring Boot 3.4版本中关于RestClient和RestTemplate的重要更新。。 1. 背景介绍 在Spring生态系统中,HTTP客户端一直是一个重要的组件。从最早的RestTemplate,到WebClient,再到现在的RestClient,每一次演进都带来…...
ANSYS EMC Plus:谐振腔中的天线
概述 本博客说明了如何使用 EMA3D 和 MHARNESS 模拟工具来模拟腔内天线产生的电场。下面简要概述了完成模拟所需的步骤,视频链接中提供了完整的演示。 步骤1:定义模拟域 准备模拟的第一步是定义模拟域。该域应包含所有需要分析的几何图形。在此演示中…...
lv_ffmpeg学习及播放rtsp
lvgl8.3有ffmpeg支持 FFmpeg support typedef struct {lv_img_t img;lv_timer_t * timer;lv_img_dsc_t imgdsc;bool auto_restart;struct ffmpeg_context_s * ffmpeg_ctx; } lv_ffmpeg_player_t;typedef enum {LV_FFMPEG_PLAYER_CMD_START,LV_FFMPEG_PLAYER_CMD_STOP,LV_FFMP…...
Java前端基础—HTML
Java前端基础—HTML 目录 Java前端基础—HTML1.简介2.基础语法2.1HTML页面固定结构2.2标题标签2.3段落标签2.4换行标签2.5水平线标签2.6文本标签2.7图片标签2.8音频标签2.9视频标签2.10链接标签2.11列表标签2.12表格标签2.13表单标签2.14语义标签 1.简介 1.网页组成࿱…...
salesforce 控制 Experience Cloud 站点用户可以看到哪些用户
在 Salesforce 的 Experience Cloud 中,您可以通过多种方式控制站点用户(如社区用户)之间的可见性。这包括用户之间的信息可见性以及他们可以访问的其他用户数据。以下是几种方法和设置,用于实现对 Experience Cloud 站点用户可见…...
C语言实现尼科彻斯定理
1.题目: 2.分析 【1】怎么输出连续奇数:下面是输出m个连续奇数的代码 #include<stdio.h>int main(){int m,x;scanf("%d",&m);for(int i0;i<m:i){printf("%d",x);xx2;}return 0; } 【2】啥叫尼科彻斯定理?…...
【Ubuntu添加右键wine运行exe程序文件】
【前提】你在Ubuntu中安装了wine 【效果展示】右键在打开方式中显示用wine运行 以bilibli安装包为例,在B站安装包右键选择打开方式 省去了在终端中输入wine命令 【步骤】如何添加右键wine运行exe程序文件 新建一个文本文档 其中填入以下内容 [Desktop Entry]…...
7. Linux网络服务配置全面指南
本章目录: 引言7. 网络服务配置7.1 DNS服务器配置安装BIND配置区域文件创建区域文件测试与重启DNS服务示例图:DNS解析流程 7.2 Web服务器部署(Apache/Nginx)Apache与Nginx的选择安装Apache示例:部署静态网站安装Nginx配…...
深入探讨 Nginx 性能优化:从基础到高级的最佳实践
目录 引言Nginx 性能优化的意义Nginx 性能优化的主要方向系统层面的优化 4.1 优化操作系统的文件描述符4.2 调整 TCP 参数4.3 使用高效的磁盘 I/O 调度器 Nginx 配置优化 5.1 优化 worker 进程和连接数5.2 使用异步和非阻塞 I/O 模式5.3 配置 Gzip 压缩5.4 开启缓存和缓存控制…...
纯 HTML+CSS+JS 实现一个炫酷的圣诞树动画特效
纯 HTMLCSSJS 实现一个炫酷的圣诞树动画特效 前言 圣诞节快到了,今天给大家带来一个简单但是效果不错的圣诞树动画特效。这个特效完全使用原生 HTML、CSS 和 JavaScript 实现,包含闪烁的星星、随机彩灯等元素,非常适合节日气氛!…...
Python使用requests_html库爬取掌阅书籍(附完整源码及使用说明)
教程概述 本教程先是幽络源初步教学分析掌阅书籍的网络结构,最后提供完整的爬取源码与使用说明,并展示结果,切记勿将本教程内容肆意非法使用。 原文链接:Python使用requests_html库爬取掌阅书籍(附完整源码及使用说明…...
Linux网络——UDP的运用
Linux网络——UDP的运用 文章目录 Linux网络——UDP的运用一、引入二、服务端实现2.1 创建socket套接字2.2 指定网络接口并bind2.3 接收数据并处理2.4 整体代码2.5 IP的绑定的细节 三、用户端实现3.1 创建套接字3.2 指定网络接口3.3 发生数据并接收3.4 绑定问题 四、代码五、UD…...
axios
文章目录 [TOC](文章目录) 一、axios的基本使用axios请求1、引用axios,并发送请求axios发送请求的简化写法2、接受响应数据,并对响应的数据进行处理 三、axios拦截器(instance)1、请求拦截2、响应拦截 axios拦截器、vue中的路由守卫、servlet…...
MacOS下TestHubo安装配置指南
TestHubo是一款开源免费的测试管理工具, 下面介绍MacOS私有部署的安装与配置。TestHubo 私有部署版本更适合有严格数据安全要求的企业,支持在本地或专属服务器上运行,以实现对数据和系统的完全控制。 1、Mac 服务端安装 Mac安装包下载地址&a…...
vue2/3,Spring Boot以及生产环境跨域解决方案
vue2和vue3跨域解决方案 Vue 2 (基于 Webpack) 的跨域解决方案 1. 创建或编辑 vue.config.js 文件 Vue CLI为Webpack项目提供了简单的代理配置方式。你可以通过创建或编辑项目的根目录下的 vue.config.js 文件来设置开发服务器的代理规则: // vue.config.js mod…...
TestMAX/DFT Compiler:时序单元的类型、连接顺序和后DFT优化
相关阅读 TestMAX/DFT Compilerhttps://blog.csdn.net/weixin_45791458/category_12865937.html?spm1001.2014.3001.5482 时序单元的状态 未映射的时序单元(Unmapped Sequential Cell) 在Design Compiler读取了一个RTL设计后,Design Compiler内置的HDL Compiler工…...
Elasticsearch:analyzer(分析器)
一、概述 可用于将字符串字段转换为单独的术语: 添加到倒排索引中,以便文档可搜索。级查询(如 生成搜索词的 match查询)使用。 分析器分为内置分析器和自定义的分析器,它们都是由若干个字符过滤器(chara…...
蓝桥杯——异或森林
问题描述 在一个神秘的世界中,存在着一个称为"异或森林"的地方。异或森林中的每个树木都拥有独特的力量。肖恩进入了这片森林,他得到了一个任务:找出数组中满足条件的连续子数组,使得连续子数组中所有元素异或运算结果…...
第一个C++程序 - Hello World, 编译与运行
引言 编写并运行你的第一个 C 程序是学习这门语言的第一步。通过这个简单的例子,你将了解如何创建、编译和运行一个基本的 C 程序。本文将详细介绍每个步骤,并确保初学者能够顺利上手。 一、编写 "Hello World" 程序 1. 创建源代码文件 首先…...
学习threejs,PerspectiveCamera透视相机和OrthographicCamera正交相机对比
👨⚕️ 主页: gis分享者 👨⚕️ 感谢各位大佬 点赞👍 收藏⭐ 留言📝 加关注✅! 👨⚕️ 收录于专栏:threejs gis工程师 文章目录 一、🍀前言1.1 ☘️THREE.PerspectiveCamera透…...
测试 - 4 ( 9000 字详解 )
一:性能测试 1.1 什么是性能测试 性能测试和功能测试虽然都在系统测试阶段进行,但两者有本质区别。功能测试主要关注系统“能否完成特定功能”,例如一辆车是否具备四个轮子、方向盘、挡风玻璃,以及是否能够正常行驶。而性能测试…...
从 Coding (Jenkinsfile) 到 Docker:全流程自动化部署 Spring Boot 实战指南(简化篇)
前言 本文记录使用 Coding (以 Jenkinsfile 为核心) 和 Docker 部署 Springboot 项目的过程,分享设置细节和一些注意问题。 1. 配置服务器环境 在实施此过程前,确保服务器已配置好 Docker、MySQL 和 Redis,可参考下列链接进行操作࿱…...
NIPS2014 | GAN: 生成对抗网络
Generative Adversarial Nets 摘要-Abstract引言-Introduction相关工作-Related Work对抗网络-Adversarial Nets理论结果-Theoretical Results实验-Experiments优势和不足-Advantages and disadvantages缺点优点 结论及未来工作-Conclusions and future work研究总结未来研究方…...
WebGPU入门初识
什么是 WebGPU? WebGPU 是一种现代图形 API,旨在取代 WebGL,提供更高性能和更灵活的 GPU 加速能力。它基于 Vulkan、Metal 和 Direct3D 12,为 Web 开发者带来了类似于原生图形 API 的性能和控制力。 与 WebGL 不同,Web…...
Go语言基础语法
文章目录 Go语言基础语法一、引言二、基础语法1、变量声明与作用域1.1、全局变量1.2、局部变量1.3、块作用域 2、基本数据类型3、控制流程3.1、条件语句3.2、循环语句 4、函数5、并发编程 三、使用示例四、并发编程示例五、变量作用域详解六、总结 Go语言基础语法 一、引言 G…...
易基因: BS+ChIP-seq揭示DNA甲基化调控非编码RNA(VIM-AS1)抑制肿瘤侵袭性|Exp Mol Med
大家好,这里是专注表观组学十余年,领跑多组学科研服务的易基因。 肝细胞癌(hepatocellular carcinoma,HCC)早期复发仍然是一个具有挑战性的领域,其中涉及的机制尚未完全被理解。尽管微血管侵犯(…...
layui动态拼接生成下拉框验证必填项失效问题
利用 jQuery 动态拼接下拉框时,lay-verify"required" 失效了,有以下几种原因。 1. <form></form>标签 加入 layui 类,class"layui-form" 。提交按钮上加自动提交,lay-submit ""; 。需…...
Speckly:基于Speckle文档的RAG智能问答机器人
前言 Speckly 是一个基于 检索增强生成 (RAG) 技术的智能问答机器人,它能像一位经验丰富的工程师,理解你的问题,并从 Speckle 文档中精准地找到答案。更厉害的是,它甚至可以帮你生成代码片段!🚀 本文将详…...
NodeRed使用心得,实现增删改查等
使用场景介绍 在VUE中使用nodeRed实现对节点的 增删改查等功能,且储存成功之后下点击时启动对应流程 安装与配置 1.安装NodeRed npm install -g --unsafe-perm node-red 安装完成后,你可以通过运行以下命令来启动Node-RED node-red-start2. 配置文件 N…...
万物皆有解法(序)
万物皆有解法(序) 《万物有解》一:解的存在 解:可做解释解答,此文引申为原因。可做解除、解围,此文引申为解法、方法。 先有事物存于世-what,再有原因为何存-why,再有解法如何除去…...