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
- Right click (or Control + click) on the password field (underneath 'Ben')
- Click on 'Inspect' in the menu that pops up
- You should see a line of HTML selected in the 'Source' tab like this:
<input id="cm-password type="password"> - Double click on "password" after the equals sign in
type="password"and change it to something else. (Usually I just add an extra letter like an "x", but you could also change it to "text"). - The password field will now change from ••••••••• to reveal your password. Job done!
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.