Puppeteer: trace.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
  • ํ”Œ๋žซํผ / OS ๋ฒ„์ „: Mac OSX 10.13
  • URL(ํ•ด๋‹น๋˜๋Š” ๊ฒฝ์šฐ): google.com

๊ฐ€์žฅ ์œ ์šฉํ•œ ๋Œ“๊ธ€

์ถ”์  ์Šคํฌ๋ฆฐ์ƒท์„ ๋‚ด๋ณด๋‚ด๋ ค๋ฉด ๋ฌธ์ œ 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();
})();

๋ชจ๋“  3 ๋Œ“๊ธ€

@kesava ์Šคํฌ๋ฆฐ์ƒท์ด ์ถ”์ ์— ํฌํ•จ๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค. trace.json ํŒŒ์ผ์„ devtools ์„ฑ๋Šฅ ํŒจ๋„๋กœ ๋Œ์–ด๋‹ค ๋†“์œผ์‹ญ์‹œ์˜ค.

์ถ”์  ์Šคํฌ๋ฆฐ์ƒท์„ ๋‚ด๋ณด๋‚ด๋ ค๋ฉด ๋ฌธ์ œ 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 ํฌ๋กฌ์ด ์ถฉ๋Œํ•˜๋ฉด ์‹คํŒจํ•˜๋Š” ๊ฒƒ ๊ฐ™์•„์š”.
ํฌ๋กฌ์ด ์ถฉ๋Œํ•˜๋Š” ์‹œ์ ์„ ์•Œ ์ˆ˜ ์žˆ๋„๋ก ์ด๊ฒƒ์„ ์–ด๋–ป๊ฒŒ ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๊นŒ?

์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰