Two tricks with the Chrome developer console


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
5
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
14
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
2
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
2
console.table({ fruit: "banana", quantity: 12, price: 1.55 });

console table object

and an array of objects:

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

console table array objects

References