在現(xiàn)代 Web 開發(fā)中，前端頁面與后端服務(wù)之間的交互頻繁依賴于各種接口請(qǐng)求。無論是調(diào)試前端代碼、分析網(wǎng)絡(luò)性能，還是進(jìn)行安全測試，能夠監(jiān)聽并打印網(wǎng)頁的接口請(qǐng)求都是非常有用的。而 Puppeteer，這個(gè)由谷歌開發(fā)的 Node 庫，為我們提供了一個(gè)強(qiáng)大的工具來實(shí)現(xiàn)這一目標(biāo)。

一、Puppeteer 簡介

Puppeteer 是一個(gè) Node 庫，它提供了高級(jí)的 API 來通過 DevTools 協(xié)議控制 Chrome 或 Chromium。它默認(rèn)以無頭模式運(yùn)行，但也可以配置為運(yùn)行“有頭”模式。借助 Puppeteer，我們可以生成頁面截圖和 PDF、爬取 SPA（單頁應(yīng)用）并生成預(yù)渲染內(nèi)容、自動(dòng)化表單提交、UI 測試、鍵盤輸入等。在我們的場景中，它還可以幫助我們監(jiān)聽并打印網(wǎng)頁的接口請(qǐng)求。

二、準(zhǔn)備工作

在開始之前，你需要確保你的開發(fā)環(huán)境中已經(jīng)安裝了 Node.js 和 npm（Node 包管理器）。然后，你可以通過 npm 安裝 Puppeteer。

npm install puppeteer

安裝完成后，你就可以開始編寫代碼來監(jiān)聽并打印網(wǎng)頁的接口請(qǐng)求了。

三、監(jiān)聽并打印接口請(qǐng)求的代碼實(shí)現(xiàn)

以下是一個(gè)簡單的示例代碼，展示如何使用 Puppeteer 監(jiān)聽并打印網(wǎng)頁的接口請(qǐng)求。

const puppeteer = require('puppeteer');

(async () => {
  // 啟動(dòng)瀏覽器
  const browser = await puppeteer.launch({
    headless: false, // 設(shè)置為 false 方便觀察瀏覽器行為
    slowMo: 50, // 放慢執(zhí)行速度，方便觀察
  });

  // 打開新頁面
  const page = await browser.newPage();

  // 監(jiān)聽網(wǎng)絡(luò)請(qǐng)求
  page.on('request', request => {
    if (request.method() === 'GET') {
      console.log(`GET 請(qǐng)求: ${request.url()}`);
    } else if (request.method() === 'POST') {
      console.log(`POST 請(qǐng)求: ${request.url()}`);
      console.log(`POST 請(qǐng)求數(shù)據(jù): ${request.postData()}`);
    }
    request.continue(); // 繼續(xù)處理請(qǐng)求
  });

  // 打開目標(biāo)網(wǎng)頁
  await page.goto('https://example.com');

  // 等待一段時(shí)間，觀察接口請(qǐng)求
  await page.waitForTimeout(5000);

  // 關(guān)閉瀏覽器
  await browser.close();
})();

代碼解析

啟動(dòng)瀏覽器：通過 puppeteer.launch 方法啟動(dòng)瀏覽器。你可以設(shè)置 headless 參數(shù)為 false，以便在調(diào)試時(shí)能夠看到瀏覽器的界面。

打開新頁面：使用 browser.newPage 方法打開一個(gè)新頁面。

監(jiān)聽網(wǎng)絡(luò)請(qǐng)求：通過 page.on('request', ...) 方法監(jiān)聽頁面的網(wǎng)絡(luò)請(qǐng)求。當(dāng)頁面發(fā)出請(qǐng)求時(shí)，會(huì)觸發(fā)這個(gè)事件。你可以通過 request.method() 獲取請(qǐng)求方法（如 GET、POST），通過 request.url() 獲取請(qǐng)求的 URL，對(duì)于 POST 請(qǐng)求，還可以通過 request.postData() 獲取請(qǐng)求的正文數(shù)據(jù)。

繼續(xù)處理請(qǐng)求：在監(jiān)聽到請(qǐng)求后，調(diào)用 request.continue() 方法繼續(xù)處理請(qǐng)求。如果不調(diào)用這個(gè)方法，請(qǐng)求會(huì)被攔截，頁面將無法正常加載。

打開目標(biāo)網(wǎng)頁：使用 page.goto 方法打開目標(biāo)網(wǎng)頁。你可以將 'https://example.com' 替換為你想要監(jiān)聽接口請(qǐng)求的網(wǎng)頁地址。

等待一段時(shí)間：通過 page.waitForTimeout 方法等待一段時(shí)間，以便觀察頁面加載過程中發(fā)出的接口請(qǐng)求。

關(guān)閉瀏覽器：最后，通過 browser.close 方法關(guān)閉瀏覽器。

基于上面的代碼，再完善一個(gè)，于json格式輸出

async function printPageRequests(url = 'https://www.baidu.com', action = '', format = 'txt') {
  console.log(TAG, `printPageRequests start, url:${url}, action:${action}', format:${format}`)
  // const browser = await puppeteer.launch({ headless: false });
  const browser = await puppeteer.launch({headless: true});
  const page = await browser.newPage();

  page.on('request', (request) => {
    // const resourceType = request.resourceType();
    // if (resourceType === 'fetch') {
    //   console.log(`Fetch Request: ${request.method()} ${request.url()}`);
    // }
    request.continue();
  });

  page.on('response', async (response) => {
    const request = response.request();
    const resourceType = request.resourceType();
    if (resourceType === 'fetch' || resourceType === 'xhr') {
      const requestInfo = `Fetch Response: ${request.method()} ${request.url()} - Status: ${response.status()} `
      if (action === 'printBody') {
        if (format === 'txt') {
          try {
            // 嘗試獲取響應(yīng)內(nèi)容
            const responseBody = await response.text();
            console.log(`${requestInfo} txt Body: ${responseBody}`);
          } catch (error) {
            console.error(`${requestInfo}, Failed to get response body: ${error}`);
          }
        } else if (format === 'json') {
          try {
            // 嘗試獲取響應(yīng)內(nèi)容
            const responseBody = await response.json();
            console.log(`${requestInfo}, Response json Body: ${JSON.stringify(responseBody, null, 2)}`);
          } catch (error) {
            console.error(`Failed to get response body: ${error}`);
          }
        }
      }
    }
  });

  await page.setRequestInterception(true);

  try {
    console.log(`Navigating to ${url}`);
    await page.goto(url, {timeout: 60000});
    console.log(`Navigation completed`);
  } catch (error) {
    if (error.name === 'TimeoutError') {
      console.error(`Navigation timeout exceeded for ${url}`);
    } else {
      throw error;
    }
  }

  await browser.close();
  console.log(TAG, 'printPageRequests end')
}

看一個(gè)效果，txt格式

再看一個(gè)效果，json格式

PS：上面是我把代碼放到了自己的一個(gè)工具集中，并使用了commander管理來不斷的豐富工具模塊

四、實(shí)際應(yīng)用場景

1.前端調(diào)試

在前端開發(fā)過程中，開發(fā)者常常需要了解頁面是如何與后端服務(wù)交互的。通過使用 Puppeteer 監(jiān)聽接口請(qǐng)求，開發(fā)者可以清晰地看到每個(gè)請(qǐng)求的 URL、請(qǐng)求方法、請(qǐng)求數(shù)據(jù)等信息，從而快速定位問題，提高調(diào)試效率。

2.網(wǎng)絡(luò)性能分析

通過監(jiān)聽并打印接口請(qǐng)求，我們可以分析每個(gè)請(qǐng)求的響應(yīng)時(shí)間、請(qǐng)求大小等信息，從而評(píng)估網(wǎng)頁的網(wǎng)絡(luò)性能。這對(duì)于優(yōu)化網(wǎng)頁加載速度、提升用戶體驗(yàn)非常有幫助。

3.安全測試

在安全測試中，監(jiān)聽接口請(qǐng)求可以幫助我們發(fā)現(xiàn)潛在的安全問題。例如，通過檢查請(qǐng)求數(shù)據(jù)是否包含敏感信息、請(qǐng)求的 URL 是否符合預(yù)期等，我們可以及時(shí)發(fā)現(xiàn)并修復(fù)安全漏洞。

五、注意事項(xiàng)

請(qǐng)求攔截的限制：雖然 Puppeteer 提供了強(qiáng)大的請(qǐng)求攔截功能，但它也有一些限制。例如，它無法攔截瀏覽器內(nèi)部的一些請(qǐng)求，如字體加載請(qǐng)求等。此外，對(duì)于一些復(fù)雜的請(qǐng)求，如帶有 WebSocket 的請(qǐng)求，監(jiān)聽和處理可能會(huì)更加復(fù)雜。

性能影響：監(jiān)聽并處理大量的請(qǐng)求可能會(huì)對(duì)瀏覽器的性能產(chǎn)生一定影響。在實(shí)際使用中，需要注意合理控制監(jiān)聽的范圍和頻率，避免對(duì)頁面的正常加載和運(yùn)行造成過大的干擾。

隱私和安全問題：在監(jiān)聽接口請(qǐng)求時(shí)，可能會(huì)涉及到一些敏感信息。因此，在使用 Puppeteer 監(jiān)聽接口請(qǐng)求時(shí)，需要注意保護(hù)用戶的隱私和數(shù)據(jù)安全，避免泄露敏感信息。

六、總結(jié)

通過使用 Puppeteer，我們可以輕松地監(jiān)聽并打印網(wǎng)頁的接口請(qǐng)求，這為前端調(diào)試、網(wǎng)絡(luò)性能分析和安全測試等提供了極大的便利。在實(shí)際開發(fā)和測試中，合理利用 Puppeteer 的這一功能，可以幫助我們更好地理解和優(yōu)化網(wǎng)頁的交互行為，提升開發(fā)效率和產(chǎn)品質(zhì)量。

到此這篇關(guān)于Node使用Puppeteer監(jiān)聽并打印網(wǎng)頁的接口請(qǐng)求的文章就介紹到這了,更多相關(guān)Puppeteer監(jiān)聽并打印網(wǎng)頁接口請(qǐng)求內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論