Three Tips for Using the Inspect Element Feature

One of the most challenging parts of designing a website is imagining how certain assets might look if they were moved or altered. Wouldn’t it be great to get a taste for the final product without actually making permanent updates to your site? The “inspect element” feature, found within the development tools menu of almost every browser, allows you to do just that.

Here’s a list of tips and tricks to help you make the most of this powerful feature.

How to inspect elements

Start by navigating to your website. Once it’s loaded, choose an element that you’re interested in changing.

1. Highlight the image, text, button, or another element you want to alter.

2. Right-click, and select “inspect” or “inspect element” (the label may differ depending on the browser).

3. When the menu opens and you see a window with several lines of HTML code, the element you’ve chosen will be highlighted within this code. Right-click, and select “edit.”

Now, take a look at a few of this feature’s possibilities.

Test different colors

The aesthetics of your website can immediately captivate or distract your visitors, and it’s all rooted within the psychology of color, according to Entrepreneur.

There are two ways to test the color of an element:

1. Manually change the hexadecimal code.
2. Click the color swatch next to the hexadecimal code and choose from the color picker.

Preview a resized image

Whether it’s a homepage hero image or a blog post header graphic, resizing an image can transform the look and feel of an entire page. To test image size, follow the three steps above. Then, manually type in the new image size (in pixels).

Sample new text

From headers and body text, to image captions and calls to action (CTAs), the length and size of your text can also affect your design and user experience.

To test text size, follow the three steps above. Then, manually type in the text you’d like to try out.

Remember, any edits you’ve made will remain on screen until you navigate away or refresh the page. So, feel free to test many times, as no one will see these temporary updates except for you.