Sometimes your browser has saved the password you’ve entered on a login form, but you can’t actually remember what it is.

You’re left staring at the ••••••••• in the password field and wondering if you’ll have to reset it again.

What if I told you there was a way to find out the password without having to reset it?

DevTools to the rescue!

(As usually, this lesson assumes that you’re browsing the internet using Chrome on a laptop or desktop computer).

Read these instructions, and then try them out on the login form below.

How to reveal a saved password using DevTools

Disclaimer: please only use this on your own passwords. Using it to log into your pet’s email would be morally questionable.

So what's going on here?

The <input> tag is used in HTML to specify places where the user can add information. This input could take the form of normal text, or buttons, checkboxes, dates, colours etc.

When your browser sees a form element with the type attribute set to “password”, it obscures the text to prevent prying eyes from seeing your password.

The default value for the type attribute is “text”, which means that as soon as you change the type from “password” to something else, your password is revealed.

Need help? Here's a quick runthrough


Posted to DevTools for Designers in 2016.

Join 2,286 readers receiving my thoughts on life, design and making stuff happen each Sunday