DEV Community

Cover image for 2 Quick Tips when working with JS console output
Tony
Tony

Posted on

30 4

2 Quick Tips when working with JS console output

Here are 2 quick tips you can use when working with the output from JS console:

1) Displaying data

If you are displaying arrays or objects, use console.table rather than console.log:

// try running this:

console.table([
    { firstName: 'John', lastName: 'Doe', age: 2 },
    { firstName: 'William', lastName: 'Shakespeare', age: 3 },
]);
Enter fullscreen mode Exit fullscreen mode

This will display the data in a nice tabular view as shown below:

Alt Text

2) Copying data

If you are working with Google Chrome & need to copy data from the console output, instead of manually highlighting & copying the data, you can run this:

const data = [2, 3, 4];
copy(data);
Enter fullscreen mode Exit fullscreen mode

This will copy the data to your clipboard.

NOTE: the copy command is only available on Chrome & not on the node.js env.


Have fun coding! 🎉

Top comments (20)

Collapse
 
carlyraejepsenstan profile image
CarlyRaeJepsenStan •

the copy command looks pretty useful! no more pressing command for me haha

Collapse
 
tawn33y profile image
Tony • • Edited

Haha, it was a lifesaver for me too, especially when copying large portions of data. No more scrolling as I highlight the data!

Collapse
 
carlyraejepsenstan profile image
CarlyRaeJepsenStan •

Combine copy() with DOM scripts and it's supercharged :)

Thread Thread
 
tawn33y profile image
Tony •

Sounds interesting.. Can you give an example/application of this?

Thread Thread
 
carlyraejepsenstan profile image
CarlyRaeJepsenStan • • Edited

This pastebin: pastebin.com/stZdBA45
It's about 68,000 characters long! That's a ton of dragging,
But, it's only one line long (for some reason) and is contained inside <div class="de1"></div>.

So,

var a = document.querySelector(".de1").innerText
copy(a)

And, it's copied 👌

Or for all pastebins, querySelect ".textarea" to get the raw paste data.

Thread Thread
 
tawn33y profile image
Tony •

🙌 I get your point now, and I can see how easier this is with the above.
Thanks for sharing!

Thread Thread
 
carlyraejepsenstan profile image
CarlyRaeJepsenStan •

"The best part about being a developer is flexing to your friends how good you are at copying 68,000 characters in 3 seconds." 😂

Collapse
 
steinidj profile image
SteiniDJ •

Adding on to this, if you're logging a variable in your code, you can copy it to your clipboard by right clicking the console output and selecting "Store as global variable". You can then copy the result to your clipboard with copy(temp1)

Collapse
 
tawn33y profile image
Tony •

I didn't know this. Thanks for sharing!

Collapse
 
myogeshchavan97 profile image
Yogesh Chavan • • Edited

For console.table, Instead of displaying all the fields, you can even pass the fields to be displayed as an array like this:

console.table([
    { firstName: 'John', lastName: 'Doe', age: 2 },
    { firstName: 'William', lastName: 'Shakespeare', age: 3 },
], ['firstName', 'lastName']);

So it will just display firstName and lastName. It's very handy when there are a lot of fields and we want only some of the fields

Collapse
 
tawn33y profile image
Tony •

This is quite handy. Thanks for the tip!

Collapse
 
timgh101 profile image
timgh101 •

I didn't know either, very useful. Thank you.

Collapse
 
tawn33y profile image
Tony •

Glad you learned something new. You're welcome! 😃

Collapse
 
myogeshchavan97 profile image
Yogesh Chavan •

You can find some more useful tips here

Collapse
 
timgh101 profile image
timgh101 •

Thank you!

Collapse
 
loanck profile image
LoanCk •

thanks for the copy command

Collapse
 
tawn33y profile image
Tony •

You're welcome!

Collapse
 
luiyit profile image
Luiyit Hernandez •

Useful, Thanks for sharing!

Collapse
 
tawn33y profile image
Tony •

Cheers!

Collapse
 
asifurrahamanofficial profile image
Asifur Rahaman •

Cool

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay