如何利用开发者工具检测特定函数内部的调用函数？

完全可以用浏览器开发者工具做到，给你几个实用的方法：

• 给统一函数加断点追踪
  先在Sources面板搜索这个统一函数的名称，找到它的源码位置。点击函数内部的行号添加断点，当你执行目标操作时，代码会自动暂停。此时看右侧的Call Stack面板，能清晰看到触发这个函数的完整调用链，包括是哪个元素的事件触发了它；再看Scope面板，能获取事件对象event（通过event.target可以确定具体触发的元素）、函数接收的参数，以此区分不同操作的逻辑。

• 设置条件断点精准定位
  如果这个统一函数处理多种操作，右键点击已添加的断点，选择「Edit breakpoint」，输入过滤条件（比如event.target.className === 'checkout-btn'或者args[0].action === 'delete'）。只有当条件满足时代码才会暂停，不用每次调用都打断，精准追踪你关心的操作。

• 临时插入日志快速排查
  不用修改网站源码，用开发者工具的「Local Overrides」功能保存修改后的代码，或者直接在Sources面板的函数里插入console.log语句，比如：

  console.trace('操作触发', event.target, arguments);
  

  这样每次函数调用时，控制台会输出触发元素、传入参数和完整调用栈，快速理清不同操作的区别。

• 用控制台API监听函数调用
  在控制台输入monitor(你的统一函数名)，之后这个函数每次被调用，控制台都会自动输出调用的参数和调用栈信息，不用断点就能实时追踪所有调用。要取消监听的话，输入unmonitor(你的统一函数名)即可。

内容的提问来源于stack exchange，提问作者Ren4rd