What is inspect element or developer tools?
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.