如何用Chrome DevTools的monitor()监控ES6模块及Vuex中的方法？

核心前提 #

Chrome DevTools提供的monitor()方法需要传入可被访问的函数引用才能生效，ES6模块内的方法默认是模块私有作用域，无法直接在全局调用，所以操作的核心都是先定位拿到目标方法的引用，再传入monitor()。

场景1：本地开发环境（存在Source Map） #

操作步骤如下：

• 打开DevTools的「Sources」面板，按Ctrl+P（Mac系统按Cmd+P），直接搜索原始文件mutations.js，点击打开原始源码
• 在setFoo方法的第一行代码打一个断点
• 触发一次setFoo的调用（比如操作页面对应功能），代码执行会暂停在断点位置
• 此时直接在Console控制台执行monitor(arguments.callee)即可完成绑定，之后所有setFoo的调用都会在控制台打印参数、调用者信息
• 也可以通过Webpack模块缓存直接拿引用：执行以下代码就能直接拿到目标方法，套入monitor()即可生效

  const targetModule = Object.values(__webpack_require__.c).find(mod => mod.exports?.setFoo)
  monitor(targetModule.exports.setFoo)
  

• 如果你安装了Vue DevTools插件，直接在Vuex面板找到setFoo这个mutation，右键选择「Get function reference」，拿到引用后传入monitor()即可。

场景2：生产环境（无Source Map） #

操作步骤如下：

• 如果生产打包没有压缩混淆函数名：打开「Performance」面板，录制一次触发setFoo的操作流程，停止录制后搜索setFoo，在调用栈中点击跳转到对应编译后代码的位置，在方法第一行打个断点，触发执行后在控制台执行monitor(arguments.callee)绑定
• 如果函数名被混淆：先给Vuex的commit方法打调试断点，在控制台执行debug(Vuex.Store.prototype.commit)，触发操作后代码会停在commit调用位置，沿着调用栈向上找对应的mutation处理函数，拿到引用后传入monitor()即可
• 如果以上方法都不行，可以用setFoo方法内的独有特征（比如独有的业务变量名、字符串常量）在Sources面板全局搜索，定位到对应函数位置后再按上述断点方式拿引用绑定。

替代方案：手动实现监控逻辑 #

如果monitor()不生效，也可以直接覆写目标方法实现等价的监控效果：

// 先替换为你拿到的setFoo原始引用
const originalSetFoo = setFoo
window.setFoo = function(...args) {
  console.log('setFoo调用参数：', args)
  console.log('调用栈：', new Error().stack)
  return originalSetFoo.apply(this, args)
}

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