能否在Chrome Profiler中分离函数调用？AOP改写函数的性能分析需求

Great question! The short answer is yes, but it depends on how you structure your AOP wrapper and how you use Chrome DevTools. Let’s break down the details and actionable solutions:

1. Default Profiler Behavior #

With your current implementation:

var func_name = func.name.toString();
window[func_name] = function(){ 
  // Pre-execution code
  JSLibrary.returnValue = func.apply(this, arguments); 
  // Post-execution code
  return JSLibrary.returnValue;
}

Chrome’s Profiler (both the Performance and legacy JavaScript Profiler panels) will automatically distinguish between two entries in the call stack:

• The wrapper function (labeled with func_name, since you assigned it to that global variable)
• The original func being invoked via func.apply()

In the Flame Chart view, you’ll see the wrapper as a parent block, with the original function nested inside it. This lets you visually split the time spent in your AOP pre/post logic versus the core function code.

2. Simplify Viewing with Blackboxing #

If you want to focus only on the original function’s performance (and hide the AOP wrapper from your profiler results), use Chrome DevTools’ Blackboxing feature:

• Open DevTools → Settings → Blackboxing
• Add the file containing your AOP library code to the blacklist
• When profiling, the wrapper function will be "blackboxed"—the profiler will skip over its code and show the original func directly in the call stack, as if the wrapper didn’t exist.

3. Granular Tracking with the Performance API #

For precise breakdowns of time spent in your AOP code vs. the original function, use the browser’s Performance API to add custom marks and measures:

window[func_name] = function(){
  // Track pre-execution AOP code
  performance.mark(`aop-pre-start-${func_name}`);
  // Your pre-execution logic here
  performance.mark(`aop-pre-end-${func_name}`);
  performance.measure(`aop-pre-time-${func_name}`, `aop-pre-start-${func_name}`, `aop-pre-end-${func_name}`);

  // Track original function execution
  performance.mark(`original-start-${func_name}`);
  JSLibrary.returnValue = func.apply(this, arguments);
  performance.mark(`original-end-${func_name}`);
  performance.measure(`original-time-${func_name}`, `original-start-${func_name}`, `original-end-${func_name}`);

  // Track post-execution AOP code
  performance.mark(`aop-post-start-${func_name}`);
  // Your post-execution logic here
  performance.mark(`aop-post-end-${func_name}`);
  performance.measure(`aop-post-time-${func_name}`, `aop-post-start-${func_name}`, `aop-post-end-${func_name}`);

  return JSLibrary.returnValue;
}

After running a performance profile, you can find these custom measures in the Performance panel’s Timings section, which will show exact time values for each segment of your AOP flow.

4. Quick Note on Anonymous Functions #

If your original func is anonymous (has an empty name property), the profiler will label its call as <anonymous>. To avoid confusion, always use named function declarations or expressions for your target functions.

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