puppeteer：在 DevTools 的网络选项卡中访问特定请求的 JSON 响应答案

【问题标题】：puppeteer: Access JSON response of a specific request as in the network tab of DevToolspuppeteer：在 DevTools 的网络选项卡中访问特定请求的 JSON 响应
【发布时间】：2019-08-20 00:46:12
【问题描述】：

我想直接获取屏幕截图中显示的最后一个 HTTP 请求的响应。

当前的 puppeteer 代码如下所示。谁能告诉我如何修改它，以便它直接从浏览器获取 JSON 响应？谢谢。

const puppeteer = require('puppeteer');

(async () => {
    //  const browser = await puppeteer.launch();
    const browser = await puppeteer.launch({
        headless: false
        , args: ['--user-agent="Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3312.0 Safari/537.36"']
    });
    const page = await browser.newPage();
    await page.goto('https://www.genecards.org/cgi-bin/carddisp.pl?gene=BSCL2');
    await page.goto('https://www.genecards.org/cgi-bin/carddisp.pl?gene=BSCL2');

    const linkHandlers = await page.$x("//div[@id='enhancers']//a[@data-track-event='Table See-All']");
    if (linkHandlers.length > 0) {
        await linkHandlers[0].click();
    } else {
        throw new Error("Link not found");
    }

    const html = await page.content()
    //await browser.close();
    console.log(html)
})();

【问题讨论】：

标签： node.js google-chrome-devtools puppeteer

【解决方案1】：

您可以使用page.waitForResponse 等待响应，并使用response.json 将响应解析为 JSON。

代码

将await linkHandlers[0].click(); 部分替换为：

const [response] = await Promise.all([
    page.waitForResponse(response => response.url().includes('/gene/api/data/Enhancers')),
    linkHandlers[0].click()
]);
const dataObj = await response.json();
console.log(dataObj);

这将首先等待响应（同时进行点击）。检测到响应后，响应被解析为 JSON。要获取纯文本形式的响应结果（而不是解析它），您可以使用response.text()

【讨论】：

谢谢。 response 周围的方括号是什么意思？
@user1424739 那是destructuring assignment。 Promise.all 将返回两个结果作为一个数组（有两个元素），但我的代码只取第一个结果（因为这是我们唯一需要的）。