本文へスキップ
バージョン: 22.5.0

デバッグ

Puppeteer を使用したデバッグは困難な作業になる可能性があります。Puppeteer はネットワークリクエストや Web API など、ブラウザの多くの異なるコンポーネントに影響を与えるため、考えうるすべての問題をデバッグするための単一の方法は存在しません。良い点として、Puppeteer は、可能な限りすべての問題をカバーする複数のデバッグ方法を提供しています。

背景​

一般的に、問題には2つの可能な原因があります。Node.js で実行されるコード（サーバーサイドコードと呼びます）と、ブラウザで実行されるコード（クライアントサイドコードと呼びます）。ブラウザ自体が原因である可能性（内部コードと呼びます）も3つ目の原因として考えられますが、以下の方法を試した後これが原因だと疑う場合は、既存の問題を検索することをお勧めします。問題を報告する前に。

あらゆる状況に対応するデバッグ方法​

これらの方法は、あらゆる状況のデバッグに使用できます。より複雑な方法に進む前に、迅速な健全性チェックとして使用する必要があります。

headless をオフにする​

ブラウザに表示されている内容を確認することが役立つ場合があります。headless モードで起動する代わりに、headless を false に設定して、ブラウザのフルバージョンを起動します。

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

Puppeteer の "slow-mo"​

slowMo オプションを使用すると、指定したミリ秒数だけ Puppeteer の操作速度を遅くすることができます。これも何が起こっているのかを確認するのに役立つ方法です。

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

クライアントサイドコードのデバッグ方法​

console.* 出力のキャプチャ​

クライアントサイドコードはブラウザで実行されるため、クライアントサイドコードで console.* を実行しても、Node.js に直接ログ出力されません。ただし、リスン（page.on）を使用してconsole イベントを監視できます。これにより、ログ出力されたテキストを含むペイロードが返されます。

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

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

ブラウザでデバッガを使用する​

  1. Puppeteer の起動時にdevtools を true に設定します。

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

  2. デバッグするクライアントサイドコードに debugger を追加します。たとえば、

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

    ブラウザは、デバッグモードでdebuggerという単語が見つかった場所で停止します。

サーバーサイドコードのデバッグ方法​

Node.js でデバッガを使用する（Chrome/Chromium のみ）​

サーバーサイドコードはクライアントサイドコードと密接に関連しているため、このデバッグ方法はブラウザと密接に関連しています。たとえば、サーバー側のスクリプトでawait page.click()をステップオーバーし、ブラウザでクリックが実行される様子を確認できます。

このChromiumのバグのため、DevToolsコンソールでawait page.click()を実行することはできません。そのため、何かを試したい場合は、テストファイルに追加する必要があります。

  1. headless を false に設定します。

  2. デバッグするサーバーサイドコードに debugger を追加します。たとえば、

    debugger;
    await page.click('a[target=_blank]');

  3. サーバーサイドコードを --inspect-brk を使用して実行します。たとえば、

    node --inspect-brk path/to/script.js

  4. 開いた Chrome/Chromium ブラウザで、chrome://inspect/#devices を開き、「inspect」をクリックします。

  5. 新しく開いたテストブラウザで、F8キーを押してテストの実行を再開します。

  6. これで、debugger ステートメントがヒットし、テストブラウザでデバッグできるようになります。

DevTools プロトコル トラフィックのログ出力​

それでも問題が解決しない場合は、Puppeteer と DevTools プロトコルとの間に問題がある可能性があります。スクリプトを実行する前に DEBUG 環境変数を設定することで、これをデバッグできます。これにより、debug を使用して、puppeteer 名前空間の下で内部トラフィックがログ出力されます。

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

# Prevent truncating of long messages
env DEBUG="puppeteer:*" env DEBUG_MAX_STRING_LENGTH=null 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'

# Filter out all protocol messages but keep all other logging
env DEBUG="puppeteer:*,-puppeteer:protocol:*" node script.js