Using Inspect Element To Create, Tweak & Debug Your HTML & CSS

As a web developer and SEO I spend a lot of time working with HTML and CSS, perhaps too much, since there is always something to be tweaked… And font-size adjusted, padding increased or color to be changed.

When you write HTML you have an idea in your mind about how it should look, but most times it needs at least a little bit of tweaking before it will work exactly as planned. So in today’s post I am going to show you how I use the Inspect Element tool in Google Chrome to help make this process more efficient.

Note:
Many other browsers have similar tools, but I personally use Chrome, so that will be the basis for this post. But if you use a different browser you can probably still find most of this functionality.

Your Road Map

There are a lot of options and buttons to click, so to make things easier, here is a screenshot of the tool with the most important navigation elements highlighted.

How to Inspect Element

 

Finding An Element

The simplest way to open inspect element is to simply right click anywhere on the page and click “inspect element”. From there you can easily start to explore how your page is working. The real power of this tool is that whichever element you right click on, that is where in the HTML the inspector will open.

For the sake’s of our example I am going to use ThinkTraffic.co.uk, since that’s my website. So let’s say I want to look at the code for my navigation bar, I just right click and open up inspect element.

In the default view you see all of the HTML on the page and you will notice that as you hover over an element in the HTML, that element is highlighted on the page.

At the same time a box tells you the size of that element including padding and border but NOT including margin. This is a handy way to see what size containing elements are at different screen sizes.

If you click on an element in the HTML view you will also notice the HTML hierarchy at the bottom. This works as you would expect and if you click on any of the elements in the hierarchy, Inspect Element will select the opening tag of that element.

Playing With CSS

Ok, so select an element, let’s select the “Contact” navigation item. We can now see the code concerning that element. If you now look to the right you will notice some tabs. The default tab is “Styles” but let’s go to the “Computed” tab first.

Computed

The Computed tab gives you a summary of all of the styles that have been applied to the selected element as well as a snapshot look at the padding, border and margin, so you can see exactly how an element looks right now.

The computed styles include only the styles which are actually applied to the element. So if one CSS command overrides another, you only see the one which is most important.

This is a great way to find out things like fonts, sizes, styles etc… as well as how the element is position and such like. If you click the triangle next to a style it will show you the CSS tag that created that style.

Styles

Ok, now let’s go back to the Styles tab. For me this is by far the most useful part of inspect element. The styles tab shows you all of the CSS that applies to your element. But more importantly, it lets you edit the CSS too.

Everything that you edit is immediately reflected in the page, so you can see how your changes impact the site.

So again, looking at our contact link, we can see that it is within a DIV with an id of “servicenav” and it has a CSS command that looks like this:

#servicenav a {
float:left;
color:#333;
display:block;
padding:10px 30px;
}

If you hover over those styles, checkboxes appear and if you uncheck one, that style is disabled. This disables the style for the entire page, so you will notice for instance that if you deslect “color” all of the nav links lose their color.

Editing CSS

You can also edit the CSS, so try clicking on the  padding and on the 30px, which is the left and right value. You can either type in a new number, or just use the up and down arrows and watch the links space out or come closer together.

This feature is particularly useful for testing positioning and spacing, as you can increase the size/padding/margin of a style until the design breaks, and then bring it back a bit to find out the perfect value.

Adding CSS

You can go a step further and actually add new lines of CSS. This is obviously handy for testing ideas. Just click in the general area to the right of the existing CSS attributes and an extra line should appear… Start typing. Chrome will even fill in the blanks to make your work quicker.

So let’s add this line to #servicenav a:

                border:1px solid black;

Clearly this gives all of the nav elements a border and it doesn’t look good. But it shows you very quickly how certain changes will impact your design.

This is also a handy debugging strategy. I often add a black border to a class of elements, I use box-sizing:border-box to ensure that the border doesn’t add unwanted height or width, and then I can see exactly how all of those elements are sitting on a page and how they interact with one another.

If your elements aren’t quite floating how you want them to, this is a quick way to find the culprit!

Note:
You can add css to any tag that appears in the styles tab. One helpful section is element.style, adding styles here is the same as including style=”…” in the HTML, so you can use it to apply styles to that element and no others.

Force State

Ok, so what if you want to work on a dropdown menu? It keeps disappearing when you try to select it right? Ok, so right click on the element that you have to hover over to open the dropdown and inspect element.

Once you have found the element that you think controls the drop down, head over to the styles tab and click on the little symbol in the top right of the element.style section. This is the “force state” section and you can now simply check a box to make an element display its hover state, (or any other state).

Check the box and your dropdown menu will now display for you to work on. The dropdown will stay there until you uncheck the hover box.

Add Style Rules

Another handy thing you can do in the styles window is add a new CSS rule. Click the little plus sign in the element.style window and a whole new rule will be added where you can type in the CSS selectors that you want to target and then enter your own CSS.

Be aware that if your new rule has a set of selectors which do not apply to the currently selected element, that rule will vanish as soon as you select another element. To find it again you will need to select an HTML element that your new style applies to.

Playing With HTML

The most powerful tools are arguably the CSS editing, but you can also edit the HTML of your page in a number of ways, which is handy in its own right. Here’s how:

Editing Text

Just double click on any text within the main HTML viewer and you can edit it. You can’t add HTML here, just regular text. To finish your edits just click on some other part of the inspect element tool and your changes will be shown on the main page.

Editing HTML

If you want to edit the HTML, just right click on any element and click “edit HTML”. You will then be given a text editing area containing all of the HTML of that element and every element within it.

Be careful with this tool, as if you miss out a closing bracket or something similar, inspect element might not work as expected. Of course if that happens all you have to do is refresh the page to make everything normal again.

Alternatively you can just remove a node (HTML element) by right clicking and clicking “delete node”. This is useful if you want to try removing a section of text, a navigation element or something of the sort.

Finally, one other helpful feature is moving a node. Simply click on the element you want to move and then click again and drag. You can use this to rearrange navigation elements or lists and you can even move an element out of its parent and into another element altogether.

More Advanced Features

The inspect element tool is absolutely jam packed with features and I don’t have the space to go through them all right now. Besides, some are so specialist that 99% of you won’t ever use them. But there are some hidden gems, which I will tell you about below:

Sources

You may have noticed along the top of the inspect element tool are some additional links. Until now we have be using the “Elements” section. But another helpful section is “Sources”.

When you arrive at the resources section, on the left you will see a folder tree which shows you all of the file resources available to the page you are viewing. This includes external resources such as Javascript located on other sites, as well as the local CSS and JS files.

If you explore the folder tree you should be able to find the page’s main CSS files, and clicking on one will open it in the middle window.

Again, you can edit these files as you wish and Chrome will react accordingly. Additionally, if you have made CSS edits using the Elements section, those edits will be shown in the sources section.

This is really helpful, because if you have been editing the CSS heavily and have finally gotten it how you wanted it, you can come here and just copy the entire CSS file into your local version and re-upload it.

Resources

The resources section (also at the top) is less useful, but one particularly useful part for me is the Cookies. You will find cookies in the left pane and when you select the site within the cookies folder you will see in the main pane a list of all of the cookies that site has access to.

These are cookies stored on your system, so it’s helpful to see what information they contain. This is also helpful if you are debugging any serverside scripts which require cookies. Oh and you can individually delete cookies here too.

Emulation

Emulation allows Chrome to pretend to be a different browser on a different device. To activate it, click the symbol to the far left at the top, you will immediately see a new pane open up at the bottom of the screen where you can select from various different devices.

If you select iPad mini, for instance, you will see how the page would be displayed on that device.

You can also leave “Model” blank and use your own settings to emulate any particular resolutions, pixel ratios etc…

I’m sure I don’t need to tell you how useful this feature can be. Using it in conjunction with the various CSS and HTML editing features of inspect element mean that you can add mobile specific styles and see the impact immediately on screen.

Note:
It is usually necessary to refresh the page to get it to re-render correctly when switching between emulations. This is particularly important when you are testing mobile responsiveness.

By | 2017-03-22T16:46:10+00:00 May 9th, 2016|Tech Help|Comments Off on Using Inspect Element To Create, Tweak & Debug Your HTML & CSS

Free 1 Hour Marketing Consultation

Want to grow your sales but not sure where to start? We will fully review your website and your existing marketing strategy and give you a full marketing strategy report with 1 hour phone consultation to talk you through our recommendations. No obligation, no strings attached!

This information will never be shared with third parties