How can I access the function call stack in Chrome and invoke it directly with Puppeteer?

I would like to obtain the function call stack in regular code execution instead of just when exceptions occur (not using new Error().stack). For instance, if I have a function myFunction triggered by a tag click, and its implementation is like this:

function myFunction() {

customFunction(); // customFunction is defined in another script

}

Now that I possess a reference to myFunction and the name of customFunction, is it possible to determine in which file customFunction is located and how many lines it has by invoking a specific function in Chrome or with Puppeteer?

Accessing the call stack for specific functions during regular execution, and not just when exceptions occur, is not directly supported via Puppeteer. However, you can leverage Puppeteer's capabilities in combination with Chrome DevTools Protocol for more advanced debugging and gathering insights about function implementations. Here's a practical approach to it:

You can attach a debugger to your page context using Puppeteer and set breakpoints programmatically to investigate call stacks:

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({
    headless: false,
    devtools: true,
  });
  const page = await browser.newPage();
  await page.goto('your_url');

  const client = await page.target().createCDPSession();

  // Enable debugging by setting up the debugger
  await client.send('Debugger.enable');

  // Set a breakpoint in your function
  await client.send('Debugger.setBreakpointByUrl', {
    lineNumber: 0, // Change to the appropriate line number
    urlRegex: '.*yourFile.js', // Match the specific file
  });

  client.on('Debugger.paused', async (debuggerEvent) => {
    const stackFrames = debuggerEvent.callFrames;
    console.log('Stack Frames:', stackFrames);

    await client.send('Debugger.resume');
  });

  await page.click('your_selector'); // Trigger action to pause with your function
})();

This script connects to Chrome's debugging protocol, setting a breakpoint, and logging the call stack when the function is invoked.

To locate customFunction, you can cross-reference the file obtained from the stack information. Remember, browser environments might optimize code execution, which could affect stack trace readability.

For gathering the specifics like the number of lines in a function, you might need to analyze the source code directly. A tool or custom script to scan and analyze JavaScript files on the server side (before bundling/minification) might be more effective for this part.

You can achieve this using Puppeteer with a little JS debugging magic:

const puppeteer = require(‘puppeteer’);
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto(‘your_url’);
await page.evaluate(() => {
const stack = new Error().stack;
console.log(stack);
});
await browser.close();
})();


This script will log the call stack. However, identifying the file and line count for a specific function directly isn’t straightforward with Puppeteer alone. Consider using browser dev tools manually for detailed information.

Accessing and analyzing the call stack in Chrome directly with Puppeteer for insights into function locations and implementations requires a mix of automation and manual inspection. Here's a concise approach:

Use Puppeteer's integration with Chrome DevTools Protocol to automate debugging:

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({
    headless: false,
    devtools: true,
  });
  const page = await browser.newPage();
  await page.goto('your_url');

  const client = await page.target().createCDPSession();

  // Enable debugging
  await client.send('Debugger.enable');

  // Set a breakpoint
  await client.send('Debugger.setBreakpointByUrl', {
    lineNumber: 10, // Adjust to your target's actual line
    urlRegex: '.*yourFile.js', // Use your file pattern
  });

  // Listen for debugger pause
  client.on('Debugger.paused', async (debuggerEvent) => {
    const callStack = debuggerEvent.callFrames;
    console.log('Call Stack:', callStack);

    await client.send('Debugger.resume');
  });

  await page.click('your_selector'); // Trigger the event
})();

This method will trigger a script pause and log the current call stack when the myFunction is activated, allowing you to trace its origin. For identifying customFunction, inspecting the output manually might help locate associated files and lines.

Consider using a source code analysis tool for deeper inspection of the JavaScript code on your server, especially if the code is minimized or compiled.