How to access inspected element in browser console

Today I would like to share a very useful trick I learned the other day – how to access previously inspected element in browser console.

Web developers do inspection on web pages almost all the time – Find the ID of an element? Inspect it. Find the size of an element? Inspect it. Find the type of an element? INSPECT IT!

1

Once you get what you want, often times, the next step would be to manipulate it with JavaScript, right? Some developers, including myself, like to test the JavaScript in the browser console first before putting it in the code. To find the inspected element, are you still using getElemenetById or using jQuery’s ID selector? These are NOT very productive! You have inspected the element already, so the console should know what element you are looking for, right? Yes, it does! Just type in $0 (dollar sign and zero), and hit Enter. It will get you the element you just inspected:

2

Now you can do all kinds of things with this handle. To demonstrate this, I just used jQuery to hide the element inspected.

3

Hope you find this trick useful!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s