5 Ways Use the Chrome Inspect Tool
If you have looked at the Chrome inspection tool without any knowledge of its operation, all you would see is a bunch of code and confusing panels. You would probably think that this is more logical for a programmer, and you are reasonable to some extent. But I am here to tell you how this tool can benefit you, even if you have never written a line of code in your life.
Do you want to find hidden links, images and audio files on websites? The chrome inspection tool can help you. It is useful when you want to download images or videos that you cannot right click or find the source of the integrated content. The links are generally placed in tags containing tags “A,” in “IMG” and videos in “video” tags, and you can see them all in the elements.
You don’t need to be a programmer to use the Chrome inspection tool, but knowledge of the basic HTML helps. HTML is a simple language that builds web pages using tags. Learning the basics only takes a few minutes.
To use the tool, right -click any web page element, such as text, images or links, and select “Inspect” in the menu.
You can also press CTRL + SHIFT + C (Windows) or CMD + SHIFT + C (Mac) to open the tool. Then press CTRL + F (Windows) or CMD + F (Mac) to search for specific elements.
Customize the appearance of a website
You can also temporarily customize the appearance of a website using the Chrome inspection tool. The changes you make will be temporary because the inspector is an isolated environment (commonly known as sandbox). What you do will not affect the main site, which means you don’t have to worry about breaking anything.
There are many use cases here where small adjustments can improve your user experience. For example, if the police are too small, you can change it. You can even change the background color to something darker in low light conditions. If a banner distracts you, you can deactivate it.
For this section, you will need to know basic CSS (cascade style sheets), another simple language that describes what the elements of a web page should look like. Again, you don’t need to be a programmer. This practical introduction to CSS by Mozilla can familiarize you with its main concepts in 15 minutes.
Let’s look at the distracting banner problem. If I want it, you can inspect the item on the web page and place the following code line in its “Styles” component:
display: none;
Since the inspection tool appears on the right side of the default browser window, the “Styles” shutter will generally be below.
It is very intuitive, does not require any coding expertise and you can easily use a cheat sheet or an AI CSS to make the changes you need. In addition, it offers a highlighting of syntax and automatic completion to make sure you write the work code.
Related
11 Tips to start with the Modern CSS
Style tips that will not go out of fashion.
Discover the hidden contents
Just as you can hide content on a website, you can also reveal it when hidden. It may be links, media or other content. This is useful if, for example, you want to see an extract from the article hidden behind a paid wall or activate hidden features such as the buttons and form fields to see what they do.
Here are examples of code that you can search and delete in the styles panel to see the hidden content:
display: none;visibility: hidden;
opacity: 0;
Part of the content can be hidden using JavaScript, which is a little more difficult to modify if you are not a programmer. But it’s a discussion for another day.
Diagnose website problems
If a website is slow, it can sometimes be difficult to diagnose the problem. You can use the Chrome inspection tool to find out if it is the site or your network.
To do this, open the Chrome inspection tool and select the “Network” tab. You may want to extend the shutter if it is not visible to see the other tabs. Here, you will see everything that the load page, including HTML, CSS, scripts and media.
Look for all the elements highlighted in red and check their state column for an error code (for example, 404 or 500). You can then contact the website administrator and report the error and the affected items.
Alternatively, you can extract the network newspaper by clicking on the download icon in the menu under the tabs. Thereafter, you can send it to the administrator so that they can help the problem and make the site work for you.
If it turns out that your network is the problem, you need to help this. If it is slow, you can take measures to speed up your internet connection.
Learn web development
If you are on your trip to become a web developer, the Chrome inspection tool is an excellent learning tool. More importantly, he can teach you how websites are structured.
For example, the “Elements” tab reveals the HTML structure of the website. It can show how “div”, “p” or “a” labels, as well as CSS, are used to build incredible layouts.
In addition, as mentioned above, the inspection tool allows you to make temporary changes to HTML, CSS and layout of a website. This provides an environment of good practice, especially on large websites with complex code. Experimenting in this environment is a good way to see how your changes work in real time and strengthen what you have learned.
Related
7 useful sites that beginners web developers should know
Are you planning web development learning? These seven sites should appear on your unavoidable resource list.
The Chrome inspection tool can be intimidating, especially for those who cannot code. But you don’t need to be an expert programmer to use it. And if you are ready to make a little effort to understand the HTML and the basic CSS, it can become an invaluable tool to improve your navigation experience.
