34

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.

Chrome Request Payload - view parsed

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

kenorb
  • 155,785
  • 88
  • 678
  • 743
navvn
  • 525
  • 2
  • 5
  • 9

5 Answers5

54

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.

Computer's Guy
  • 5,122
  • 8
  • 54
  • 74
  • 4
    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. – Hanlet Escaño Jan 11 '17 at 20:47
  • 3
    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) – Philip Murphy Mar 03 '20 at 15:52
  • 4
    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. – dtc Mar 30 '20 at 23:25
  • 1
    But if the request payload is more, it shows "..." and won't allow to copy complete details. – Satyam Apr 11 '20 at 11:09
  • 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. – Ashwini Mohan Jun 17 '20 at 11:02
  • I thought it was already selected because they use the default blue highlight color as the background color – ps2goat Jun 17 '21 at 23:12
24

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

enter image description here

Florin Grozea
  • 436
  • 4
  • 6
16
  1. Click on Network tab, click on item you are concerned with in the Name column. reference1
  2. Click on the payload content so that it highlights it in blue. reference2
  3. Click and drag mouse over content you want to copy, then ctl+c or right click -> copy reference image3
Community
  • 1
  • 1
Sethrs
  • 161
  • 1
  • 4
0

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. :)
Myg0t
  • 17
  • 2
  • 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))`. – arcquim Apr 23 '20 at 14:12
  • 2
    The question was about the _request_ payload though... – Pieter Feb 02 '22 at 08:18
0

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.

Kodali444
  • 1,283
  • 1
  • 17
  • 21