Browser console is a powerful tool, and sometimes we are not aware of its features, despite our every day use of it. Let's go through some useful tricks that can make you a bit more productive.

$0 – last inspected element

Have you ever wanted an easy way to check the scope of an element without any plugins? Try this trick: right-click on the wanted element and choose Inspect element option.

Then go to the console and paste this:

angular.element($0).scope();

$0 is a global variable with a reference to the last selected DOM node.

Browsers can remember up to five last inspected nodes, which will be stored in the global variables $1, $2, $3, $4 respectively.

$_ – last output

Sometimes you want access to the last output from the console. It is stored as $_ global variable.

Output as global variable

Let's say, you want to assign the last output as a global variable, to play with it in the console. You can easyily do this by using what we have just learned:

var temp = $_;

But what if you want to assign some value before the last output? There is a way to do that, by right-clicking the wanted output and selecting Store as global variable option:

After that, a global variable named temp1 will created. You can store as many things as you want, they will be stored in variables temp2, temp3, and so on.

Displaying array of objects

If you build JS applications, most probably you have worked with array of object and array of arrays. But did you know that there is a supercool way to display an array of objects or arrays in console?

Try this:

var users = [
  {
    name: "Alice",
    email: "alice@example.com",
    age: 26
  },
  {
    name: "Bob",
    email: "bob@example.com",
    age: 28
  }
];

console.table(users);

Copy to clipboard from JS

There is another small trick you can use for debugging. Let's say you have two objects and you want to diff between them in some diff-viewer.

You may find copy() command useful for this. It can be used from the console to copy global variable. This is often used together Store as Global Variable trick.

copy($_);

Do ⌘/Ctrl +V anywhere and see the object you have just copied.

There is more!

Don't stop here. If you want to find out more cool things, you can read about script blackboxing or console.assert() command.

Happy coding!