Chrome DevTools 的 monitor() 命令可实时打印函数调用的参数和返回值，无需手动加 log 或打断点；支持 monitor(fn) 启动和 unmonitor(fn) 停止监控，但仅限命名函数或变量引用，不兼容匿名函数、混淆函数名及非 Chrome 浏览器。
Chrome DevTools 的 monitor() 命令可以实时打印指定函数每次被调用时的参数和返回值，无需手动加 console.log，也不用打断点，适合快速观察函数行为。
Monitor 命令的基本用法
在控制台中直接输入：
-
monitor(fn)：开始监控函数fn的每次调用（包括参数和返回值） -
unmonitor(fn)：停止监控 -
monitorEvents(obj, events)是另一个命令，注意别和它混淆 ——monitor()只针对函数
例如，有函数 function add(a, b) { return a + b; }，执行 monitor(add) 后，每次调用 add(2, 3)，控制台会自动输出类似：
监控对象方法或匿名函数的技巧
不能直接对未命名的箭头函数或对象方法字面量使用 monitor，需先赋值给变量或显式命名：
- ✅ 正确：
const handleClick = () => { ... }; monitor(handleClick); - ✅ 正确（命名函数表达式）：
const obj = { fetch: function getData() { ... } }; monitor(obj.fetch); - ❌ 错误：
monitor(() => {})或monitor({ fn() {} }.fn)（后者因属性访问不保留引用）
若方法是类中定义的，可在控制台中先获取实例方法引用，如 monitor(myInstance.methodName)。
配合断点与 console.table 提升可读性
monitor() 输出较简略，若参数复杂（如嵌套对象、数组），可临时改写函数以增强日志：
- 在监控前重定义函数（仅限开发环境）：
const original = someFn;<br> someFn = function(...args) {<br> console.table({ args });<br> const result = original.apply(this, args);<br> console.table({ result });<br> return result;<br> }; - 或用
debugger配合monitor：先monitor(fn)快速定位调用时机，再在函数内加debugger深入查上下文
注意事项与局限性
monitor() 是 Chrome 控制台专属命令（基于 V8 的命令行 API），不兼容 Firefox 或 Safari；且只在当前控制台会话有效，刷新页面即失效。
- 无法监控被压缩/混淆后的函数名（如
function t(e,n){...}），建议开发阶段保留源码映射或使用未压缩构建 - 监控期间函数仍正常执行，但频繁调用可能轻微影响性能，生产环境切勿启用
- 不捕获异常 —— 若函数抛错，
monitor仍显示调用，但不会打印错误堆栈，需配合window.onerror或try/catch
