F12开发者工具如何找到对应接口

Web问题定位

  • 1、进入 NetWork页面
  • 2、点击Fetch/XHR,这里可以看到页面发起的接口
  • 3、找到出问题的接口
  • 4、NetWork页面怎么看接口详情
  • 5、问题定位

最常用的定位前后端问题的方法。即:一般用来查看是后端返回给前端的数据有误,还是前端显示有误。
主流浏览器(如Chrome,FireFox,等)都有自带的接口查看工具,可以通过F12(设置–工具–开发者工具)开启抓包。每进行一个操作,一般都会调用对应的接口,在NetWork中可以看到当前页面发送的每个请求。以谷歌浏览器为例:

1、进入 NetWork页面

如图,按F12,切换到NetWork页面,默认展示的是All页面。.js、 .css 、.ico、.png 这些结尾的都是前端的渲染、图标、图片等,不是接口。
在这里插入图片描述

2、点击Fetch/XHR,这里可以看到页面发起的接口

在这里插入图片描述

3、找到出问题的接口

很多时候,执行一个操作,可能调用了多个接口,就需要判断当前问题对应的是哪个接口:
1)查看开发的接口文档;
2)如果没有接口文档,清空Network列表,进入测试界面。然后执行操作,如果有多个请求,逐个查看哪个接口的入参或响应数据是你刚操作的数据;
3)如果没有接口文档,出入参还是加密的,我也不会(我只会逐个接口解密入参看是哪个,或者直接问开发);
4)最便捷的:问你的开发,是哪个接口(如果有文档还一直问,大概会被骂)。

4、NetWork页面怎么看接口详情

一般响应数据在 preview 页面看比较清晰,内容和 Response页面是一样的。
在这里插入图片描述

5、问题定位

1)一般情况下,console中的报错信息属于前端问题。但是,有些时候console有报错,但不是bug(看是否影响功能);
2)请求地址错误、请求体参数缺漏或错误,这些都是前端问题;
3)response 或 preview 中,没有返回值,或者返回的内容错误(与操作结果不符,有权限的话可以查看数据库),是后端问题。
4)前端界面显示的内容,与后端接口返回的内容不一样,是前端问题。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/282363.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

详解Vue3中的鼠标事件click和dblclick

本文主要介绍Vue3中的常见鼠标事件。 目录 一、click——单击事件二、dblclick——双击事件三、在使用click和dbclick需要注意的地方 下面是Vue 3中常用的鼠标事件: 一、click——单击事件 click事件是一种常见的事件类型,用于在用户点击某个元素时触发…

网络运行状况监控工具

网络运行状况是网络在其操作和环境约束范围内按预期运行的能力,但是,随着云和人工智能等技术的出现,网络变得越来越复杂,维护其 IT 基础设施是一项越来越繁琐的任务。为了确保网络可靠性,组织需要了解每个端点的运行状…

高并发处理专题研究 - epoll并发编程[更新中]

文章目录 1 前置知识1.1 Socket编程基础Socket概述Socket通信模型Socket API一个简单的Socket编程实例 1.2 IO多路复用1.3 阻塞原理 2 epoll原理2.1 epoll概述2.2 epoll系统调用epoll_create()epoll_ctl()epoll_wait() 2.3 epoll工作原理 3 示例代码及演示 1 前置知识 1.1 Soc…

了解 NSA 关于管理 OSS 和 SBOM 的最新指南

开源软件很容易受到恶意行为者的攻击,但软件材料清单可以帮助减轻威胁。美国国家安全局的指导为管理生态系统奠定了坚实的基础。 软件供应链安全仍然是网络安全和软件行业的一个关键话题,并且有充分的理由,从针对大型软件供应商的持续攻击到…

vue3使用vuex

vuex: 状态管理工具 使用场景:用户登录状态 购物车 地理位置 等 数据位置:内存 安装 项目根目录 yarn add vuex 在src目录下新建store文件夹 下面新建index.js src/store/index.js 在main.js中引入并使用 // 导入状态管理工具vuex import store…

基于价值认同的需求侧电能共享分布式交易策略(matlab完全复现)

目录 1 主要内容 2 部分程序 3 程序结果 4 下载链接 1 主要内容 该程序完全复现《基于价值认同的需求侧电能共享分布式交易策略》,针对电能共享市场的交易机制进行研究,提出了基于价值认同的需求侧电能共享分布式交易策略,旨在降低电力市…

23 UVM Event

even机制提供进程之间的同步。与System Verilo event相比,UVM event提供了额外的灵活性,如保持事件等待器/event waiters的数量和设置回调。 uvm_event类声明: virtual class uvm_event_base extends uvm_object class uvm_event#(type Tuv…

语义分割的应用及发展

语义分割(Semantic Segmentation)是一种计算机视觉领域的任务,旨在将一张图像中的每一个像素都分配一个语义标签,即将图像中的每个物体区域进行精确的分类划分。例如,在一张街景图中,语义分割可以将人、车、路、天空等每个像素分别…

Android14新特性 开启前台service服务

1. Android14新特性 1.1. 场景 在Android14(targetSDK34)系统手机开启前台service服务崩溃 ATAL EXCEPTION: mainProcess: com.inspur.lbrd, PID: 15634java.lang.RuntimeException: Unable to create service com.inspur.lbrd.service.KeepAliveServi…

计算机毕业设计 基于html5的图书管理系统的设计与实现 Java实战项目 附源码+文档+视频讲解

博主介绍:✌从事软件开发10年之余,专注于Java技术领域、Python人工智能及数据挖掘、小程序项目开发和Android项目开发等。CSDN、掘金、华为云、InfoQ、阿里云等平台优质作者✌ 🍅文末获取源码联系🍅 👇🏻 精…

数据结构期末复习(1)数据结构和算法 线性表

数据结构期末总复习(gaois课堂版) 数据结构的概念 数据结构是计算机科学中的一个重要概念,它指的是组织和存储数据的方式。数据结构可以帮助我们高效地操作和管理数据,使得计算机程序能够更加有效地执行各种任务。 数据结构有很…

关于链表的一些问题

求链表的中间节点 可以定义两个指针,一个一次走两步一个一次走一步,当走的快的走到NULL时,走的慢的就是链表的中间节点。(此法求出的偶数个节点的链表的中间节点是它中间的第二个) 求倒数第K个节点 也可以定义两个指…

【HarmonyOS】ArkTS语言介绍与组件方式运用

从今天开始,博主将开设一门新的专栏用来讲解市面上比较热门的技术 “鸿蒙开发”,对于刚接触这项技术的小伙伴在学习鸿蒙开发之前,有必要先了解一下鸿蒙,从你的角度来讲,你认为什么是鸿蒙呢?它出现的意义又是…

【网络安全 | MD5截断比较】PHP、Python脚本利用

前言 在解题中&#xff0c;当遇到类似 substr(md5(a),-6,6) 7788这样的MD5截断比较的题目时&#xff0c;只有求出a的值才能进行接下来的操作。 一个一个去猜是不可能的&#xff0c;通常使用脚本解决&#xff0c;文末给出实战案例。 PHP循环脚本 <?phpfor($i1;$i<9…

小信跳房子的题解

原题描述&#xff1a; 时间&#xff1a;1s 空间&#xff1a;256M 题目描述&#xff1a; 小信在玩跳房子游戏&#xff0c;已知跳房子游戏的图表现为一颗完美的具有个节点的二叉树。从根节点依次编号为。节点的左子节点编号为&#xff0c;右子节点编号为。 小信从从节点出发&…

python观察图像的直流分量——冈萨雷斯数字图像处理

原理 在数字图像处理中&#xff0c;图像的直流分量&#xff08;DC分量&#xff09;是指图像中的平均亮度水平。这个概念源自于傅里叶变换&#xff0c;其中信号可以分解为多个频率成分。在这个上下文中&#xff0c;直流分量对应于频率为零的成分&#xff0c;即信号的平均值。 在…

【实用工具】vim常用命令

快速移动(上下左右箭头可替代) 左移 h 右移 l 下移 j 上移 K在本行操作 0 移动到本行行首 ^ 移动到本行的第一个不是 blank 字符 $ 移动到本行行尾 w 光标移动到下一个单词的开头 e 光标移动到下一个单词的结尾跨行移动光标 nG 光标定位到第n行的行首 gg 光标定位到第一行的…

基于JAVA的食品生产管理系统 开源项目

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 加工厂管理模块2.2 客户管理模块2.3 食品管理模块2.4 生产销售订单管理模块2.5 系统管理模块2.6 其他管理模块 三、系统展示四、核心代码4.1 查询食品4.2 查询加工厂4.3 新增生产订单4.4 新增销售订单4.5 查询客户 五、…

看懂基本的电路原理图(入门)

文章目录 前言一、二极管二、电容三、接地一般符号四、晶体振荡器五、各种符号的含义六、查看原理图的顺序总结 前言 电子入门&#xff0c;怎么看原理图&#xff0c;各个图标都代表什么含义&#xff0c;今天好好来汇总一下。 就比如这个电路原理图来说&#xff0c;各个符号都…

我的2023年度总结(一)

在本文开始之前&#xff0c;先对我2023年的所为进行一些道歉&#xff1a; 部分工作中的客户/合作伙伴&#xff0c;在2023年我可能时长怠慢了您的消息。但我真不是故意的(有时可能在忙其他事情)。2024年&#xff0c;如有任何问题请尽可能抛过来吧。部分粉丝朋友&#xff0c;甚至…