3 Website Tricks Using Chrome’s Developer Tools

Chrome’s Developer Tools are great for diagnosing or fixing problems with websites — even if you’re not a web developer. That said, you don’t need to know how to do everything with the browser’s tools, but there are a couple of useful tricks that are good to know.

Reveal form passwords

While Chrome comes with a built-in password manager that you can view at any time, it does require jumping through a few hoops. If you just want to reveal a form password (or any obfuscated text box) straight away, it’s simple enough to do using Chrome’s dev tools.

1. Right-click the password field and select “Inspect”. The “input” element should be automatically highlighted in the Developer Tools window.
2. Find the attribute “type” with the value “password” in the element and click it (see image above). Replace it with “text”.
3. Click out of the element to finalise the change.

The text in the password field should now show as normal.

[referenced url=”https://www.lifehacker.com.au/2018/03/chrome-now-lets-you-make-permanent-local-changes-to-the-source-code-of-any-website/” thumb=”https://www.lifehacker.com.au/wp-content/uploads/sites/4/2018/03/codinggreen.jpg” title=”Chrome Now Lets You Make Permanent, Local Changes To The Source Code Of Any Website” excerpt=”Modern browsers such as Firefox and Chrome come with built-in developer tools that let you edit web pages and see changes occur live. Sadly, they disappear as soon as you hit the refresh button. Now, with Chrome, you can have them stick around.”]

Delete obtrusive elements

Whether it be an auto-playing video or some full-screen overlay, the web is filled with annoying bits and pieces. But you don’t have to put up with them.

To delete an element, just right-click it, go to “Inspect” and press the Delete key (or right-click in the Developer Tools window and pick “Delete” from the context menu). Note that this is only temporary — if you refresh the page, the element will return.

To make these sorts of changes permanent (at least locally), look into Overrides.

Inspect, edit and delete cookies and local storage variables

Back in the day, you had the browser cache and cookies. That was it. Now, there’s local storage, session storage, databases and more to worry about. Each can contain information regarding login details and other persistent data.

Now, it’s possible to selectively delete data using Chrome’s standard settings, but if you want to drill down and wipe (or inspect) particular cookies or saved variables in local storage, you can with the “Application” tab of Developer Tools.

To view the data stored for a particular website / domain, open it up in a tab, press F12 (to bring up the Developer Tools window) and click the “Application” section. You can then check out individual cookies, peruse local / session storage or even edit variables.

Alternatively, you can just clear everything by hitting “Clear storage”, which can be useful if a website is acting up due to stale data (which happened to me recently — Google Maps refused to show anything, but worked fine in Incognito mode).