V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
MuHuoLiLi
V2EX  ›  程序员

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

  •  1
     
  •   MuHuoLiLi · 2023-04-03 16:52:47 +08:00 · 3033 次点击
    这是一个创建于 611 天前的主题,其中的信息可能已经有所发展或是发生改变。
    我是一个后端,早年 JQuery 时,页面按钮一般是 a 标签,href 属性就是请求地址;或者其它标签,一般在 onclick 属性里也能找到;现在 Vue 了,按钮就是个 button ,本身只有 type 、class ,看起来也没啥特殊的,怎么找对应的请求地址呢?

    1.问前端可以问到,我想学一下能不能通过浏览器 F12-Elements 自己找;
    2.不能动线上数据,也就是没法通过 F12-Network 来看。
    19 条回复    2023-04-06 10:18:10 +08:00
    sanmaozhao
        1
    sanmaozhao  
       2023-04-03 16:56:08 +08:00   ❤️ 4
    可以在 F12-Network 里面,调成 Offline ,然后再点按钮
    这样请求地址会出现,但是由于已离线,不会产生实际的调用
    CloudnuY
        2
    CloudnuY  
       2023-04-03 16:56:22 +08:00   ❤️ 2
    Element 里找到选中这个元素,在事件监听器里找到 click 方法,点进去追踪一下函数
    dafuyang
        3
    dafuyang  
       2023-04-03 16:59:16 +08:00 via Android
    f12 查网络请求里面的 fetch/XHR 请求跟动线上数据有什么联系啊,你把网络设置成 offline 发不出去不是也可以。。
    brader
        4
    brader  
       2023-04-03 17:06:12 +08:00
    F12-Elements 选中这个元素,然后在界面右边有个 Event Listeners 能看到监听的事件
    DOLLOR
        5
    DOLLOR  
       2023-04-03 17:08:11 +08:00
    就算你不知道 Network 里有个模拟 Offline ,你也应该懂得关 wifi 、拔网线,再点按钮来看请求地址嘛。
    lichdkimba
        6
    lichdkimba  
       2023-04-03 17:10:33 +08:00
    JQuery 时代都是绑定事件的………… href 属性的至少不能算 JQuery 的风格
    ruoxie
        7
    ruoxie  
       2023-04-03 19:32:03 +08:00 via iPhone
    把你网线拔了,f12 不就能看了,当然连续调多个接口而且有先后顺序的,还是看不到
    AyaseEri
        8
    AyaseEri  
       2023-04-03 19:35:12 +08:00
    jQuery 时代就已经是事件触发 ajax 了,a 标签都不是调接口的操作
    superedlimited
        9
    superedlimited  
       2023-04-03 20:30:56 +08:00 via iPhone
    2023 年,竟然看到恐龙🦖活化石了
    Pastsong
        10
    Pastsong  
       2023-04-03 20:35:22 +08:00 via Android
    click handler 有点难找 现在都是绑在 root 上代理下来的,用网络请求的发起者反找比较方便
    ivslyyy
        11
    ivslyyy  
       2023-04-04 00:15:48 +08:00
    1 、f12 断网后抓包
    2 、source 里监听点击事件
    3 、看源码,在源代码里找
    n18255447846
        12
    n18255447846  
       2023-04-04 08:03:54 +08:00
    为什么不问前端小伙伴呢,一条消息的事
    ccyu220
        13
    ccyu220  
       2023-04-04 08:05:45 +08:00
    @ruoxie 不能动线上数据,拔网线+1
    ccyu220
        14
    ccyu220  
       2023-04-04 08:06:12 +08:00
    @ccyu220 当然这个把网线不是真的让你把网线,而是在控制台里面把网络关了。
    MuHuoLiLi
        15
    MuHuoLiLi  
    OP
       2023-04-04 08:50:31 +08:00
    @sanmaozhao 感谢
    MuHuoLiLi
        16
    MuHuoLiLi  
    OP
       2023-04-04 09:03:12 +08:00
    @CloudnuY 定位到 button 元素后,监听器显示这样

    这三个定位分别跳转到



    应该继续从哪个方法跟踪,来找到最终 URL ?
    xiaoqidev
        17
    xiaoqidev  
       2023-04-04 09:10:56 +08:00
    wangtian2020
        18
    wangtian2020  
       2023-04-04 11:40:26 +08:00   ❤️ 1
    Vue 项目如果按照正常流程打包上线,线上的都是 min 压缩后的 js 文件,鬼找得到啊。去看前端源码
    MuHuoLiLi
        19
    MuHuoLiLi  
    OP
       2023-04-06 10:18:10 +08:00
    @wangtian2020 谢谢~所以说现代前端项目很难仅通过浏览器元素来查找对应调用的接口对吗?还是得靠前端小伙伴和项目源代码~
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3301 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 12:21 · PVG 20:21 · LAX 04:21 · JFK 07:21
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.