如何在Chrome中为AJAX动态加载的函数添加调试断点？

Absolutely, wrapping the target function with a debugger-injected wrapper is a perfect solution here—this lets you intercept the dynamically loaded function right when it’s defined and executed, even in production where you can’t deploy extra code. Here’s how to implement it step-by-step for your specific case:

Step 1: Set Up a Function Hook Before Triggering the AJAX Request #

Since the iWantToDebugYou function gets overwritten by the AJAX response, we can use Object.defineProperty to listen for when this function is assigned to the global window object. This lets us automatically replace it with our wrapped version the moment it loads.

Open Chrome’s DevTools Console and run this code before the AJAX request fires (e.g., before clicking the button that triggers the $.post, or right after page load if the request runs automatically):

Object.defineProperty(window, 'iWantToDebugYou', {
  set: function(newFunction) {
    // Save the original dynamically loaded function
    const originalFunction = newFunction;
    // Replace it with our wrapper that includes the debugger
    window.iWantToDebugYou = function() {
      // This will pause execution right before the original function runs
      debugger;
      // Call the original function with the same context and arguments
      return originalFunction.apply(this, arguments);
    };
    // Optional: Store the original function if you need to restore it later
    window._original_iWantToDebugYou = originalFunction;
  },
  // Allow us to redefine this property later if needed
  configurable: true
});

Step 2: Trigger the AJAX Request #

Now trigger the $.post request that loads the dynamic script (either via the page’s existing action, or manually in the console with $.post("ajax/function", function(data) { $("#result").html(data); });).

Step 3: Debug the Function #

As soon as the AJAX response loads and iWantToDebugYou is assigned, our wrapper takes over. When the function is called (iWantToDebugYou(); in the AJAX script), Chrome will pause at the debugger; statement in our wrapper.

From here, you can:

• Step into the original function using the debugger’s "Step Into" button (F11) to inspect the dynamically loaded code line-by-line
• Check local variables, call stacks, and modify values on the fly to diagnose the bug
• Inspect the originalFunction variable in the console to see the full source of the dynamically loaded code

Alternative: Use Chrome’s XHR Breakpoints #

If you prefer a more straightforward approach without writing a wrapper, you can use Chrome’s built-in XHR breakpoints:

1. Go to the Sources panel in DevTools
2. Expand the XHR/fetch Breakpoints section
3. Click Add breakpoint and enter ajax/function (the URL of your AJAX endpoint)
4. Trigger the AJAX request—Chrome will pause right before the response script executes
5. You can then navigate to the dynamically loaded script in the debugger and set breakpoints directly in iWantToDebugYou before it runs

Important Notes #

• Make sure to run the wrapper code before the AJAX request starts—if the function is already defined by the time you set up the hook, the setter won’t trigger.
• If the function isn’t global (e.g., it’s inside a closure), this wrapper method won’t work—but in your example, it’s a global function, so this is perfect.
• Once you’re done debugging, you can restore the original function with:

  window.iWantToDebugYou = window._original_iWantToDebugYou;
  

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