디버그 Puppeteer

헤드리스 모드 사용 중지

브라우저가 표시하는 내용을 확인하는 것이 유용할 때가 있습니다. 헤드리스 모드로 실행하는 대신 headless: false를 사용하여 전체 버전의 브라우저를 실행합니다.

const browser = await puppeteer.launch({ headless: false });

속도를 늦추세요

slowMo 옵션은 Puppeteer 작업 속도를 지정된 밀리초 단위로 지연시킵니다. 무슨 일이 일어나고 있는지 확인하는 데 도움이 되는 또 다른 방법입니다.

const browser = await puppeteer.launch({
  headless: false,
  slowMo: 250, // slow down by 250ms
});

콘솔 출력 캡처

console 이벤트를 수신 대기할 수 있습니다. 이 방법은 page.evaluate()에서 코드를 디버깅할 때도 유용합니다.

page.on('console', (msg) => console.log('PAGE LOG:', msg.text()));

await page.evaluate(() => console.log(`url is ${location.href}`));

애플리케이션 코드 브라우저에서 디버거 사용

실행 컨텍스트는 두 가지가 있습니다. 하나는 테스트 코드를 실행하는 node.js이고, 다른 하나는 애플리케이션 코드를 실행하는 브라우저입니다. 이렇게 하면 애플리케이션 코드 브라우저의 코드(evaluate() 내부의 코드)를 디버그할 수 있습니다.

Puppeteer 실행 시 {devtools: true} 사용

const browser = await puppeteer.launch({ devtools: true });

기본 테스트 제한 시간 변경

디버거가 내부에 있는 평가 문을 추가하거나 기존 Assessment 문에 디버거를 추가합니다.

await page.evaluate(() => {
  debugger;
});

그러면 위의 평가 문에서 테스트 실행이 중지되고 Chromium이 디버그 모드에서 중지됩니다.

node.js에서 디버거 사용

이를 통해 테스트 코드를 디버그할 수 있습니다. 예를 들어 node.js 스크립트에서 await page.click()를 단계별로 하면 애플리케이션 코드 브라우저에서 클릭이 발생하는 것을 확인할 수 있습니다.

Chromium 버그 833928로 인해 DevTools 콘솔에서 await page.click()를 실행할 수 없습니다. 따라서 기능을 사용해 보려면 테스트 파일에 추가해야 합니다.

  1. 테스트에 디버거를 추가합니다. 예: javascript debugger; await page.click('a[target=_blank]');
  2. 헤드리스를 false로 설정합니다.
  3. --inspect-brk 노드를 실행합니다(예: node --inspect-brk node_modules/.bin/jest tests).
  4. Chrome에서 chrome://inspect/#devices를 열고 inspect를 클릭합니다.
  5. 새로 열린 테스트 브라우저에서 F8를 입력하여 테스트 실행을 재개합니다.
  6. 이제 디버거에 연결되었으며 테스트 브라우저에서 디버그할 수 있습니다.

상세 로깅 사용 설정

내부 DevTools 프로토콜 트래픽은 Puppeteer 네임스페이스의 디버그 모듈과 함께 로깅됩니다.

# Basic verbose logging
env DEBUG="puppeteer:*" node script.js

# Protocol traffic can be rather noisy. This example filters out all Network
# domain messages
env DEBUG="puppeteer:*" env DEBUG_COLORS=true node script.js 2>&1 | grep -v '"Network'

Puppeteer (노드) 코드 디버그

ndb를 사용합니다.

  • npm install -g ndb (또는 npx 사용)
  • Puppeteer (노드) 코드에 디버거를 추가합니다.
  • 테스트 명령어 앞에 ndb (또는 npx ndb)를 추가합니다. 예를 들면 ndb jest 또는 ndb mocha (또는 npx ndb jest / npx ndb mocha)입니다.
  • 두목처럼 Chromium 내에서 테스트를 디버그하세요!