If you’ve ever right-clicked a webpage, noticed “Inspect” at the bottom of the menu, and clicked, you’ve invariably had one of these three reactions:

  1. What’s this for?
  2. Oh, no, it’s code. Get me out of here!
  3. This is the greatest thing ever.

If you haven’t quite achieved that level-three realization yet, that’s what we’re here for: to share exactly how the “Inspect” or “Inspect Element” tool can save you massive time as a marketer or designer, even if the only thing that doesn’t terrify you about Javascript is its implicit relation to coffee.

What is the Inspector?

The inspector is an internet browser tool that helps you see the underlying blueprint of any webpage. You don’t have to be the administrator of a website to see the CSS, Javascript, and other code that goes into the creation of a website – you don’t even have to be a coder. Anybody can do this.

When you use the Inspector tool, you’ll not only be able to see which colors, fonts, images, and other graphics are on the page, but you’ll be able to change those elements in your browser.

If you’re a marketer or designer, stop for a moment to think how helpful this is.

Instead of spending valuable time creating mockups or examples of what a client’s website could look like, you can make visual changes in real time over a conference call to explain what you mean.

You can use your desktop browser to emulate a mobile device, to preview content and ensure it’s responsive.

You can alter web copy to show how a tweak in messaging would improve the page’s appearance.

You can swap out images and revamp the color scheme, all without the hassle and danger of messing with the actual code on a site.

How to Use the Inspector Tool

This tool has multiple capabilities, so we’ll focus on how marketers can use it to alter, test, and study different web design elements in Chrome (if you’re not in Chrome, see this guide for how to open the Inspector).

Navigate to the page you want, right click, then click “Inspect.”

In the top left of the pane that opens, you’ll see two icons:

Click the first, and it allows you to hover over any element on that page and see its attributes.

Click the second, and you’ll toggle to the mobile version of that site.

In the main menu at the top, you’ll see several options – from Elements to Console, Sources, Network, and Performance. We’ll be working in the “Elements” tab.

Here, you can:

Search for specific elements on a page.

Open the hamburger menu on the top right and click “Search.”

Enter your query: you may want to look for a specific color, header type, metadata, or font name so you can replace it with alternatives. This tool is also handy if you’re looking to ensure none of your old brand colors (or taglines, or logos) are present on a website.

Live-edit style elements on a page.

With the “Styles” tab open, scroll down through the pane to the element you want to change, click on it, and type a new value. Hit “Enter” or “Tab” to save it. Here are some elements on a webpage that you might experiment with:

Update colors.

On the webpage side of your screen, go to the section you’d like to work on. With the “cursor on a square” icon highlighted, click the element whose color you want to change. Type in a new hexcode for that color to change it. If you’d like to change the color of a CSS element sitewide (say, all H2 headers), use the “search” tool to find the line of code that dictates the color of all H2 headers and change it there.

Change images.

Click the “cursor on a square” icon in the top left of the main panel, and click the image you want to change. Locate the link of the image you want to change and replace it with a link to another image. Note that your new image will have to exist online, so you may need to upload it to your WordPress media library (or other library) to generate a link.

Switch up written content.

Have a new idea for a tagline or call-to-action that you’re sure will improve conversions? Test out its look and feel on your existing site. Here’s how: click the “cursor on a square” icon in the top left of the main panel. 

Then, click the text box you want to change.

This will highlight the section of code that denotes which text to display.

From there you can simply change the text inline.

And voila!

Reformat page elements. 

You can change line height, font size, margins and padding, headers, and more in the “Styles” tab within the inspector tool. You can manually scroll through the code to find these values, or you can use the “Search” function to locate them.

Save changes for later.

Since changes made in “Inspect Element” aren’t permanent, you’ll need some way to retain them for your own purposes (or to show a client or colleague later). To save your changes as an HTML file, right-click on the webpage itself, and click “View Source.” This will open a new tab with all of the altered code, where you can right-click again and “Save As” an HTML file. Alternately, you can copy and paste the code into a document and save it there.

View metadata.

This is useful if you’re studying a competitors’ page to inform your SEO strategy. Use the search function to find meta descriptions and other data that you want to study.

There you have it! Of course, you’re not limited to the elements we’ve called out in this piece: depending on your comfort level with code, you could change button styles, widget placement, and more. Take it for a spin: we promise you won’t be disappointed.