google-chrome-devtools - 通过 Chrome DevTools 协议(protocol)读取 DOMStorage/LocalStorage

Question

我知道以下代码片段允许我读取所有当前的 cookie:

let Main = await import('./main/main.js');
await Main.MainImpl.sendOverProtocol('Network.getCookies');

现在，出于测试目的，我需要获取所有可用信息 LocalStorage条目。我尝试了一些东西，但不幸的是我没有得到它。 Chrome DevTools 本身只使用已经可用的 securityOrigin 来查询它变量，我不知道它来自哪里:



我也找到了 Page.getFrameTree 但是缺少一些条目 - 所以我认为这与 LocalStorage 的条目无关:



我缺少的文档中还有其他方法吗？

编辑 #1

正如评论中提到的，我让它与 Page.getResourceTree 一起工作.不幸的是，我得到的下一个问题如下:

Protocol error (DOMStorage.getDOMStorageItems): Frame not found for the given security origin.

Answer 1

这足够了吗？

'use strict';

const puppeteer = require('puppeteer');

(async function main() {
  try {
    const browser = await puppeteer.launch();
    const [page] = await browser.pages();

    await page.goto('http://example.org/');

    await page.evaluate(() => { window.localStorage.setItem('foo', 42); });

    const cdp = await page.target().createCDPSession();

    const data = await cdp.send('DOMStorage.getDOMStorageItems', {
      storageId: {
        securityOrigin: await page.evaluate(() => window.origin),
        isLocalStorage: true,
      },
    });
    console.log(data);

    await browser.close();
  } catch (err) {
    console.error(err);
  }
})();

输出:

{ entries: [ [ 'foo', '42' ] ] }