Home > Science and technology > Applications and software
Reading time estimate: 6 min

7 interesting things you can do with the Inspect Element tool

BingMag.com 7 interesting things you can do with the Inspect Element tool

For someone unfamiliar with coding and has never used the Inspect Element tool, seeing all this complex code on one page is a bit strange. It seems. But if you are one of those people who have a history of working with this tool, you probably know that with the Inspect Element tool you can do a series of useful (and sometimes not very useful) things, as long as you know how to do them. Be. In this article, we will introduce you to 7 interesting and fun things that you can do using browser development tools (DevTools) and Inspect Element.

What is Inspect Element tool?

Inspect Element is a plugin that has already been added to most browsers by default and can be used to make changes to site code live. This means that we can consider any part of the site, we can make changes in it and the applied changes will be visible at the same time. Modern browsers, such as Google Chrome or Firefox, have developed tools that allow developers to troubleshoot online. This tool shows the html and CSS tags and javascript code and how to execute the code.

Using the Inspect Element you can edit the html, css and javascript code for each web page to see the changes live do. Of course, it should be noted that these changes will be visible only on your computer and browser. For website owners, this tool can help to show the designs without anyone other than you noticing the changes. This tool is attractive in another way, because you can change the elements of the page to take screenshots according to your taste. For support staff, when a page element such as a gallery or slider is not working properly, this tool will be a good way to detect errors. It is worth noting that changes made to your browser by the Inspect Element tool only occur on your system and will not be stored in site code. Therefore, with a simple refresh, these changes return to the original state.

1. Download photos and videos

BingMag.com 7 interesting things you can do with the Inspect Element tool

To download photos and videos, you usually right-click and with Selecting the option to save them to your system. But this technique does not work on all websites. In this case, the Inspect Element tool feature is used. To download any file, right-click and select Inspect. Then expand the

2. Put your friends to work by changing the title and text of the website content

BingMag.com 7 interesting things you can do with the Inspect Element tool

instead of making fake images You can use DevTools expression to change the text on a web page and joke with your friends. To create a fake website, first right-click on the main website and select Inspect. In the window that opens, click More and select Edit as HTML. Then replace the title with the original title. You will also be able to change the author's date and name. To change the image, delete the original image according to the same steps and find the image you want from Google, copy the image address and replace the previous address. This way you can put your friends to work without much trouble. However, use the screenshot instead of sending the website link to your friends as these changes will be temporary and will return to the previous state when the page is refreshed.

3. Change web page fonts and colors

BingMag.com 7 interesting things you can do with the Inspect Element tool

Another thing you can do with the tool Do Inspect Element Change the color and font of the web page. Right-click on the content you want to change its color and select Inspect. Then in the Styles tab, find the primary color or background and enter the hex code. Similarly, you can change the font size and style from the Styles tab. You will be able to use this trick to change the look of any website and to make it easier to read its content. For example, you can create a dark mode for any website, increase the font size so that you have no problem reading them, and also eliminate annoying elements on the page.

4. View hidden passwords

BingMag.com 7 interesting things you can do with the Inspect Element tool

If you enter your password on a website Indicates that you can change the web page code to view your password. Right-click on the hidden password to go to DevTools. Then in the input tag field, change the password type to text and click on the blank page. Your password is now visible. This trick will come in handy when you forget your password but save it in your password manager. So you can view and remember your password directly from the web page.

5. View the mobile version of a website

BingMag.com 7 interesting things you can do with the Inspect Element tool

How we all change the mobile version of a website to the desktop version We know. But you probably did not know that with the Inspect Element tool you can view the mobile version of a website on the desktop. To do this, open DevTools and click the Toggle Device Toolbar button (the second button from the top right). In the same way, you will be able to see different versions of the website by changing your agent. Click the More icon in the upper left corner and select Network Conditions. Uncheck Use Default Browser in the User Agent field and select another agent from the menu.

6. Download the colors from another website

BingMag.com 7 interesting things you can do with the Inspect Element tool

Instead of installing the color add-on, you can now add your favorite colors Select using the Inspect Element. To select the color you want from the web page, go to the Inspect Element tool. Then go to the Styles tab to find the color or background you want. Click on the small box after the color to display the color picker. Now you can select its color by clicking anywhere on the web page and copy the hex code from the Styles tab. If you want RGB or HSLA code, you can view it using the arrow keys on the keyboard. Therefore, if you have a specific color in each website, you will easily be able to use it for your website using the Inspect Element tool.

7. Take a screenshot of the web page without using plugins

BingMag.com 7 interesting things you can do with the Inspect Element tool

DevTools also lets you take screenshots Get quality shots. To do this, open DevTools, click the More icon, and select Run a Command. In the search box, type Screenshots. Here are four different ways to take a screenshot. By selecting a screenshot area, you can take a screenshot of any specific part of the website you want and save it as a PNG file. Taking a full-size screenshot will save an image of the entire web page, which may not show the details clearly.

In this article, we review and introduce 7 tricks that use the tool Inspect Element can be done, we paid. But there are thousands of other useful things you can do with Google's development tools, DevTools. We hope that the points mentioned in this article will be used by you, dear users.


Source: Makeuseof

READ NEXT IN: science and technology / applications and software

BingMag.com How to send messages to people on WhatsApp without saving their numbers? applications and software

WhatsApp is arguably one of the most popular messaging apps in the world. WhatsApp offers a lot of features to its users, which make the messaging process a little more fun. Since we all use WhatsApp,

BingMag.com The CEO of Twitter did not appear and fired two senior managers of the company applications and software

On Monday last week, Twitter co-founder Jack Dorsey announced that he was leaving the company and its chief technology officer. Zaman, Parag Agrawal, will take over as Twitter's new CEO.

BingMag.com Introducing the top 6 WiFi network analysis applications for Android applications and software

Wi-Fi technology has spread a lot these days and can almost be said to have become an integral part of our daily lives. So the slightest interruption in connecting to these radio waves can be very ann

BingMag.com Microsoft unveils new Office interface for the general public this week applications and software

Microsoft will add a new Office suite to the app this week in an update that all users will have access to.