7 Playful Things You Can Do With Inspect Element

For someone who is not familiar with or accustomed to coding or web development to get scared after accidentally opening the Inspect Element dialog box in Chrome. The mistake can happen by either pressing F12 or right-clicking on the web page. However, if you have visited that page ever and now want to know more about it, here’s our guide to tell you about 7 playful things you can do with inspect element in Google Chrome. We will also go over some fun things you can do with your browser’s developer tools and Inspect Element in this guide.
7 Playful Things You Can Do With Inspect Element

What Is Inspect Element?

Browsers provide Inspect Element, a developer tool that allows you to view and change the source code of any webpage. Developers and designers can use this tool to inspect and modify the front-end of any website.

The browser updates the webpage in real-time as you change the code. This change is only visible to you on one device and lasts only as long as your session on the website. As soon as you leave the page, all changes will be lost.

7 Playful Things You Can Do With Inspect Element

1. Download Images and Videos

7 Playful Things You Can Do With Inspect Element

Right-clicking and saving photos from the web is usually a simple process. However, you won’t be able to do so on every website. The Inspect Element feature comes in handy in this case.

Right-click any media file and select Inspect from the menu. The div> tags should be expanded. The src attribute now allows you to see the file’s source code. Copy the source’s link and paste it into a new tab. Then, using the Save As option, right-click the media file and save it.

2. Change Headers and Text to Prank Friends

7 Playful Things You Can Do With Inspect Element

Open any reputable website’s page and right-click on the title to create a fake webpage. Then, to open the pane, click Inspect. Select Edit as HTML from the More icon next to the highlighted code. Then, in place of the title, create your own fictitious headline.

You can also change the excerpt, date, and author name in other parts of the text. Remove the image source using the same steps to change the image. Then go to Google and look for a related image, copy the image address, and paste it into the source.

This way, you can easily play a practical joke on your friends. However, instead of sending a link, send a screenshot with the DevTools pane hidden, as the change is only temporary.

3. Change the Colors and Font of a Webpage

7 Playful Things You Can Do With Inspect Element

You can also use Inspect Element to change the colors and font of any webpage invisibly. Choose Inspect from the context menu when you right-click on the object whose colors you want to change.

Then look for color or background color in the Styles tab and type in the hex code. Similarly, the Styles tab allows you to alter font size and style.

This trick can be used to alter the appearance of any website and make it easier to read. For example, you can turn any website into a dark mode, increase the font size to improve readability, and delete obtrusive elements.

4. View Hidden Passwords

7 Playful Things You Can Do With Inspect Element

If your password is hidden by asterisks on a website, you can view it by modifying the webpage code. Right-click the hidden password and select DevTools. After that, change the type of input tag from password to text and click on the blank screen. Your password is now viewable.

When you forget your password but have it saved in a password manager, this trick comes in handy. As a result, you can see and remember your password right on the website.

5. View the Mobile Version of a Website

7 Playful Things You Can Do With Inspect Element

On your mobile phone, we all know how to view the desktop site. However, Inspect Element can be used to view the mobile version on a desktop. To do so, open DevTools and select the Toggle Device Toolbar button from the Toggle Device Toolbar menu (second button from top right).

You can also change user agents to see different versions of the website. Select network conditions in the developer tools by clicking the More icon in the top-left corner. In the User-Agent section, uncheck the Use Default Browser box and select another user agent from the drop-down menu below.

6. Pick Colors From a Website

7 Playful Things You Can Do With Inspect Element

Instead of installing a third-party color picker extension, you can now use Inspect Element to pick your favorite colors. Go to Inspect Element to pick any color from the web page. Then select color or background from the Styles tab. To access the color picker, click the small box after color.

You can now select a color by clicking anywhere on the page and copying the hex code from the Styles tab. The Arrow buttons can be used to view RGB or HSLA code.

So, whenever you come across a great color on a website that you think you’ll want to use in the future, just use Inspect Element to save the code.

7. Take Screenshots Without Any Extensions

7 Playful Things You Can Do With Inspect Element

You can also take pure and clean screenshots with DevTools. Open DevTools, click the More icon, and select Run a Command to take a screenshot. Type screenshot into the search box. There are four different types of screenshot capture options available.

You can highlight any specific area on the window by selecting an area screenshot, and your browser will save it as a PNG file.

A full-size screenshot saves an image of the entire webpage, including elements not visible on your screen. A screenshot of a node captures only the image of that element. Finally, the screenshot capture option saves an image of everything visible on your screen.

The Bottom Line

Well, that’s all we have here about a few fun things you can do using inspect element. These are just a few of the tricks you can do with Inspect Element. So, if you want to impress your friends by becoming a power user, it’s a good idea to learn more about DevTools’ hidden features.

Posted by
Make Tech Quick

Make Tech Quick is your trusted source for the latest insights in tech and gaming. We deliver quick, reliable updates and expert tips to keep you informed and ahead of the curve.

Leave a Reply

Your email address will not be published. Required fields are marked *