ChatGPT解决这个技术问题 Extra ChatGPT

Javascript / Chrome - How to copy an object from the webkit inspector as code

https://i.stack.imgur.com/RsxAB.png

Try using firefox and the option .toSource(). It's easier

k
kevnk

Right-click an object in Chrome's console and select Store as Global Variable from the context menu. It will return something like temp1 as the variable name. Chrome also has a copy() method, so copy(temp1) in the console should copy that object to your clipboard.

https://thumbs.gfycat.com/JadedUnsteadyFennecfox-size_restricted.gif

Note on Recursive Objects: If you're trying to copy a recursive object, you will get [object Object]. The way out is to try copy(JSON.stringify(temp1)) , the object will be fully copied to your clipboard as a valid JSON, so you'd be able to format it as you wish, using one of many resources.

If you get the Uncaught TypeError: Converting circular structure to JSON message, you can use JSON.stringify's second argument (which is a filter function) to filter out the offending circular properties. See this Stack Overflow answer for more details.


return undefined in chrome Version 49.0.2623.87 (64-bit) ? why >?
@PardeepJain - that is expected from the copy() method because there is nothing to return. The data should be in your clipboard.
This just gives [object Object] for me.
@Ullallulloo try logging out with JSON.stringify like this: stackoverflow.com/a/4293047/622287
it works only if you have a shallow JS object, if you have recursive deep object then will you ll get [Object Object] - that is expected
S
Salman A

In Chrome 89 or later you can simply right click an object in the console and choose Copy Object (ref). This also works in some other places inside Chrome Developer Tools e.g. whilst debugging or inside response tab for a network request.

Other option is to use the copy command as-is:

var x = { a: 1, b: 2 };
copy(x);

Original answer


I don't see how that would work unless you modify the code that logs it.
I get TypeError: Converting circular structure to JSON
S
Sudharshan

You can copy an object to your clip board using copy(JSON.stringify(Object_Name)); in the console.

Eg:- Copy & Paste the below code in your console and press ENTER. Now, try to paste(CTRL+V for Windows or CMD+V for mac) it some where else and you will get {"name":"Daniel","age":25}

var profile = {
    name: "Daniel",
    age: 25
};

copy(JSON.stringify(profile));

Doesn't work with DOM nodes, window or any other object that it's circular
By far the easiest solution for a large but simple object.
easiest solution
D
David Calhoun

You can now accomplish this in Chrome by right clicking on the object and selecting "Store as Global Variable": http://www.youtube.com/watch?v=qALFiTlVWdg

https://i.stack.imgur.com/U46xz.gif


As of Version 39.0.2171.95, the "Store as Global Variable" option is not available when inspecting Android devices with Chrome.
@David Calhoun, I voted for your answer. It looks like your answer was posted June 12, 2014 and the one accepted was Aug 5, 2014, largely taking exactly what you had. I have to admit that he mentions temp1 where your answer only shows it in your video, so maybe that's why the other answer was accepted. Best wishes.
H
HoldOffHunger

Follow the following steps:

Output the object with console.log from your code, like so: console.log(myObject) Right click on the object and click "Store as Global Object". Chrome would print the name of the variable at this point. Let's assume it's called "temp1". In the console, type: JSON.stringify(temp1). At this point you will see the entire JSON object as a string that you can copy/paste. You can use online tools like http://www.jsoneditoronline.org/ to prettify your string at this point.


Step with JSON.stringify(temp1) could affect to a long time execution if object is big.
@JoeTidee I had the same issue, but I set up a debugger statement and then retrieved my var directly from the console at the breakpoint.
C
Christopher Marshall

If you've sent the object over a request you can copy it from the Chrome -> Network tab.

Request Payload - > View Source

https://i.stack.imgur.com/d57Ux.png

https://i.stack.imgur.com/2NPRm.png


After copying parsed payload, you can format json from jsonformatter.curiousconcept.com.
O
Omer

Update - Chrome 89

Right click -> Copy object

source: (https://developers.google.com/web/updates/2021/01/devtools?utm_source=devtools)

https://i.stack.imgur.com/pitxr.png

also from debugger

https://i.stack.imgur.com/EeCIk.png


Do you know a way to keep properties that are undefined?
amm It's really not a solve one issue, but you can do manipulation to have the key and value if you have Object.entries({test: undefined, test2: 2}).map(([key,value])=>({key,value})) and after copy you will get [ { "key": "test" }, { "key": "test2", "value": 2 } ]
D
Dennis Araya Bustamante

you can console the object as string

var objToString = JSON.stringify(obj)
console.log(objToString );

Then in an editor like Notepad ++ paste de output and then ehit a plugin format

JSFormat


u
user1503606

This actually helped me out mine is a bit of an edge case. But for what I am doing it works.

The devices I am testing on use safari debug tools and I can never copy the objects like you can in Chrome simply right click and copy object.

Tried JSON.stringify and the pasting the contents into https://beautifier.io but then have to try reformat it.

I ended up using local storage and the copy method.

In your code use.

localStorage.setItem('dataCopy', JSON.stringify(data));

Then just paste this in the console and click enter.

copy(JSON.parse(window.localStorage.dataCopy))

You then have your array of objects in the clip board.


d
dummker

This should help stringify deep objects by leaving out recursive Window and Node objects.

function stringifyObject(e) {
  const obj = {};
  for (let k in e) {
    obj[k] = e[k];
  }

  return JSON.stringify(obj, (k, v) => {
    if (v instanceof Node) return 'Node';
    if (v instanceof Window) return 'Window';
    return v;
  }, ' ');
}

N
Neo_

Right click on data which you want to store

Firstly, Right click on data which you want to store -> select "Store as global variable" And the new temp variable appear like bellow: (temp3 variable): New temp variable appear in console

Second use command copy(temp_variable_name) like picture: enter image description here After that, you can paste data to anywhere you want. hope useful/


H
HoldOffHunger

Using "Store as a Global Variable" works, but it only gets the final instance of the object, and not the moment the object is being logged (since you're likely wanting to compare changes to the object as they happen). To get the object at its exact point in time of being modified, I use this...

function logObject(object) {
    console.info(JSON.stringify(object).replace(/,/g, ",\n"));
}

Call it like so...

logObject(puzzle);

You may want to remove the .replace(/./g, ",\n") regex if your data happens to have comma's in it.


t
twalow

So,. I had this issue,. except I got [object object]

I'm sure you could do this with recursion but this worked for me:

Here is what I did in my console:

var object_that_is_not_shallow = $("all_obects_with_this_class_name");
var str = '';
object_that_is_not_shallow.map(function(_,e){
    str += $(e).html();
});
copy(str);

Then paste into your editor.


D
David Buck

Add this to your console and execute

copy(JSON.stringify(foo));

This copies your JSON to clipboard