If you looked at the Chrome inspection tool without any knowledge of how it works, all you’d see is a bunch of confusing code and panels. You’d probably think it makes more sense to a programmer, and you’re right to a degree. But I’m here to tell you how this tool can benefit you, even if you’ve never written a line of code in your life.
Find Links, Media, and Other Resources
Want to find hidden links, images, and audio files on websites? Chrome’s inspection tool can help you. It’s useful when you want todownload images or videos that you can’t right-clickor find the source of the embedded content. Links are typically placed within tags containing an “a,” images within “img” tags, and videos within “video” tags, and you can see them all in the Elements pane.
You don’t need to be a programmer to use Chrome’s inspection tool, butknowing basic HTML helps. HTML is a simple language that builds webpages using tags. Learning the basics only takes a few minutes.
To use the tool, right-click on any webpage 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 a Website’s Appearance
You can also customize the appearance of a website temporarily using the Chrome inspection tool. The changes you make will be temporary since the inspector is an isolated environment (commonly known as a sandbox). What you do won’t affect the main site, meaning you don’t have to worry about breaking anything.
There are many use cases here where small tweaks can improve your user experience. For instance, if the font is too small, you may change it. You can even change the background color to something darker in low-light conditions. If a banner is distracting you, you can disable it.
For this section, you will need to know basic CSS (Cascading Style Sheets), another simple language that describes how the elements of a web page should look. Again, you don’t need to be a programmer. This handyintroduction to CSSby Mozilla can get you acquainted with its core concepts in 15 minutes.
Let’s look at the distracting banner problem. If I want it gone, you can inspect the element on the webpage and place the following line of code in its “Styles” pane:
Since the inspection tool appears on the right side of the browser window by default, the “Styles” pane will usually be below it.
It’s very intuitive, requires no coding expertise, and you can easily use a CSS cheat sheet or AI to make the changes you need. Furthermore, it offers syntax highlighting and autocompletion to ensure you’re writing working code.
Discover Hidden Content
Just like you can hide content on a website, you can also reveal it when it’s been hidden. This can be links, media, or other content. Doing this is useful if, for instance, you want to see an article snippet hidden behind a paywall or enable hidden features like buttons and form fields to see what they do.
Here are examples of code you can look for and remove in the Styles panel to see the hidden content:
Some of the content might be hidden using JavaScript, which is a little harder to modify if you aren’t a programmer. But that’s a discussion for another day.
Diagnose Website Issues
If a website is slow, it can sometimes be hard to diagnose the issue. You can use the Chrome inspection tool to find out if it’s the site or your network.
To do that, open the Chrome inspection tool and select the “Network” tab. You might want to expand the pane if it’s not visible to see the other tabs. Here, you will see everything the page loads, including HTML, CSS, scripts, and media.
Look for any items that are highlighted in red and check their Status column for an error code (e.g., 404 or 500). you’re able to then contact the website’s administrator and report the error and the affected items.
Alternatively, you can extract the network log by clicking the download icon in the menu below the tabs. Afterward, you can send it to the admin so they can troubleshoot the problem and get the site working properly for you.
If it turns out your network is the problem, you need to troubleshoot that. If it’s slow, you can take steps tospeed up your internet connection.
Learn Web Development
If you’re on yourjourney to becoming a web developer, the Chrome inspection tool is an excellent tool for learning. Most importantly, it can teach you how websites are structured.
For instance, the “Elements” tab reveals the HTML structure of the website. It can show how popular tags like “div,” “p,” or “a,” as well as CSS, are used to build amazing layouts.
Also, as mentioned earlier, the inspection tool allows you to make temporary changes to a website’s HTML, CSS, and layout. This provides a good practice environment, especially on large websites with complex code. Experimenting in this environment is a good way to see how your edits work in real time and reinforce what you’ve learned.
The Chrome inspection tool can be intimidating, especially for those who can’t code. But you don’t have to be an expert programmer to use it. And if you’re willing to put in a little effort to understand basic HTML and CSS, it can become an invaluable tool for improving your browsing experience.
