How to copy Request Payload in Chrome on Mac?

Question

Recently I'm not able to copy a parsed request payload from Chrome DevTools. Button is disabled. I'm able to copy normal POST and GET request but not a parsed JSON payload.

This is huge pain in the ... Anyone know the solution for it?

Babble

Answer 1

Came to your question having the same problem.

My solution: Select the text with your mouse pointer and make sure you are not selecting more than the whole content, then try again.

I was selecting more than the contents by triple clicking it and it wouldn't let me copy, probably a bug in chrome.

Percuss

Nice one. Most people (me included) will probably double click the field until all is selected, not realizing that it is selecting outside of the "copyable" area. – Ensoul

Interesting as triple-clicking appears to be the only repeatable way that I can get it to select all the payload for copying. Thanks for mentioning that fact :) (Chrome version 80) – Bluefield

at this point, it just looks like a bad UI problem. a single click on the payload makes it look like it's already highlighted but i realized i can still drag to have a different shade for the actual highlighting. – Salade

But if the request payload is more, it shows "..." and won't allow to copy complete details. – Compassionate

If the Dev tool is having an option to copy request header then why not request payload. Weird and might be potentially a feature request. – Parenthesize

I thought it was already selected because they use the default blue highlight color as the background color 😔 – Dilapidate

Answer 2

you can switch between view-source and view-parsed. They are clickable options.

Donetsk

just to add, I did this but copy didn't work because the payload was too large & I had to select "Show more..." at the bottom first – Warfold

Answer 3

1. Click on Network tab, click on item you are concerned with in the Name column.
2. Click on the payload content so that it highlights it in blue.
3. Click and drag mouse over content you want to copy, then ctl+c or right click -> copy

Tenorrhaphy

Just wanted to double check: is this definitely on Mac or maybe Windows? – Sailfish

Answer 4

As of Oct 2023, you can copy the Payload directly as an object. Be sure to have the view below showing "view source" instead of "view parsed". In my experience, it doesn't make a difference in the content copied only in the pain of performing the copy.

Relatedly, you can also copy the entire request, including headers, payload (body), and other HTTP request metadata. Unfortunately or fortunately, the copying is program specific, so if it is a program you want to use, then it works amazingly. If you just want the JSON, the closest I've found is to "Copy as fetch" and remove the "fetch(...)" call from around the JSON object.

Sample copy from fetch below:

fetch("https://us-west-1-chat-server.frontapp.com/initialize", {
  "headers": {
    "accept": "application/json, text/plain, */*",
    "accept-language": "en-US,en;q=0.7",
    "cache-control": "no-cache",
    "content-type": "application/json",
    "pragma": "no-cache",
    "sec-ch-ua": "\"Brave\";v=\"117\", \"Not;A=Brand\";v=\"8\", \"Chromium\";v=\"117\"",
    "sec-ch-ua-mobile": "?0",
    "sec-ch-ua-platform": "\"macOS\"",
    "sec-fetch-dest": "empty",
    "sec-fetch-mode": "cors",
    "sec-fetch-site": "cross-site",
    "sec-gpc": "1"
  },
  "referrer": "https://better.com/",
  "referrerPolicy": "no-referrer-when-downgrade",
  "body": "{...}",
  "method": "POST",
  "mode": "cors",
  "credentials": "omit"
});

Bebe

Answer 5

Similarly to what @NickBrady said:

1. Click on the item that you would like under the network tab.
2. Click the Response tab.
3. Copy the response
4. In Chrome console type copy(JSON.parse('{paste the response}')) [hit enter] NOTE: You have to wrap the response in quotes for JSON.parse() to work.
5. The pretty formatted version of the response is now in your clipboard. Paste it where ever you need. :)

Collyer

Your suggestion worked for me, thanks a lot! Seems to be in the update 81 something has been changed in Chrome DevTools, and the way you suggested is the only one that works. I haven't found a way to copy request payload, so I have stored a part of it as a global variable temp1, and then typed copy(JSON.parse(temp1)). – Lailalain

The question was about the request payload though... – Inheritor

Answer 6

First you need to click on response, then all will be selected. now again on the selected response, you can select from where ever you need with the mouse left, and the just right-click on it. You will get it. I do like that only when I need form data.

Moonfish