Here we will discuss some cool Inspect Element tips and tricks. Now, what is an Inspect Element? Well, consider any web page on the surface, all we see is a bunch of text with images and videos right? But, underneath that, they are made up of HTML, CSS, and JavaScript code. Inspect element is an easy tool, that lets the user, interact with those codes.
Now, the important question here is “Why should you care about this?” Now, what I mean to say is “It’s understandable to use Inspect Element if you are a web developer.” This is a very useful tool for web developers to experiment with the code. But if you are an average user then here are 5 cool tips and tricks on how you can use Inspect Elements. Do you know you can also get source code on any website?
5 Cool Inspect Element Tips and Tricks
You can do pretty cool stuff with your browser using Inspect Element. Well, here we will see 5 of such Inspect Element tips and tricks.
1. Download Anything
One good thing about the internet is if you can see it then you can download it. Using this trick you can download any image or a video, even if there is no download option.
Say, you want to download the cover image of the Twitter profile. Now, like always there is no direct way to do that.
So, what you can do is Right-click on the cover image and choose to inspect the element, and then expand the div. There you’ll find the server link of the image. Copy and paste it into a new tab and download it.
And same goes true for video or almost everything on the internet if you want to download anything.
2. Reveal Password Hidden in Asterisk
This one is a popular use of “Inspect Element” and I’m pretty sure most of you already know this. If you don’t know it, here’s how you can reveal passwords hidden in asterisks.
Say you want to log in to Amazon’s mobile app, but you don’t remember the password. But thankfully, it’s saved on your browser’s password manager. Although the browser hides the password in dots you can still easily reveal it using inspect elements.
Right-click on the password area, and click on Inspect Element. In the elements tab, scroll the pointer till the password field highlights. Then open the div tag and under input type replace password with text. Then click on the webpage, now you can see your password in visible plain text.
3. See Hidden Content
Now I have nothing against paying for high-quality content it is a good way to support the author. However, sometimes things may get a little overboard.
Many articles are hidden behind the paywall. To, read this article you have to pay, but you can bypass this by “Inspect Element“.
For example, some websites don’t allow you to use an adblocker or ask you to log in first to view the content. The web content is hidden behind this popup.
You can just right-click on the popup, select “Inspect Element“, and select the div element which highlights the popup and delete it. Now you can view the hidden content. In some cases, there is also a transparent layer. So, highlight that div element and delete it.
4. Change Website Content
Yes, it is true but not practical, you can use this trick to prank your friend. You can change the content on any website. So, it shows you not to true ever screenshots that are available on the internet.
To change the content on any website, just right-click on it and select “Inspect Element” Now on the tab choose “Console” and write this codedocument.body.contentEditable =true , and hit “Enter”.
Now close the console and you are ready to edit the content on the website.
Note: Once the website is refreshed your changes will not be saved on the webserver.
5. Bulk Update
Now the previous trick only applies to the webpage that is on your screen. The moment you refresh the page the changes you made are gone as well.
But, there is a practical implementation of this trick as well. You can you this trick on your mailing server or WordPress or any other editor that automatically saves the content on the server.
For example, you have written one blog post on WordPress and you have made a few spelling mistakes. So say, instead of raccoon have written racon. If you want to fix it, you have to do it manually.
But you can fix such a mistake within no time using “Inspect Element”. Yes, you can fix this by copying the content on a word processor and using the find and replace option. But it will mess up all your formatting. So, if you don’t want to mess up with the formatting then use the “Inspect Element”.
Now open the inspect element, and find the div id of the text area where you want to carry out the find and replace function. Once you get it, copy it to the clipboard.
Now go to the console tab and type the following code.
document.getElementById('divID').innerHTML = document.getElementById('divID').innerHTML.replace(/FIND/g, "REPLACE");Here replace the didID with the ID you copied and replace find and replace are with the word you want to fix, and hit “Enter”.
Since most editors have an autosave feature. It will automatically save to the server as well.
