Most browsers have a special built-in tool for web designers and developers to use to help troubleshoot code. It’s a panel that reveals the live HTML, CSS, and any other code (like JavaScript) that is used to create a web page.

Designers and developers can use this panel to figure out exactly what HTML was used to create the page and what CSS is being applied to style any of the elements contained within it. The inspect element tool can also be used to turn off and on specific CSS properties and to try out new CSS properties (only local to your computer, and only till your refresh) to help make decisions about styling and help determine specific code that may be causing problems on your site.

This tool is available in almost all common browsers, but will look and work slightly differently in each. For example, in Firefox and Chrome, there aren’t any special setup steps to make this panel available, however, in Safari you’ll have to adjust the preferences to access it. I’ll be walking you through the steps for setting up and using this tool in Safari.

Setting Safari Preferences

In Safari, you’ll need to make sure your Develop menu is turned on to use the Inspect Element tool. By default the Develop menu is hidden and your Safari menu looks like (fig. 1).

If you happen to have the Develop menu already turned on, your top menu will look like (fig. 2) and you can move on to the next section: Accessing Inspect Element.

Accessing and Using Inspect Element in Safari

To turn on the Develop menu, you’ll need to access Safari’s preferences.

From the top menu, Click Safari and from the dropdown, choose Preferences (fig. 3).

The preferences panel will appear. From the top set of icons, click Advanced (fig. 4).

In the Advanced panel, you’ll notice a checkbox at the very bottom labeled Show Develop in Menu Bar. Click that box to turn on the option  (fig. 5).

Close the preferences panel by clicking the red circle in the upper left corner. (fig. 6).

Note: There is no Save or Save Changes. All changes you make are automatically saved, so you can simply close out once you’ve made your selection.

Once the Preferences panel has been closed, you should now see Develop in the top menu (fig. 7). If you see this, then you are set. You won’t actually need to use the dropdown menu here, but will need to make sure this is present in order to access the Inspect Element tool we’ll be discussing in the next step.

Accessing Inspect Element

Once you’ve made sure that the Develop menu is showing in your top navigation for Safari (see Setting Safari Preferences in the section above), you’ll be able to use the Inspect Element tool on any webpage.

Since many websites will have some very complicated HTML and CSS styling that will make my demo difficult to follow, I’ve made a sample HTML page of my own that we can inspect together if you’d like to follow along with me.

Click here to launch the page. It should open up in a new window or tab. You’ll probably notice right away that my page doesn’t have any real CSS styling applied to it, just the browser defaults. This is just fine for now, the clean slate can help us see what is really happening behind the scenes.

Scroll down the page until some of the text comes into view (fig. 8).

Using you cursor, highlight a bit of the text (fig. 9).

Right click (or control click if your mouse isn’t setup for right click) to reveal the dropdown menu (fig. 10).

From the menu, choose Inspect Element (fig. 11).

This will reveal the Inspect Element panel (fig. 12).

The panel is typically docked to the bottom of your window, but may also be floating in a window all it’s own. The grouping of icons on the top left of the panel allow you to customize where this panel will live (fig. 13).

It’ll take some experimentation to discover which of the placements you’ll prefer, but for now, it’s probably fine wherever it is. You just want to make sure you can see both it and the text you’ve selected at the same time.

Inspecting the HTML Elements

Now that we have the panel up, we can start to dissect what is happening inside of it. You’ll want to make sure have the Elements tab selected. This tab allows you to see the HTML code used to generate the site (fig. 14).

The site HTML should now be in view. Move your mouse over any of the HTML in the panel and click to select any bit of the code to have it highlight the corresponding content on the live site.

Fig 15 shows the result of selecting the first <h2>. As you can see it highlights the code in the inspector panel as well as the code in the live site above. It uses color coding to show the content of the element in blue as well as any other margin or padding applied to that same element. In this case we can see the default browser margin in orange.

Let’s try another one. Let’s use our Inspect Element panel to select the first paragraph in the HTML.

Not surprisingly, we get the same result (fig. 16). The paragraph tags in the HTML are highlighted and so is the paragraph above running in the live site. We can see the paragraph content in blue and the default browser margin in orange.

You can do this same “inspect” for any element in the HTML and it will display the content in the live site using these colored highlights. This is useful for determining not only what content is what, but is also useful for finding out what type of spacing, default margin or otherwise is acting on our elements.

You may have already noticed that the paragraphs in the Inspect panel are different than the other elements. In the images and headings we can see the content as well as the markup. For longer bits of content, like paragraphs, the panel collapses the content to make more information visible. You can use the tiny triangle to expand the tags and reveal the content inside (fig. 17). You can click the triangle again to collapse the content.

It’s helpful to keep a look out for these triangles as sometimes nested (HTML tag pairs inside of other HTML tag pairs) get collapsed. Any element that holds other elements will have a tiny triangle in front of the opening tag allowing your to collapse or reveal what’s inside for inspection.

Inspecting the CSS

The Inspect Element panel is great for seeing the HTML for any site, but is is also great at revealing the CSS as well. The CSS part of the Inspector is located on the right side of the panel and is shown in (fig. 18).

If your Inspect Element panel doesn’t have this section visible, it might be collapsed. You’ll need to expand it by clicking the expand icon (fig. 19).

You’ll want to make sure you have Styles and Rules selected from the top options (fig. 20).

Making sure the first <p></p> is still selected in the HTML, scroll the CSS sub-panel down (fig. 21).

You’ll eventually see the actual styles that have been applied to that paragraph. We know that I haven’t used a custom stylesheet for this demo page, so what we see if the User Agent Stylesheet (Safari’s browser default styles) (fig. 22).

Let’s take a look at another element. Inspect the first <h2> by selecting from the HTML in the panel and scroll the CSS sub-panel down till you see the User Agent Stylesheet CSS styles applied to it (fig. 23).

As you can see, the browser by default displays an h2 as a 1.5em font with the font-weight set to bold. Like the paragraph, we can see the default margin applied and that the element is set to be block.

Edit the CSS

Inspect Element panel also gives us the ability to edit, remove, or add to the CSS already on the page. These edits are only changing the website on your computer, and only temporarily, so don’t worry that this feature might be interfering with other viewers’ experience. It’s a private showing.

Let’s say we want to edit the CSS applied to the first <h2>. We need to scroll our CSS sub-panel back up to the top (fig. 24).

Once you’ve scrolled all the way back up, you’ll see a section that says something along the lines of “h2 – Style Attribute, click to edit“. (fig. 25)

This is the place where we get to experiment with styles. To test this out, let’s add a CSS property to change the text color of the h2 to red. We write this just like we would in a stylesheet, we write: color: red;.

When we’re finished, we hit Enter to apply the new style (fig. 26).

Pretty cool, right? If everything worked according to plan, the h2 in the live site should now be red.

We’ll do another example. Let’s tell the h2 to have the font-size set to 3em (fig. 27).

We should now be seeing the h2 in the live site both red and much larger than it was before. If you take a look at the HTML in the panel, you’ll see that the CSS is being applied as an inline style (that it is being directly put into the HTML rather than into a separate stylesheet) (fit. 28). This doesn’t impact our actual code, but it is good to see what’s happening under the hood here.

Now that we know how to add new styles to an element on our page, let’s take a look at removing a style that has been applied. This can either be one I’ve just added or any that are coming from an external stylesheet, it doesn’t really matter, all applied styles are fair game.

You’ll notice if you click inside the box where you wrote the new CSS styles, that some tiny blue checkboxes appear. (fig. 29).

These guys are used for turning certain styles on and off. Go ahead and uncheck the box in font of the the color: red; to see what happens (fig. 30).

Once the box is unchecked, you’ll see right away that the h2 is no longer red. Let’s do the same for the font-size we applied a little bit ago. Go ahead and uncheck that box as well (fig. 31).

As you probably expected, our h2 returned to its default size. We have now turned off both of these styles. We can also turn either or both of them on again by rechecking the boxes.

Go ahead, let’s recheck the box in front of color: red;. (fig. 32).

Just like before, the h2 is red again. The panel remembers all the styles we’e written in this session and allows us to check, uncheck, and edit any applied style. This is great for testing out ideas and also for trouble shooting issues like unexpected spacing.

Refresh to Reset

All of these styles will remain editable until we refresh the page. Let’s go ahead and refresh the page to see what happens (fig. 33).

Once the page refreshes, you’ll see that all of our styling is now gone and we’re left with only the original styling (browser defaults, in this case) once again (fig. 34).

Make sure to keep in mind that this page only has browser defaults now because there isn’t any attached stylesheet. If it did have one, those styles would be back as well as any defaults. Only the edits we made are gone, not anything that is actually part of the original page. We were the only one who was able to see our edits, so nothing that is actually a part of that page really got tampered with in real life.

Closing Down

Once we’re finished Inspecting, we can use the  “X” in the top left corner to close the Inspect Element panel (fig. 35).

Now we’re right back to the beginning again (fig. 36).

Whether you want to Inspect your own page for troubleshooting reasons or you want to look under the hood of somebody else’s page to see how it works, the Inspect Element tool is a great way to do it. You can not only see the HTML, but also reveal edit, add, and remove any CSS applied to the page for your own testing and information.

For those of you who landed here because you are interested in learning web design and writing code, you might want to check out my free web course, Web Design for Graphic Designers, where I walk you through the steps for creating a modern, responsive website from scratch!

Best of luck!

Web Design for Graphic Designers

A Step-by-Step Guide for creating a modern, responsive website from scratch

Co-authored by Jillian Noble and Ryan Krug

Published by EMSPACE

Read Online for Free