Puppeteer cannot breakpoint inside page.evaluate or page.$$eval - puppeteer

Question

Using Puppeteer version: "9.0.0"
Unfortunately debugging in chrome dev tools does not work at all with this puppeteer version.
So I resorted to NDB.
Using NDB I can breakpoint anywhere apart from inside page.evaluate function and page.$$eval().
Running the script with ndb:
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "ndb node startscrape.js"
},
startscrape.js
( async () => {
const browser = await puppeteer.launch(
{
headless: false,
defaultViewport:null,
slowMo: 250,
devtools:true,
});
const page = await browser.newPage();
await page.goto('https://www.google.com');
await page.type('input', 'Here' );
await page.keyboard.press('Enter');
await page.waitForNavigation();
let x = () => {
debugger;
console.log('can I debug here?') //YES - breakpoints work upon executing x();
};
x();
let xa = await page.evaluate(() => {
console.log('Alive'); // Logging works in console but cannot breakpoint
let elements = document.getElementsByClassName('someitem');
return elements;
});
// Cannot debug inside here too
// let xa = await page.$$eval('body', (body) => {
// console.log('Alive');
// let elements = document.getElementsByClassName('serp-item');
// return elements;
// });
// breakpoint comes here
await page.goto('https://www.google.com');
//await browser.waitForTarget(() => false);
})();

Answer 1

It seems the function arguments of page.evaluate() and similar ones are not executed per se: their serialized (stringified) code is transferred from the Node.js context into the browser context, then a new function is recreated from that code and executed there. That is why the breakpoints in the initial function have no effect on the recreated function.