對 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 });

變更預設測試逾時

  • jest: jest.setTimeout(100000);
  • 茉莉： jasmine.DEFAULT_TIMEOUT_INTERVAL = 100000;
  • mocha： this.timeout(100000); (別忘了將測試變更為使用函式，而非「=>」)

新增含有偵錯工具的評估陳述式，或將偵錯工具新增至現有的評估陳述式：

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

然後測試會在上述評估陳述式中停止執行，且 Chromium 會在偵錯模式下停止。

在 node.js 中使用偵錯工具

這可讓您對測試程式碼進行偵錯。例如，您可以跳過 node.js 指令碼中的 await page.click()，然後在應用程式程式碼瀏覽器中查看點擊發生的情況。

由於 Chromium 錯誤 833928，因此無法在開發人員工具控制台中執行 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. 現在偵錯工具已啟用，您可以在測試瀏覽器中偵錯

啟用詳細記錄功能

內部開發人員工具流量會透過 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)。
  • 像 Boss 一樣，在 Chromium 中對測試進行偵錯！