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

JavascriptGoogle ChromeObjectWebkit

Javascript Problem Overview


I am doing a console.log statement in my javascript in order to log a javascript object. I'm wondering if there's a way, once that's done - to copy that object as javascript code. What I'm trying to do is convert an object that was created using ajax to parse an xml feed into a static javascript object so that a file can run locally, without a server. I've included a screenshot of the object in the chrome inspector window so you can see what I'm trying to do.enter image description here

Javascript Solutions


Solution 1 - Javascript

  1. 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.

  2. Chrome also has a copy() method, so copy(temp1) in the console should copy that object to your clipboard.

Copy Javascript Object in Chrome DevTools

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.

Solution 2 - Javascript

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

Solution 3 - Javascript

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));

Solution 4 - Javascript

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

enter image description here

Solution 5 - Javascript

Follow the following steps:

  1. Output the object with console.log from your code, like so: console.log(myObject)
  2. 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".
  3. In the console, type: JSON.stringify(temp1).
  4. At this point you will see the entire JSON object as a string that you can copy/paste.
  5. You can use online tools like http://www.jsoneditoronline.org/ to prettify your string at this point.

Solution 6 - Javascript

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

Request Payload - > View Source

enter image description here

enter image description here

Solution 7 - Javascript

Update - Chrome 89

Right click -> Copy object

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

enter image description here

> also from debugger

enter image description here

Solution 8 - Javascript

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

Solution 9 - Javascript

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.

Solution 10 - Javascript

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;
  }, ' ');
}

Solution 11 - Javascript

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/

Solution 12 - Javascript

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.

Solution 13 - Javascript

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.

Solution 14 - Javascript

Add this to your console and execute

copy(JSON.stringify(foo));

This copies your JSON to clipboard

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionmheaversView Question on Stackoverflow
Solution 1 - JavascriptkevnkView Answer on Stackoverflow
Solution 2 - JavascriptSalman AView Answer on Stackoverflow
Solution 3 - JavascriptSudharshanView Answer on Stackoverflow
Solution 4 - JavascriptDavid CalhounView Answer on Stackoverflow
Solution 5 - JavascriptsufinawazView Answer on Stackoverflow
Solution 6 - JavascriptChristopher MarshallView Answer on Stackoverflow
Solution 7 - JavascriptOmerView Answer on Stackoverflow
Solution 8 - JavascriptDennis Araya BustamanteView Answer on Stackoverflow
Solution 9 - Javascriptuser1503606View Answer on Stackoverflow
Solution 10 - JavascriptdummkerView Answer on Stackoverflow
Solution 11 - JavascriptNeo_View Answer on Stackoverflow
Solution 12 - JavascriptHoldOffHungerView Answer on Stackoverflow
Solution 13 - JavascripttwalowView Answer on Stackoverflow
Solution 14 - Javascriptuser3294854View Answer on Stackoverflow