Get Your Inspect On: Viewing a Sites CSS and More.

There's a powerful tool hiding in your browser: Inspect.

(This tutorial has been adapted and updated from the article originally posted on Zapier)

Right-click on any website page, click Inspect, and you'll see the guts of that site: Source Code, Images CSS, the Fonts and Icons it uses, the Javascript code that powers animations, and much more. You can see how long the site takes to load (watch the waterfall), how much bandwidth it used to download, and the exact color in its text.

The bonus is that you can also use it to change anything you want on the page.

Inspect is a perfect way to learn what makes the web tick, to figure out what's broken on your site, mock up what a color and font change would look like, and keep yourself from having to Photoshop out private details in screenshots. It's a super-power you never knew your browser possessed.

Let's learn how to use Google Chrome Inspect to help you work better regardless of whether you're a developer or a marketer who's never written a line of code. If you're reading this on your phone, it's time to switch over to your laptop, open Google Chrome, and get ready to tweak some code.

Most web browsers—including Mozilla Firefox and Apple's Safari—include an Inspect tool, while Microsoft's Internet Explorer and Edge browser include a similar set of Developer Tools. This tutorial focuses on Google Chrome's Inspect Element tools, but most of the features work the same in other browsers.

So Why Should You Use Inspect?

If you've never peeked at a website's code out of curiosity, you may wonder why you should learn how to use the Inspect tool. 

• Designer: Want to preview how a site design would look on mobile? Or want to see how a different shade of green would look on a signup button? You can do both in seconds with Inspect Element.
• Marketer: Curious what keywords competitors use in their site headers, or want to see if your site's loading too slow for Google's PageSpeed test? Inspect Element can show both.
• Writer: Tired of blurring out your name and email in screenshots? With Inspect Element, you can change any text on a webpage in a second.
• Support Agent: Need a better way to tell developers what needs fixed on a site? Inspect Element lets you make a quick example change to show what you're talking about.

For these and dozens of other use cases, Inspect Element is a handy tool to keep around. It's part of the Developer Tools in your browser, which includes a number of extra features: a console to run code, a View Source page (add view-source: before the https) to see just the raw code behind a site, a Sources page with a list of every file loaded in a website, and more. You can explore all those on your own, but for now, let's see how to use the main Elements tab to tweak a webpage on our own.

How to Get Started with Inspect Element

There are a few ways to access Google Chrome Inspect Element. Just open a website you want to try editing (to follow along with this tutorial, open CodeVertical.com), then open the Inspect Element tools in one of these three ways:

• Right-click anywhere on the webpage, and at the very bottom of the menu that pops up, you will see "Inspect." Click that.
• Click the hamburger menu (the icon with 3 stacked dots) on the far right of your Google Chrome toolbar, click More Tools, then select Developer Tools. Alternately, in the file menu, click View —> Developer —> Developer Tools.
• Prefer keyboard shortcuts? Press CMD+Option+I (Mac) or F12 (PC) to open Inspect Elements without clicking anything.

 

By default, the Developer Tools open in a panel at the very bottom of your browser and will show the Elements tab—that's the famed Inspect tool we've been looking for.

You can change the location of this tool panel at any time by clicking the three vertical dots on the top right-hand side of the inspect element panel near the "X" (which you'd click to close the pane). Now, you'll see an option to move the panel to the bottom,  of your browser (dock to bottom view) or to open the panel in a completely separate window (undock view).

For this tutorial, let's dock the paneL on the bottom of your browser window, the reason is that if you dock to the left or right you may trigger the CSS for a tablet or mobile view port. You can make the Developer Tools panel wider or more narrow by hovering over the left-side border. Once the ⬍ cursor appears, drag the panel up to widen it or down narrow it.

Now that we're in Inspect Element, there an array of useful tools at our fingertips that we can use to make any site look exactly how we want. For this tutorial, we will focus on the Elements, Emulation, and Search tabs.

Search

The "Search" tab allows you to search a web page for specific content or an HTML element. It's a bit hidden: you'll need to click the 3 dots then click Search All Files to uncover it. Then you'll be able to search through every file in a webpage for anything you want.

Elements

"Inspect Element" is the tool we will explore most in this tutorial, and it's what opens first when you launch the Developer Tools in most browsers. Or, click the "Elements" tab in the Developer Tools to get back to it if you've been exploring elsewhere.

In the Explore tab, you can see all of the HTML, JavaScript, and CSS that built a website. It's almost the same as just viewing the source of a website, with one crucial difference: you can change any of the code, and see the changes in real-time on the site you have open. You can change anything from the copy to the typeface, then screenshot the new design or save your changes (just go to View > Developer > View Source and save the page as an HTML file, or copy the code changes to your text editor). Once you re-load the page, though, all of your changes will be gone forever.

Emulation

Have you ever wanted to preview a webpage on a phone without pulling your phone out of your pocket? The "Emulation" tab lets you view a web page as it would look on any device, with presets for popular devices or an option to set screen resolution and aspect ratio. You can even set an emulated internet speed, to see how quickly a site would load over dial-up.

It's also a bit hidden: you'll need to open Inspect Element and click the phone icon button to start it. Then, you'll have a perfect tool to understand how others experience a webpage. It's time to get to work. We'll first use Search to find things on a webpage, then use Elements to edit text and more on a site, and finally will use Emulation to see how our site would look on a phone from a specific location.

Find Anything on a Site With Inspect Search Tool

Wondering what goes into your favorite sites? Search is your best tool for that, aside from reading a site's entire source code. You could just open the default Elements view, press CTRL+F (PC) or CMD+F (Mac) and search through the source code, but the full Search tool will let you search through every file on a page, helping you find text inside CSS and JavaScript files or locate an icon image you need for an article.

To start, open CodeVertical.com in Chrome if you haven't already, then open Inspect, click the 3 vertical dots in the top-right corner of the Developer Tools panel (near the closing "X"), and select "Search". The Search tab will appear on the bottom half of the Developer Tools panel.

Remember, to open the Inspect Tool just right-click and click Inspect, or press Command+Option+i (Mac) or F12 (PC).

In the search field, you can type anything—LITERALLY ANYTHING—that you want to find on this web page, and it will appear in this panel if it's on the webpage. Let's see how we can use this.

Type meta into the search field, press your Enter key, and you'll immediately see every occurrence of "meta" in the code on this page. Now, you can see this page's metadata, the SEO keywords its targeting, and whether or not it's configured to let Google index it for search. That's an easy way to see what your competitors are targeting—and to make sure you didn't mess anything up on your site.

Let's try another search, this time type h3 into the search field. Again, you'll see every occurrence of "h2" in our javaScript files at the top, but once you scroll down to the bottom, you'll see every "h2" header on this page.

Search is an effective tool for designers as well since you can search by color, too. Type #00000 into the search field and press "enter" (and make sure to check the box beside "Ignore case" to see all of the results). You should see every instance the color #000000 is used in our sites CSS and HTML files. Just click the line that reads "color: #000000;" to jump to that line in the site's HTML and then you can tweak it on your own if you want to.

The "Search" tool is a great way for developers and you to make sure the branding guidelines are used and when you find issues you can easily share it.

Another great way to change the webpage yourself is using the Elements tool, which is a core part of Chrome's Developer Tools.

Using Elements To Make Changes

Front-end developers (folks like us) use the Element tool every day to modify the appearance of a webpage and experiment with new ideas and more. It lets you change the appearance and content of a web page by adding temporary edits to the site's CSS and HTML files.

However if you you close or reload the page, your changes will be gone. Also the changes are only on your computer and you aren't actually editing the real website itself. That way, you can feel free to experiment and change anything—and then copy and save the very best changes to use again later.

Let's try some hands on experimenting.

Click the "Elements" tab in the Developer Tools panel—and if you want more room, tap your "Esc" key to close the search box you had open before. You should see the HTML for this page and get a glimpse into what powers this website.

In the top-left corner of the developer pane, you will see an icon of a mouse on top of a square. Click it, then you can select any element on the page that you would like to change. So let's change some things!

Changing Text on a Webpage

Have you ever wanted to change the text on a site? Perhaps you wanted to see how a new tagline would look on your homepage, or to remove private information off a screenshot? Well, you can.

Click the "pointer on top of a square" icon, then click any text on the page—perhaps the tagline on our homepage. In your Developer Tools panel, you will see a line of text with a light blue highlight that looks something like this:

Double-click the highlighted text "To start your adventure..." it will turn into an editable text field.

You can type anything you want now in this field ("Code Vertical Rocks!!" is perfect) and then press enter. You've just changed the text on the page and once you refresh the page it will return back to the original text.

Lets change a few more things on this page.

The Developer Tools panel reloads with the page, but but go ahead and close it. Press the "X" in the top-right corner of that panel.

Go ahead and right click on some text, and open the Inspect panel back up.

When the Inspect panel opens, it should automatically highlight that sentence. Now that we've selected some text on the page, lets change how it looks.

Changing Color and Font Elements

On the right of the Tools panel, you will see a sub-panel with 6 additional tabs: Styles, Computed, Event Listeners, DOM Breakpoints, Properties, and Accessibility . We will be working on the Styles tab.

You may have noticed that a few things have a strike through them in the "Styles" tab. This means that these styles are not active for the element we've selected them. Changing these values will have no effect, so we can ignore them.

Let's try changing something. Click the arrow icon in the top of Inspect Element again, scroll down to the "Learn More" in the Elementor section and click on that button. Find "background-color" in the Styles tab of Inspect.

The background color is current set to #54595f but if double-click the color code and type black. This makes the button background color change from dark gray to black on the page.

Remember you can use the Inspect tool to make all sorts of changes on a page. Once you have found something you like, be sure to highlight and copy the CSS and the Selector associated with that element. 

Change Element States

Let's take this one step further, let's change how the button will look if someone hovers or clicks on it. The Inspect Element Tool can show that too with its force element state tools. You can see how the element will look once a visitor hovers over the element (hover state), selects the element (focus state), and/or has clicked that link (visited state).

Let's try this out. Make sure you've selected the Learn More button under the Elementor area on the Code Vertical home page. Under the Styles tab find :hov and click on that to reveal a new set of options relating to hovering over an element. Then click on :hover and you will see how the button looks on hover.

You'll notice that the button background color doesn't change. That's because no hover CSS was applied to that button. Let's try experimenting a bit.

With :hover still seleted, click on the + button to the  right of :hov. This will add an instance of the CSS selector associated with the button. You will notice that the selector is highlighted, now hit your tab key to add a new line for some CSS. Now type in this: background-color:green and hit tab again. This will complete/close the CSS you've just added. Again you'll notice that nothing happens to the button, Why?

The hover state hasn't been applied to that Selector even though it's checked. You'll need to add that part to the end of the selector by adding :hover to the end. It should look like this once you've added it: a.elementor-button-link.elementor-button.elementor-size-sm:hover

Now the button background has changed colors. Want to see how it looks when you hover over it? Uncheck :hover and then put your pointer over it to watch it change from black to green.

Pretty cool isn't, you've just added your first CSS using the Inspect Tool.

Change Images

You can easily change images on a web page with Inspect Element, too. Let's change the vertical code background on the Code Vertical site with this dramatic photo of a colorful sunset.

First, copy and paste this link to the image:

https://codevertical.com/wp-content/uploads/2019/04/colorful-sunset.jpg

Now, open Inspect Element on the background of the Code Vertical homepage, and make sure you've selected the signup-hero line in the code. Double-click the background URL link in the "Styles" pane, and paste the link you copied above.

Press "enter" and you'll see the difference immediately.

You can also change a image to a GIF or a video by pasting the link in place of the image.

Now that you've learned how to edit text, colors, and images.... how will all that look on mobile? This is where Emulation or Device Toolbar in Inspect comes into play.

Test any Site on Any Device With Emulation

These days, every site has to be mobile friendly aka Responsive because websites are no longer limited to a desktop or laptop. Everything has to be responsive today. The majority of website visits are more likely than ever to be viewed on a phone, tablet,  and an increasing number on TV's. You should always keep that in mind when creating new content and designs.

The device toolbal is a great tool to approximate how websites will look to users across various devices, browsers, and even locations. Though this does not replace actual testing on a variety of devices and browsers, it's a great starting point.

In the Developer Tools pane, you'll notice a little phone icon in the top-left corner. Click it. This should change the page into a tiny, phone-styled page with a menu at the top to change the size. It's also a good time to change the dock position of the Inspect Tool. If you've forgotten how to do this scroll back to the top of this article. You can also click on the three dots to reveal it when you have the Inspect Panel open.

Once you click on the Device Toolbar you'll notice a few new options are revealed. The first and most obvious is the ability to choose how you want to emulate the site. If you click on the "Responsive" dropdown menu, you can choose from several preset mobile sizes. While most of these are older versions of those devices, you can create custom devices. The second option, is the ability to quickly switch to the most common media (device) breakpoints by clicking the individual sections as shown in the image above.

For those who are not familiar with breakpoints, it's the point or screen size at which a device typically can't go past. For example when you rotate your phone from vertical (portrait) to horizontal (landscape), the breakpoint will change and as a result the layout of the website may change with it. The result is that as a breakpoint changes, it may reveal more or less content depending on the screen size and how the breakpoints are set using CSS. 

Go ahead and resize the small browser to see how things look if you were browsing on a tablet, phone, or even smaller screen. You can also enlarge the view by dragging the right edge of the web page emulation right. 

Not only does the layout change, but font sizes and other changes also occurs to ensure the website looks great on any device.

Emulate Mobile Device Sensors

You may have noticed that your mouse behave the same way it would normally on a laptop or desktop, this allows you to interact with the page as if you are on your mobile device. If you click while dragging the page down, this does not highlight text like it normally would in your browser—it drags the screen down like you are on a touchscreen device. Using this view, you can see how large touch zones are on a web page. This means that you can see which buttons, icons, links, or other elements are easily touchable with the finger.

You can even make your browser act like a phone. Press your "Esc" key to open the search pane in Inspect Element again, and this time click the 3-dot menu on the left side for a menu of options. Select Sensors to reveal three additional tools: Geolocation, Orientation, and Touch.

Touch lets you turn on or off the default circle selector that acts more like a finger than a normal mouse cursor. Orientation lets you interact with motion-sensitive websites such as online games that let you move things by moving your phone. And Geolocation lets you pretend you're in a different location.

Let's try viewing this site from Google's Headquarters in Mountain View, CA.

Check the box next to "Emulate geolocation coordinates," and enter the value 37 into the Lat = text field and 122 into the Lon= text field. Press enter on your keyboard.

Nothing changes, right?

This is because there isn't content on this page that changes based on your location. If you change the coordinates on a site like Lowes.com or Walmart.com that uses your location to show localized product availability, though, you would get different results. You can even go to Google.com in a different location, and potentially see a new Google logo for a holiday in another country, or at least will get the results in a different language.

Emulation is a great way to put yourself in your user's shoes and consider what the user may be seeing on your web page—and it's a fun way to explore the international web.

Emulate Mobile Networks

You can also see what it's like to browse a site on different networks, perhaps to see if your site will load even if your users are on a slower 3G network.

To give it a try, click the three circle button in the left of Inspect Element's search tab again, and select "Network Conditions". There, you can choose from fast or slow 3G, or offline to see how the page works without internet. Or, click Add… to include your own testing (add 56Kbps to test dialup internet, 1GB to test 4G LTE, or 20GB to test 5G). Now, reload the page, and you'll see just how long it'd take for the site to load on a slow or fast connection—and how the site looks while it's loading. Testing network conditions will help you to understand how your site loads on different connections and perhaps encourage you to optimize your site further.

You can also change your user agent—uncheck "Select automatically" beside "User Agent" and select "Internet Explorer 7" perhaps to see if the site changes its rendering for older browsers. That's also a handy hack to make webpages load even if they claim they only work in a different browser like Internet Explorer.

 

Challenges

Let's end with these two challenges.

1. Make a few headline changes on NYTimes.com and tweet us a screenshot of your trending article headline.
2. See how your website renders on a mobile device, and show your developer what could be done better by fixing it yourself!

 

We often use the Inspect Tool to hide personal information before we do screenshots in our reviews, and in our tutorials to make changes and to show how things would look on various screens.

We'd love to hear how you're using the Inspect Tool, so share your stories in the comments below and please share this article.

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on email

From Dud To Dynamite: Customizing your WPForms Contact Form

Blog Post