2 Quick Tips when working with JS console output

#javascript #typescript #webdev #node

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

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

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

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)

CarlyRaeJepsenStan • Sep 23 '20

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

Tony • Sep 24 '20 • Edited

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

CarlyRaeJepsenStan • Sep 24 '20

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

Tony • Sep 25 '20

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

CarlyRaeJepsenStan • Sep 25 '20 • 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.

Tony • Sep 25 '20

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

CarlyRaeJepsenStan • Sep 25 '20

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

SteiniDJ • Sep 23 '20

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)

Tony • Sep 23 '20

I didn't know this. Thanks for sharing!

Yogesh Chavan • Sep 24 '20 • 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']);