ヘッドレス モードをオフにする
ブラウザの表示内容を確認すると便利な場合があります。ヘッドレス モードで起動するのではなく、headless: false を使用してブラウザのフルバージョンを起動します。
const browser = await puppeteer.launch({ headless: false });
スローダウン
slowMo オプションは、Puppeteer オペレーションを指定されたミリ秒数だけ遅くします。状況を確認するもう 1 つの方法です。
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}`));
アプリケーション コード ブラウザでデバッガを使用する
実行コンテキストは 2 つあります。テストコードを実行する Node.js と、テスト対象のアプリケーション コードを実行するブラウザです。これにより、アプリケーション コード ブラウザでコード（evaluate() 内のコード）をデバッグできます。
Puppeteer の起動時に {devtools: true} を使用する
const browser = await puppeteer.launch({ devtools: true });
デフォルトのテスト タイムアウトを変更する
- jest:
jest.setTimeout(100000); - jasmine:
jasmine.DEFAULT_TIMEOUT_INTERVAL = 100000; - mocha:
this.timeout(100000);（「=>」ではなく「関数」を使用するようにテストを変更することを忘れないでください）
内部にデバッガを含む評価ステートメントを追加するか、既存の評価ステートメントにデバッガを追加します。
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 内のテストを手軽にデバッグできます。