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

Question

在 Puppeteer 中有没有一种类似于 ipcMain and ipcRenderer functions in Electron.

的主进程和渲染进程之间的通信方式？

在此post中演示了一个简单的应用程序。我发现此功能可用于通过触发从 page 到主函数的事件进行调试，反之亦然。

Answer 1

调试中： - Puppeteer 有各种用于调试目的的页面事件 here。 - 最近使用 Puppeteer added ASYNC stack trace，因此您可以更准确地跟踪错误。

事件发射，您可以使用默认的 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();
});

这将成为一个博客post如果我们要解释所有，否则我会更新我的答案。

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

Communicating between the main and renderer function in Puppeteer

javascript

puppeteer