How to Use the Google Chrome Inspect Tool

7 Views

Thanks! Share it with your friends!

You disliked this video. Thanks for the feedback!

Published Feb 16, 2025

Google Chrome's Inspect feature is actually part of a free set of tools that come with the Chrome browser called the Developer tools. It's a very versatile tool in that you can use it to identify parts of your code, look at your website CSS, and even do non-destructive edits. If you're a WordPress user, it's an invaluable tool that will help you to fix possible site problems and help you customize your site so that it looks exactly as you want it.

We're going to show you how to use the Inspect tool to look at the code, make non-destructive edits, and also identify the CSS involved in area that you are inspecting.

Login to Google Chrome
Right-click on the website area you want to Inspect
Select Inspect from the pop-up

A console will appear with your code. You can scroll through the code and see it's relation on the page

You can also look at the Style column on the right for the CSS that affects the site.

Double-click on the code, and you can make non-destructive changes to text or code on the page.

Read our full guide on How to Edit CSS Using Google Chrome Developer Tools
▶︎ https://www.inmotionhosting.com/support/website/google-tools/how-to-edit-css-using-google-chrome-developer-tools/

We also have a guide on How to Troubleshoot JavaScript Using Google Chrome Developer Tools
▶︎ https://www.inmotionhosting.com/support/website/google-tools/how-to-troubleshoot-javascript-using-google-chrome-developer-tools/

InMotion Hosting was founded in 2001 and provides personal and business web hosting for everyone! For more information about InMotion Hosting and the services we provide see here:
▶︎ https://www.inmotionhosting.com