web问题定位:F12,如何找到对应接口

这篇具有很好参考价值的文章主要介绍了web问题定位:F12,如何找到对应接口。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

1、进入 NetWork页面

如图,按F12,切换到NetWork页面,默认展示的是All页面。.js、 .css 、.ico、.png 这些结尾的都是前端的渲染、图标、图片等,不是接口。
web问题定位:F12,如何找到对应接口

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

web问题定位:F12,如何找到对应接口 

3、找到出问题的接口 

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

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

一般响应数据在 preview 页面看比较清晰,内容和 Response页面是一样的。

web问题定位:F12,如何找到对应接口 

5、问题定位

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

到了这里,关于web问题定位:F12,如何找到对应接口的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • ubuntu的键盘F1~F12没有反应/出现问题(被系统强制为功能键了)

        最近客制化的键盘比较火,然而很多这样的键盘只说明适配 Windows / Mac 系统,没有说去适配 Linux 系统,所以头疼的问题就出现了—— 程序员运行调试时不能使用F5键、测试人员打开网页调试工具时不能用F12键……等等等各种奇怪的问题,包括Fn+xxx配合使用键也无法正

    2024年02月09日
    浏览(38)
  • 如何根据 offset 找到对应的 Message?

    通过 Offset 从存储层中获取 Message 大致分为两步: 第一步,根据 Offset 找到所属的 Segment 文件 第二步,从 Segment 中获取对应 Offset 的消息数据 第一步 可以直接根据 Segment 的文件名进行查找(上面已经介绍了 Segment 的文件面就是它包含的数据的起始 Offset )。 第二步 则需要一

    2024年02月04日
    浏览(80)
  • macbook Safari 如何打开F12 Console 控制台 开发者工具 Developer Tools

    首先要启用开发者模式,然后就可以打开开发者工具。 Safari–Preferences呼出首选项面板(或用快捷键 command+, 直接呼出)。 在 Advanced 菜单面板下,勾选 Show Develop Menu in menu Bar 。 顶部菜单栏在 勾选这个选项之前 : 勾选后 ,在 Bookmarks 和 Window 之间多了一个 Develop : 点击这个

    2024年02月11日
    浏览(79)
  • eclipse如何找到对应版本的WindowBuilder进行安装

    访问https://projects.eclipse.org/projects/tools.windowbuilder 找到自己的eclipse版本,点击进去,找到WindowBuilder,后面就是对应的版本号  其中1.9.4是WindowBuilder的版本号,我的eclipse版本是2020-12   最后在自己的eclipse-Install New Software- 输入WindowBuilder 网址是https://archive.eclipse.org/windowbuilder/1

    2024年02月12日
    浏览(43)
  • 多种方法解决谷歌(chrome)、edge、火狐等浏览器F12打不开调试页面或调试模式(面板)的问题。

    不论是前端开发者,还是后端开发者,我们在调试 web 项目时,偶尔弹出相关错误。 此时,我们需要打开浏览器的调试模式,如下图所示: 通过浏览器的调试模式,来排查错误的根源: 后端接口是否有问题 前端 js 或者相关前端框架是否有问题。 当然,我们也可以通过调试

    2024年02月09日
    浏览(96)
  • PHP框架开发实践 | 1024 程序员节:通过index.php找到对应的controller是如何实现的

    🏆作者简介,黑夜开发者,CSDN领军人物,全栈领域优质创作者✌,CSDN博客专家,阿里云社区专家博主,2023年6月CSDN上海赛道top4。 🏆数年电商行业从业经验,历任核心研发工程师,项目技术负责人。 🏆本文已收录于PHP专栏:PHP进阶实战教程。 🎉欢迎 👍点赞✍评论⭐收藏

    2024年02月08日
    浏览(72)
  • f12工具

    抓包工具 elements查看器: 可用于自动化脚本的元素定位,前端页面-html页面 Selenium提供了八种定位元素方式 1、id 2、name 3、class_name 4、tag_name 5、link_text 6、partial_link_text 7、XPath(倾向于用相对路径://input【name=“phone”】) 8、CSS console控制台 source调试器 network网络 performance性能

    2024年02月09日
    浏览(36)
  • F12诡异Bug分享

    java运行的时候会产生class文件,其本身是跑class文件的,但某个实施反馈一个经典版本的长久bug。 当使用模糊查询时,一页一页查看,在倒数第二页时,点击下一页,页面静止不动。(正常情况下应该是会跳到最后一页。) 反馈后,我查看这个java文件的代码,没有问题。怀

    2024年02月13日
    浏览(35)
  • 浏览器F12有啥用

    F12一个被大多数人抛弃在键盘角落,很少被用到的键,相比很少接触(除了部分软件的快捷键)而在电脑浏览器里确是一片新天地。 萌新可以参考,大佬请多多指导。 目录 是啥 有啥 元素(ELements) 控制台(Console) 源代码(Sources)  网络(Network) 一些有趣的东东  小恐龙

    2024年02月09日
    浏览(53)
  • js防止F12扒数据

    当打开 F12 控制台时,效果如下:

    2024年02月13日
    浏览(35)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包