如何查看特定时段执行的JS函数名？追踪滚动加载触发函数方法

Absolutely, there are several practical ways to track JavaScript function calls during a specific timeframe—exactly what you need to crack that scroll-to-load mechanism. Let's walk through the most effective methods using browser dev tools, since you mentioned you can use any browser.

1. Record Function Calls with Chrome DevTools' Performance Panel #

This is the most straightforward way to capture all JS activity during your scroll trigger:

• Open DevTools (F12 or Ctrl+Shift+I), switch to the Performance tab
• Click the red record button in the top-left, then manually scroll the page to trigger content loading. Hit the record button again to stop once the load completes
• In the recorded results, expand the Main thread's call stack. You can filter for JS execution by checking the JS checkbox beforehand to focus only on relevant functions
• Pro tip: Right-click any function in the call stack and select Show function definition to jump directly to its source code, making it easy to analyze how it triggers content loads

2. Inject Custom Function Hooks via Console #

If you want to target scroll-specific listeners directly, you can write a simple hook to log every scroll-related function call:

// Save the original addEventListener method
const originalAddEventListener = EventTarget.prototype.addEventListener;
EventTarget.prototype.addEventListener = function(type, listener) {
  // Log scroll listeners when they're added
  if (type === 'scroll') {
    console.log('Scroll listener registered:', listener.name || 'anonymous function');
    // Wrap the listener to log when it's actually called
    const wrappedListener = (...args) => {
      console.log('Scroll listener executed at:', new Date().toISOString(), '| Function:', listener.name || 'anonymous');
      return listener.apply(this, args);
    };
    return originalAddEventListener.call(this, type, wrappedListener);
  }
  return originalAddEventListener.call(this, type, listener);
};

• Paste this code into the DevTools Console and hit enter. Then scroll the page—you'll see all scroll-related functions logged in the console. For anonymous functions, cross-reference with the Performance panel to find their exact call location

3. Use Conditional Breakpoints to Pinpoint Load Triggers #

If you have a hunch about which functions might be responsible, or want to pause execution exactly when the load happens:

• Switch to the Sources tab in DevTools. Use Ctrl+P to search for relevant JS files, or navigate through the file tree
• Find the line where a suspect function is defined, click the gutter next to the line number to add a breakpoint
• Right-click the breakpoint and select Edit condition. For example, use window.scrollY > document.body.offsetHeight - window.innerHeight - 100 to only pause when you're near the bottom of the page—this lets you catch the exact moment the load function runs

Pro Tips for Targeted Tracking #

• Event Listeners Panel: Go to the Elements tab, select the <body> element, then scroll to the Event Listeners section on the right. Expand the scroll event to see all bound listeners—click any listener to jump straight to its source code
• Network Panel Packet Capture: Sometimes scroll loads trigger XHR/Fetch requests. Switch to the Network tab, check the XHR/Fetch filter, then scroll the page. Look at the Initiator column for each request—it shows which function triggered the call, and you can click it to navigate to the source
• Blackbox Framework Code: If the site uses React, Vue, or another framework, internal framework functions can clutter your logs. Right-click framework files in the Sources tab and select Blackbox script to skip over them during debugging, focusing on the site's custom business logic

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