Vitor Paladini

Posted on Sep 3, 2020 • Edited on Apr 15, 2021 • Originally published at paladini.dev

How to Copy a Big Object or Array From Console to Clipboard

#javascript #beginners #webdev #drops

Have you ever found yourself trying to Ctrl-C a console.log() output, only to get mad when it doesn't really work with long Objects and Arrays?

Here's what you should do instead:

1 - Right-click the console.log() output
2 - Click "Store as global variable"
3 - Run copy(temp1)
4 - Ctrl-V it wherever you want

Success! You may find that useful when debugging complex data structures or request payloads.

Let me know in the comments what else copy() might be useful for! 😄

Cover photo by Paolo Nicolello on Unsplash

Why the cover photo is a monkey? Well, I make the same face when I'm debugging.

Hey, let's connect 👋

Follow me on Twitter and let me know you liked this article!

And if you really liked it, make sure to share it with your friends, that'll help me a lot 😄

Top comments (15)

lionel-rowe • Sep 3 '20

Awesome tip, I never knew about copy before! In your example, you don't need to Store as global variable though — you could just copy(bigObject) directly.

Vitor Paladini • Sep 3 '20 • Edited

You're right! I've created bigObject so I could simulate something like:

fetch('http://example.com/movies.json')
  .then(response => response.json())
  .then(data => console.log(data.bigObject));

but I'm glad you caught that 😄

Claudio Cortese • Sep 4 '20

Nice tip, never heard of copy before!

bravemaster619 • Sep 4 '20

Good tip! My hack was this:

JSON.stringify(temp1);

with Command C, V.

Very uncomfortable compared to copy method

Marcell Cruz • Sep 3 '20

Great tip, but I think the gifs are a little bit too fast

Vitor Paladini • Sep 3 '20

Thanks for feedback, Marcell. I thought that would be the case...

I speed them up to decrease the overall frame count making each gif lighter, but I agree that it is looking a little intense 😬

I'll fix them and update the post, thanks!

Jon Randy 🎖️ • Sep 4 '20 • Edited

Or just use Firefox, right click and 'Copy object'. Firefox's dev tools really are better than Chrome's IMO

Madza • Sep 3 '20

A neat little trick that could come in handy at times 🔥👍

Vitor Paladini • Sep 3 '20

I'm stealing "neat little trick" for the name of this series, thanks 😄

Madza • Sep 3 '20

I feel a lot of 🔥🔥🔥 coming in the future! 💯

amegabosco • Sep 5 '20

Amazing ! Can you please share the tool used to generate the gif capture ?

Vitor Paladini • Sep 5 '20

Of course! I've used Kap for capturing it and Gif Brewery for optimizing it and making it faster 😄

Abdisalan • Sep 3 '20

Very useful! Thanks 👍🏾

Vitor Paladini • Sep 3 '20

Glad I could help!

RamMohan • Sep 3 '20

Definitely It will reduce my frustration while I'm debugging the code 👌

View full discussion (15 comments)

DEV Community

How to Copy a Big Object or Array From Console to Clipboard

Here's what you should do instead:

Hey, let's connect 👋

Top comments (15)

Read next

HTTPS for Django Development Environment

Unlock Security: OTP Generator with Email Verification using JavaScript

Implementing Auth in .NET WebApi & SPAs: Why is it still so painful?

Day 4: Enhancing UX with a Custom Cursor Using GSAP 🚀🎨