Puppeteer: tracking.start 似乎没有输出截图

创建于 2017-10-18 · 3评论 · 资料来源: puppeteer/puppeteer

我正在尝试使用启用了屏幕截图选项的工作来获取基本跟踪示例，但是，它会生成 trace.json，但没有屏幕截图。

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.tracing.start({screenshots: true, path: 'trace.json'});  
  await page.goto('https://www.google.com');
  await page.tracing.stop();  
  await browser.close();
})();

预期的结果是什么？

生成时间线屏幕截图以及 trace.json

相反会发生什么？

仅生成 trace.json。没有输出截图。

使用以下

木偶版：0.12.0
平台/操作系统版本：Mac OSX 10.13
网址（如果适用）：google.com

资料来源

kesava

最有用的评论

如果您确实想导出跟踪屏幕截图，这个基于issue 1368中@Everettss示例的快速示例似乎对我有用。

const puppeteer = require('puppeteer');
const fs = require('fs');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  await page.tracing.start({ screenshots: true, path: 'trace.json' });
  await page.goto('https://www.google.com', { timeout: 60000 });
  await page.tracing.stop();

  // --- extracting data from trace.json ---
  const tracing = JSON.parse(fs.readFileSync('./trace.json', 'utf8'));
  const traceScreenshots = tracing.traceEvents.filter(x => (
      x.cat === 'disabled-by-default-devtools.screenshot' &&
      x.name === 'Screenshot' &&
      typeof x.args !== 'undefined' &&
      typeof x.args.snapshot !== 'undefined'
  ));
  traceScreenshots.forEach(function(snap, index) {
    fs.writeFile('trace-screenshot-'+index+'.png', snap.args.snapshot, 'base64', function(err) {
      if (err) {
        console.log('writeFile error', err);
      }
    });
  });
  // --- end extracting data from trace.json ---

  await page.close();
})();

QmarkC 于 2017-12-14

👍3 ❤2

所有3条评论

@kesava屏幕截图嵌入在跟踪中：尝试将trace.json文件拖放到 devtools 性能面板中。

aslushnikov 于 2017-10-31

如果您确实想导出跟踪屏幕截图，这个基于issue 1368中@Everettss示例的快速示例似乎对我有用。

const puppeteer = require('puppeteer');
const fs = require('fs');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  await page.tracing.start({ screenshots: true, path: 'trace.json' });
  await page.goto('https://www.google.com', { timeout: 60000 });
  await page.tracing.stop();

  // --- extracting data from trace.json ---
  const tracing = JSON.parse(fs.readFileSync('./trace.json', 'utf8'));
  const traceScreenshots = tracing.traceEvents.filter(x => (
      x.cat === 'disabled-by-default-devtools.screenshot' &&
      x.name === 'Screenshot' &&
      typeof x.args !== 'undefined' &&
      typeof x.args.snapshot !== 'undefined'
  ));
  traceScreenshots.forEach(function(snap, index) {
    fs.writeFile('trace-screenshot-'+index+'.png', snap.args.snapshot, 'base64', function(err) {
      if (err) {
        console.log('writeFile error', err);
      }
    });
  });
  // --- end extracting data from trace.json ---

  await page.close();
})();

QmarkC 于 2017-12-14

👍3 ❤2

@QmarkC我认为当 chrome 崩溃时它会失败。
我该如何实现这一点，以便我可以知道 chrome 在哪一点崩溃？

ashiqdev 于 2020-02-08

此页面是否有帮助？

0 / 5 - 0 等级

Puppeteer: tracking.start 似乎没有输出截图

最有用的评论

所有3条评论

相关问题