Two tricks with the Chrome developer console

How to easily copy values to the clipboard, and how to pretty print objects and collections.

Copying to the clipboard with copy

Suppose you want to copy the value of a variable to the clipboard. Rather than printing it out and then manually selecting and copying it you can do:

1
2
3
4

const a = "Something to copy ...";
copy(a);

// Clipboard now has contents "Something to copy ..."

You can also copy objects, which will be stringified to JSON:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

const a = { 
    fruit: "banana",
    quantity: 10
};
copy(a);

/*
*  Clipboard now has contents:
*  {
*    "fruit": "banana",
*    "quantity": 10
*  }
*/

Pretty print with console.table

Use console.table to pretty print lists or objects in the developer console. For example:

1

console.table(["banana", "apple", "pear", "plum"]);

console table array

The rows can be sorted by clicking on the column headers.

You can also pretty print objects, for example:

1

console.table({ fruit: "banana", quantity: 12, price: 1.55 });

console table object

and an array of objects:

1
2
3

const receipt = [{ fruit: "banana", quantity: 12, price: 1.55 }, 
                 { fruit: "apple", quantity: 5, price: 0.67 }];
console.table(receipt);

console table array objects

References