跳到主要內容
版本：23.11.1

除錯

使用 Puppeteer 進行除錯可能是一項艱鉅的任務。由於 Puppeteer 涉及瀏覽器的許多不同組件，例如網路請求和 Web API，因此沒有 單一 方法可以除錯所有可能的問題。值得一提的是，Puppeteer 提供了 幾種 除錯方法，希望能涵蓋所有可能的問題。

背景​

一般而言，問題可能有兩種來源：在 Node.js 上執行的程式碼（我們稱之為伺服器程式碼），以及在瀏覽器中執行的程式碼（我們稱之為客戶端程式碼）。還有第三個可能的來源是瀏覽器本身（我們稱之為內部程式碼或瀏覽器程式碼），但是如果您在嘗試以下方法後懷疑這是來源，我們建議您在搜尋現有問題後，再提交問題。

適用於所有情況的除錯方法​

這些方法可用於除錯任何情況。在深入研究更複雜的方法之前，應該將這些方法用作快速的健全性檢查。

關閉headless​

有時查看瀏覽器顯示的內容很有用。不要在headless模式下啟動，而是使用設定為 false 的headless啟動瀏覽器的完整版本。

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

Puppeteer「慢動作」​

slowMo 選項會將 Puppeteer 操作速度減慢指定的毫秒數。這是另一種幫助了解正在發生的事情的方法。

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

客戶端程式碼的除錯方法​

捕捉 console.* 輸出​

由於客戶端程式碼在瀏覽器中執行，因此在客戶端程式碼中執行 console.* 不會直接記錄到 Node.js。但是，您可以監聽 (page.on)console 事件，該事件會傳回帶有記錄文字的 payload。

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

記錄擱置的通訊協定呼叫​

如果您遇到非同步 Puppeteer 呼叫未解析的問題，請嘗試使用debugInfo 介面記錄擱置的回呼，以查看哪個呼叫是原因

console.log(browser.debugInfo.pendingProtocolErrors);

getter 會傳回 Error 物件的清單，而錯誤物件的堆疊追蹤會指出哪個程式碼觸發了通訊協定呼叫。

瀏覽器程式碼的除錯方法​

如果瀏覽器意外當機或無法正確啟動，則將啟動屬性 dumpio 設定為 true，檢查瀏覽器處理程序的記錄可能會有用。

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

在這種情況下，Puppeteer 會將瀏覽器記錄轉發到 Node 處理程序的 stdio。