CODEWITHSUNDEEP
javascriptgoogle-chromegoogle-chrome-extensiongoogle-chrome-devtools
Kai
Kai

Reputation: 61

Copy multiple network responses in chrome devtools network console

I want to copy all network responses from the filtered list of requests from the network tab under Chrome's devtools.

I read about the solution of copy all requests' URLs at Multiple URLs copy in Sources/Network tab But I can't figure out how to access the decoded response body from requests.

The solution at Chrome Devtools: Save specific requests in Network Tab works, but I want a solution that only extracts responses from the filtered request list under the network tab.

Upvotes: 5

Views: 5891

Answers (3)

barsikus07
barsikus07

Reputation: 21

for unknown reason, there is no contentData function on my edge 128.0.2739.79

so I changed @michael-phelps's answer a bit:

(async () => {
  const getContent = async r => r.url() && !r.url().startsWith('data:') && (await r.requestContent()).content;
  const nodes = UI.panels.network.networkLogView.dataGrid.rootNode().flatChildren();
  const requests = nodes.map(n => n.request());
  const contents = await Promise.all(requests.map(getContent));
  const looks = contents.map((data, i) => {
    const r = requests[i];
    const url = r.url();
    const content = !data ? 'data is encoded inside the data url already, duh' :
      r.contentType().isTextType() ? data :
        Common.ContentProvider.contentAsDataURL(data, r.mimeType, r.contentEncoded());
    return {url, content};
  });
  console.log(looks);
})();

Upvotes: 1

woxxom
woxxom

Reputation: 73556

Inspecting the source code of devtools reveals we need contentData() method.

The how-to-use instructions are the same as in Multiple URLs copy in Sources/Network tab.

await (async () => {
  const getContent = r => r.url() && !r.url().startsWith('data:') && r.contentData();
  const nodes = UI.panels.network.networkLogView.dataGrid.rootNode().flatChildren();
  const requests = nodes.map(n => n.request());
  const contents = await Promise.all(requests.map(getContent));
  return contents.map((data, i) => {
    const r = requests[i];
    const url = r.url();
    const body = data?.content;
    const content = !data ? url :
      r.contentType().isTextType() ? data :
        typeof body !== 'string' ? body :
          `data:${r.mimeType}${data.encoded ? ';base64' : ''},${body}`;
    return {url, content};
  });
})();

Tested in Chrome 111. For older versions of Chrome see the revisions of this answer.

Upvotes: 8

Michael Phelps
Michael Phelps

Reputation: 119

Update of @wOxxOm's excellent answer but for 2023:

(async () => {
  const getContent = r => r.url() && !r.url().startsWith('data:') && r.contentData();
  const nodes = UI.panels.network.networkLogView.dataGrid.rootNode().flatChildren();
  const requests = nodes.map(n => n.request());
  const contents = await Promise.all(requests.map(getContent));
  const looks = contents.map((data, i) => {
    const r = requests[i];
    const url = r.url();
    const content = !data ? 'data is encoded inside the data url already, duh' :
      r.contentType().isTextType() ? data :
        Common.ContentProvider.contentAsDataURL(data, r.mimeType, r.contentEncoded());
    return {url, content};
  });
  console.log(looks);
})();

Ran via the console when you're inspecting (CTRL+SHIFT+I) a popped out inspector window on the network tab. That's right, meta-inspection! CTRL+SHIFT+I

Upvotes: 2

Related Questions