Vignesh Rajendran5 min read·Jun 15, 2019--
There are millions of websites on the internet today. And while they may he 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, Jascript code, and more. You can also access this tool by pressing Ctrl+Shift+I (For Mac, Cmd+Option+I).
Press enter or click to view image in full sizeInspect 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 VideosYou 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.
Press enter or click to view image in full sizeRight click on the cover image, choose to inspect this element and expand the 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.
Press enter or click to view image in full sizeUsing this method, you can download any image or video.
2. Reveal Passwords Hidden by AsterisksUsing 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.
Press enter or click to view image in full sizeOpen the tag under input type. Change the type from password to text, and you will see the uncovered password.
Press enter or click to view image in full sizeSome webpages will he 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.
Press enter or click to view image in full sizeGo to the element tab in Inspect Element and click on the cursor icon. Place the cursor on the pop-up box. Delete that particular tag and you’ll find your content cleared of pop-ups.
Press enter or click to view image in full sizeSometimes, there is also a transparent layer on these webpages that makes reading a bit difficult. To delete this layer, delete the same tag for that element. Now your webpage should be free of pop-ups, making the webpage, easier to read.
Press enter or click to view image in full sizeUsing 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.Enterdocument.body.contentEditable=true
Press enter or click to view image in full sizeNow 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 ElementGo to the Console TabIn the Console Tab, enterdocument.body.contenEditable = false
Press enter or click to view image in full sizeThis 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 UpdateSometimes 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 ElementGo to the body tag and copy the body IDPress enter or click to view image in full sizedocument.getElementById(‘your_body_id’).innerHTML = document.getElementById(‘your_body_id’).innerHTML.replace(/FIND/g, “REPLACE”);
Press enter or click to view image in full sizeHere, whatever you’ve mentioned in the place of “FIND” will be replaced with whatever you he entered in “REPLACE”. Remember to add the Body ID from the body tag to these commands.
ConclusionThese 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!