5 Crazy Hacks Using Inspect Element

5 Crazy Hacks Using Inspect Element

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).

Image for post

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.

Image for post

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.

Image for post

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.

Image for post

Open the <div> tag under input type. Change the type from password to text, and you will see the uncovered password.

Image for post

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.

Image for post

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.

Image for post

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.

Image for post

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.

  1. Open Inspect Element.
  2. Go to the Console tab.
  3. Enter

document.body.contentEditable=true

Image for post

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,

  1. Open Inspect Element
  2. Go to the Console Tab
  3. In the Console Tab, enter

document.body.contenEditable = false

Image for post

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.

  1. Open Inspect Element
  2. Go to the body tag and copy the body ID

Image for post

  1. Go to the Console Tab and enter

document.getElementById(?your_body_id?).innerHTML = document.getElementById(?your_body_id?).innerHTML.replace(/FIND/g, ?REPLACE?);

Image for post

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!

1

No Responses

Write a response