In this week’s Smart Spot, Alison shares how to use the Google Chrome Inspect Element tool.
Inspect Element is part of Google Chrome’s Web Developer Tools. This tool comes in handy when you’re designing your website to make sure everything is looking good. To open Inspect Element, right click anywhere on the page and click “Inspect.” It will open up a sidebar panel that will open up all of the CSS options as well as the HTML. There are two main reasons that I use Inspect Element.
The first reason I use it is to test the responsiveness of the site. To test responsiveness, you can type a specific browser width into the browser size box at the top. Or, you can drag the window in on the right side and see how the page transforms as you pull the window in.
You will be able to test all screen sizes, which means you’ll see how your website looks on a desktop, laptop, tablet, and smartphone. Testing the responsiveness ensures everything looks exactly how you want it to on all screen sizes.
The second reason I use Inspect Element is to preview live CSS changes to the website without having to go into the code. This won’t make any changes to your site’s code; it’s simply a way to see how minor adjustments will look. Minor adjustments include things like spacing, font sizes, and colors.
If you are happy with how the adjustments look, you will need to copy and paste the code from Inspect Element into the code of your website. This should save you a few extra steps because you won’t have to go back and forth between updating your site’s code and previewing the page. You already know the changes will look good on your site.
If you need further assistance with your website, don’t hesitate to reach out to Spot On.
