Puppeteer 不能在 page.evaluate 或 page.$$eval 内断点

Question

使用 Puppeteer 版本：“9.0.0”

不幸的是，在这个 puppeteer 版本中，chrome 开发工具中的调试根本不起作用。 所以我求助于NDB。 使用 NDB，我可以在除了 page.evaluate 函数和 page.$$eval() 之外的任何地方断点。

使用 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

似乎page.evaluate() 和类似的函数参数本身并没有执行：它们的序列化（字符串化）代码从 Node.js 上下文传输到浏览器上下文，然后从该代码重新创建一个新函数并在那里执行。这就是为什么初始函数中的断点对重新创建的函数没有影响的原因。