There are millions of websites on the internet today. And while they may have varying purposes, they?re all built with similar technologies and techniques. But when you?re building a site, it can be difficult to see what goes on under the hood.
For example, you visit a website and find a really cool feature in it, but don?t know how to implement that feature into your own website. This is where Inspect Element comes into play.
What is Inspect Element?
There?s a powerful tool concealed in your browser called Inspect Element.
Right-click on any webpage, click Inspect, and you can see the structure of that site: its source code, pictures, CSS, fonts and icons, Javascript code, and more. You can also access this tool by pressing Ctrl+Shift+I (For Mac, Cmd+Option+I).
Inspect Element is an easy tool that lets users interact with a website?s code and is invaluable for web developers. Here are 5 reasons things you can do using Inspect Element.
1. Downloading Images and Videos
You can see an image or video on a webpage, you can easily download it using Inspect Element.
Example:
I want to download the cover image of a Twitter profile. But there isn?t a direct way to download cover images from Twitter.
Right click on the cover image, choose to inspect this element and expand the <div> tag. Here, you can find the server link of the image. Copy and paste it in a new tab and download the image or video.
Using this method, you can download any image or video.
2. Reveal Passwords Hidden by Asterisks
Using Inspect Element, you can reveal passwords hidden by asterisks in login forms.
Example:
In the Inspect Element window, find the element tab. Look for the password field.
Open the <div> tag under input type. Change the type from password to text, and you will see the uncovered password.
3. See Hidden Content
Some webpages will have hidden elements, such as pop-ups. These pop-ups can obscure the content for a viewer. Inspect Element can be used to hide these pop-ups and view the content behind.
Example:
Take the Yekaliva website. It has a lot of great content, but sometimes it can be a bit obtrusive with pop-ups. These pop-ups will hide some content on the website.
If I want to read an article, it doesn?t make any sense to give them my email for a subscription. Here?s how you can remove those pop-ups.
Go to the element tab in Inspect Element and click on the cursor icon. Place the cursor on the pop-up box. Delete that particular <div> tag and you?ll find your content cleared of pop-ups.
Sometimes, there is also a transparent layer on these webpages that makes reading a bit difficult. To delete this layer, delete the same <div> tag for that element. Now your webpage should be free of pop-ups, making the webpage, easier to read.
4. Change the Title and Image on Webpages
Using Inspect Element, you can change titles and images to test and see what looks best on your webpage.
Example:
Take any web page.
- Open Inspect Element.
- Go to the Console tab.
- Enter
document.body.contentEditable=true
Now you can edit any element in your webpage, including the titles and images to see what works best for your site.
Once you?re done editing,
- Open Inspect Element
- Go to the Console Tab
- In the Console Tab, enter
document.body.contenEditable = false
This closes the edit option on the web page and no changes can be made. Keep in mind this is not a permanent change. It will be gone once you refresh the page.
5. Bulk Update
Sometimes there are multiple elements you would like to update on your webpage using Find and Replace. Here?s how you can do that.
- Open Inspect Element
- Go to the body tag and copy the body ID
- Go to the Console Tab and enter
document.getElementById(?your_body_id?).innerHTML = document.getElementById(?your_body_id?).innerHTML.replace(/FIND/g, ?REPLACE?);
Here, whatever you?ve mentioned in the place of ?FIND? will be replaced with whatever you have entered in ?REPLACE?. Remember to add the Body ID from the body tag to these commands.
Conclusion
These are just a few of the many uses for Inspect Element. There is quite a bit more to this amazing tool that makes it a godsend for web developers everywhere. Keep tuning in for more hacks and tips!
