헤드리스 모드 사용 중지
브라우저가 표시하는 내용을 확인하는 것이 유용할 때가 있습니다. 헤드리스 모드로 실행하는 대신 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 });
기본 테스트 제한 시간 변경
- jest:
jest.setTimeout(100000);
- 재스민:
jasmine.DEFAULT_TIMEOUT_INTERVAL = 100000;
- mocha:
this.timeout(100000);
('=>'가 아니라 함수를 사용하도록 테스트를 변경하는 것을 잊지 마세요.)
디버거가 내부에 있는 평가 문을 추가하거나 기존 Assessment 문에 디버거를 추가합니다.
await page.evaluate(() => {
debugger;
});
그러면 위의 평가 문에서 테스트 실행이 중지되고 Chromium이 디버그 모드에서 중지됩니다.
node.js에서 디버거 사용
이를 통해 테스트 코드를 디버그할 수 있습니다. 예를 들어 node.js 스크립트에서 await page.click()
를 단계별로 하면 애플리케이션 코드 브라우저에서 클릭이 발생하는 것을 확인할 수 있습니다.
Chromium 버그 833928로 인해 DevTools 콘솔에서 await page.click()
를 실행할 수 없습니다.
따라서 기능을 사용해 보려면 테스트 파일에 추가해야 합니다.
- 테스트에 디버거를 추가합니다. 예:
javascript debugger; await page.click('a[target=_blank]');
- 헤드리스를 false로 설정합니다.
--inspect-brk
노드를 실행합니다(예:node --inspect-brk node_modules/.bin/jest tests
).- Chrome에서
chrome://inspect/#devices
를 열고inspect
를 클릭합니다. - 새로 열린 테스트 브라우저에서
F8
를 입력하여 테스트 실행을 재개합니다. - 이제 디버거에 연결되었으며 테스트 브라우저에서 디버그할 수 있습니다.
상세 로깅 사용 설정
내부 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 내에서 테스트를 디버그하세요!