Vue 制作的前端页面，怎么找按钮对应的后端请求地址？

[MuHuoLiLi]

我是一个后端，早年 JQuery 时，页面按钮一般是 a 标签，href 属性就是请求地址；或者其它标签，一般在 onclick 属性里也能找到；现在 Vue 了，按钮就是个 button ，本身只有 type 、class ，看起来也没啥特殊的，怎么找对应的请求地址呢？

1.问前端可以问到，我想学一下能不能通过浏览器 F12-Elements 自己找；
2.不能动线上数据，也就是没法通过 F12-Network 来看。

[sanmaozhao]

可以在 F12-Network 里面，调成 Offline ，然后再点按钮
这样请求地址会出现，但是由于已离线，不会产生实际的调用

[CloudnuY]

Element 里找到选中这个元素，在事件监听器里找到 click 方法，点进去追踪一下函数

[dafuyang]

f12 查网络请求里面的 fetch/XHR 请求跟动线上数据有什么联系啊，你把网络设置成 offline 发不出去不是也可以。。

[brader]

F12-Elements 选中这个元素，然后在界面右边有个 Event Listeners 能看到监听的事件

[AV1]

就算你不知道 Network 里有个模拟 Offline ，你也应该懂得关 wifi 、拔网线，再点按钮来看请求地址嘛。

[lichdkimba]

JQuery 时代都是绑定事件的………… href 属性的至少不能算 JQuery 的风格

[ruoxie]

把你网线拔了，f12 不就能看了，当然连续调多个接口而且有先后顺序的，还是看不到

[AyaseEri]

jQuery 时代就已经是事件触发 ajax 了，a 标签都不是调接口的操作

[superedlimited]

2023 年，竟然看到恐龙🦖活化石了

[Pastsong]

click handler 有点难找 现在都是绑在 root 上代理下来的，用网络请求的发起者反找比较方便

[ivslyyy]

1 、f12 断网后抓包
2 、source 里监听点击事件
3 、看源码，在源代码里找

[n18255447846]

为什么不问前端小伙伴呢，一条消息的事

[ccyu220]

@ruoxie 不能动线上数据，拔网线+1

[ccyu220]

@ccyu220 当然这个把网线不是真的让你把网线，而是在控制台里面把网络关了。

[MuHuoLiLi]

@sanmaozhao 感谢

[MuHuoLiLi]

@CloudnuY 定位到 button 元素后，监听器显示这样

这三个定位分别跳转到



应该继续从哪个方法跟踪，来找到最终 URL ？

[xiaoqidev]

[wangtian2020]

Vue 项目如果按照正常流程打包上线，线上的都是 min 压缩后的 js 文件，鬼找得到啊。去看前端源码

[MuHuoLiLi]

@wangtian2020 谢谢~所以说现代前端项目很难仅通过浏览器元素来查找对应调用的接口对吗？还是得靠前端小伙伴和项目源代码~