Basics of Inspect Element Customizing WordPress for DIY Users696

6Basics of Inspect Element Customizing WordPress for DIY Users
Author: InfoBeep - September 13, 2017 | subject to copyright

What is inspect element or developer tools?

The capabilities of web browsers today are growing, now they are not just used for browsing the website, now they have built-in tools which allows to debug errors in the site. Web browsers today built-in Inspect Element tool which has the capabilities to show and can edit the HTML, CSS as well as JavaScript code of any webpage you can see.

This tool can help DIY website owners to preview site in different designs without making changes for public. This is just a basic introduction of Inspect Element, it is beneficial tool for the everyone, as it helps to test the site in different setting/look without making actual changes publicly.

Launching inspect element and locating the code

Inorder to launch inspect element you just need to press CTRL + Shift + I key or you right click anywhere on your browser and click on inspect element from browser menu. Demo picture is shown below:


Now you will see your browser splits into two. The lower side shows page source in 2 parts HTML and CSS. As you move your mouse in in the source you will see the area the code affects. Demo picture is shown below:


Editing and Debugging code in Inspect Element

Codes shown below the website are all editable. You can click either HTML or CSS code to edit and give your own input. As you change the codes, you can see its affect in the website.

(Note: The changes you make in the website are just for you. Inspect element is not a debugging tool, you won’t be able to any changes to the website for public. In order to make actual changes to the website, you need to edit WordPress theme’s stylesheet file.


Easily find errors on your site

You can see the console tab in the Inspect Element, it shows all the errors existing on your site. It is always helpful for you when you are trying to debug codes on your site. Demo picture of an error is shown below:


Nex, time, when you visit a site and find something is not working you may see for errors getting into the console tab.