How to inspect code of my website easily

Updated: August 18, 2016

Occasionally you run into a problem with your website and you don’t know how to determine what is happening. You have no idea why particular thing on your website doesn’t look like as it should, or as you wish. Or you would like to change something what can’t be done in our Theme Options or Page Builder.

To resolve your issues of this kind, we offer you short tutorial how to inspect code of your own website.
You have 2 options to achieve that, regarding to what browser you use:

  1. use built-in “Element Inspector” in Developer Tools of your browser
  2. download browser add-on intended to this case (e.g. Firebug for Mozilla Firefox browser)

What you can do with element inspector in your browser?

  • see HTML structure of your website
  • see related CSS Styles of particular element
  • see source URLs of images, links, styles, etc.
  • and many more technical stuff

1. How to use built-in inspector and examples

All element inspectors are similar and there are very few differences in usage and built-in features. Every provides you with HTML tree on left and related CSS styles on the right side.
Following images were taken in Firefox browser by Mozilla.

You activate it by pressing F12 or by right click on element and selecting Inspect Element.

Activation of inspector:

inspect

Inspector with marked numbered areas that are descireb below image:

inspector

  1. HTML Layout tree of your website how is rendered in browser
  2. Selected element from the HTML tree
  3. Highlighted element which you have selected, with some information like image dimensions in this example
  4. Styles applied to this selected element

After activating you can see how powerful it actually is. From this example you obtained a lot of information:

  • Now you know exact dimensions of image that is displayed on website
  • You can see the source of your image and now you can find it on your drive easier (“./wp-content/uploads/2014/07/home-ico-6.png”)
  • You see CSS rules applied to this element one by one and next to them you can also see the source of those stylesheets
    (note: our styles are cached so it doesn’t represent original CSS file)

2. Third-party browser add-on Firebug

Firebug is well preferred option to built-in inspectors as those weren’t always included in browsers. As long as Firebug is only available in Firefox, we decided to show you examples on default inspector which you don’t have to install. In case you would try it anyway, here is installation link.

Comparison between built-in inspector and Firebug:

inspector-comparison

Why to learn to use it?

It helps you to imagine how particular parts of your website work and make it easier to modify it yourself. You can easily find sources through inspector to find them in your theme directory.

All changes you do in inspectors take effect only in your browser and they will reset after page refresh. So don’t be afraid to experiment.

Author: Peter Genčur