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)，控制台会自动输出类似：

add(2, 3) → 5

监控对象方法或匿名函数的技巧

不能直接对未命名的箭头函数或对象方法字面量使用 monitor，需先赋值给变量或显式命名：

Tome

Tome是一款面向叙事型页面和演示内容创作的 AI storytelling 工具。

下载

• ✅ 正确：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