Retrieving Javascript Objects from Chrome Devtools

I’m currently working on building rich text inputs for Flexteam.co using Facebook’s Draft.js. Right now I’m just working on the front-end, so there isn’t any functionality in place to store entries into the editor and then retrieve them to test initial content rendering.

Because the data structure returned from Draft.js is so complex, it’s not easy to just mock up some values to inject into the component . It’s far easier to log out some values from the component using console.log, but how do I go about storing a logged JS object?

Rich content (left), and the onChange-logged Draft.js JS object (right)

The quickest way that I found was to right-click on the most recent console.log statement, and store that value as a global variable. Then, using the copy() function that’s part of the debugger, I can store the JS object other to the clipboard, and copy it into a .js file for use as dummy data.

The globally-stored object and the copy() function

Ta-da!

{
"entityMap": {},
"blocks": [
{
"key": "dsffr",
"text": "This is not me encouraging you to go here and write a review. ",
"type": "unstyled",
"depth": 0,
"inlineStyleRanges": [],
"entityRanges": [],
"data": {}
},
{
"key": "13qjp",
"text": "",
"type": "unstyled",
"depth": 0,
"inlineStyleRanges": [],
"entityRanges": [],
"data": {}
},
{
"key": "d116v",
"text": "No. I just don't want him to point out my cracker ass in front of Ann. I thought the two of us could talk man-on-man. ",
"type": "unstyled",
"depth": 0,
"inlineStyleRanges": [
{
"offset": 3,
"length": 115,
"style": "ITALIC"
}
],
"entityRanges": [],
"data": {}
},
{
"key": "1t479",
"text": "",
"type": "unstyled",
"depth": 0,
"inlineStyleRanges": [],
"entityRanges": [],
"data": {}
},
{
"key": "hbkj",
"text": "Mr. Zuckerkorn, you've been warned about touching. You said spanking. Well, I hope you also carry a spare bowl of candy beans. It's one banana Michael, what could it cost, ten dollars? ",
"type": "unstyled",
"depth": 0,
"inlineStyleRanges": [
{
"offset": 127,
"length": 58,
"style": "BOLD"
}
],
"entityRanges": [],
"data": {}
},
{
"key": "9njp1",
"text": "",
"type": "unstyled",
"depth": 0,
"inlineStyleRanges": [],
"entityRanges": [],
"data": {}
},
{
"key": "7kbtn",
"text": "Everyone's laughing, and riding, and cornholing except Buster.",
"type": "unstyled",
"depth": 0,
"inlineStyleRanges": [],
"entityRanges": [],
"data": {}
}
]
}