Puppeteer: tracing.start sepertinya tidak menampilkan tangkapan layar

Dibuat pada 18 Okt 2017 · 3Komentar · Sumber: puppeteer/puppeteer

Saya mencoba untuk mendapatkan contoh penelusuran dasar dengan opsi tangkapan layar yang diaktifkan berfungsi, namun, ini menghasilkan trace.json, tetapi tidak ada tangkapan layar.

(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();
})();

Apa hasil yang diharapkan?

Hasilkan tangkapan layar garis waktu bersama dengan trace.json

Apa yang terjadi sebagai gantinya?

Hanya menghasilkan trace.json. Tidak ada tangkapan layar yang dikeluarkan.

Menggunakan berikut ini

Versi dalang: 0.12.0
Versi platform / OS: Mac OSX 10.13
URL (jika ada): google.com

Sumber

kesava

Komentar yang paling membantu

Jika Anda ingin mengekspor tangkapan layar jejak, contoh cepat ini berdasarkan contoh @Everettss dalam edisi 1368 tampaknya berhasil untuk saya.

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 pada 14 Des 2017

👍3 ❤2

Semua 3 komentar

@kesava Tangkapan layar disematkan di jejak: coba drag-and-drop file trace.json ke panel kinerja devtools.

aslushnikov pada 31 Okt 2017

Jika Anda ingin mengekspor tangkapan layar jejak, contoh cepat ini berdasarkan contoh @Everettss dalam edisi 1368 tampaknya berhasil untuk saya.

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 pada 14 Des 2017

👍3 ❤2

@QmarkC Saya pikir itu gagal ketika chrome macet.
Bagaimana saya bisa menerapkan ini, sehingga saya bisa tahu di titik mana chrome mogok?