Puppeteer 中 main 函数和渲染器函数之间的通信

Question

有没有一种方法可以在 Puppeteer 中的主进程和渲染器进程之间进行通信，类似于Electron 中的ipcMain和ipcRenderer函数。

这篇文章展示了一个简单的应用程序。我发现此功能可通过触发从page主函数到主函数的事件进行调试，反之亦然。

Answer 1

调试： -木偶人都有一个用于调试的目的，在各页面的事件在这里。- Puppeteer 最近添加了 ASYNC 堆栈跟踪，以便您可以更精确地跟踪错误。

事件发射，您可以使用默认events模块并exposeFunction构建您自己的事件系统。

请参阅以下包含所有提到的方法的代码片段，

const EventEmitter = require("events");
const myEventTracker = new EventEmitter();
myEventTracker.on("some-event", function(...data) {
  // do something on event
  console.log(data);
});

// usage in puppeteer
const puppeteer = require("puppeteer");
puppeteer.launch({ headless: false }).then(async browser => {
  const page = await browser.newPage();

  // normal console events forwarded to node context
  page.on("console", msg => console.log(msg.text()));

  // we can use this to make our own reverse events
  myEventTracker.on("change-viewport", async function(data) {
    // do something on event
    await page.setViewport({ width: data.width, height: data.height });
  });

  // or we can expose the emit function
  await page.exposeFunction("emitter", (...data) =>
  myEventTracker.emit(...data)
  );

  // emit however we want
  await page.evaluate(async => {
    emitter("change-viewport", { width: 1200, height: 800 });
    emitter("some-event", "inside browser");
  });

  await page.goto("http://viewportsizes.com/mine/");
  // await browser.close();
});

如果我们想解释所有内容，它将成为一篇博文，否则我会更新我的答案。