Have you ever wanted to temporarily edit a web page to see how it would look with specific colors, fonts, style? This is possible with a tool that already exists in your browser called " Inspect element ". This is a dream come true for all users who like to manipulate CSS.
In this tutorial, we'll walk you through the basics of item inspection and how to use it with your WordPress site.
What is an item inspection tool?
Modern browsers such as Google Chrome and Mozilla Firefox have built tools that allow web developers to debug errors. These tools display the HTML, CSS, and JavaScript for a page and show how the code runs.
The use of the tool " Inspect Element You can edit the HTML, CSS, or JavaScript code for any web page and see your changes live (Only on your computer).
For an owner of a Website, these tools can help you preview how a certain style will look without actually applying the changes for everyone.
For writers, these tools are awesome because you can easily change personally identifiable information while taking your screenshots eliminating the need to actually blur elements.
For support agents, this is a great way to identify the error that could be causing your galleries not loading or preventing them from working properly.
We are only scratching the surface of use cases because the tool " Inspect element Is really powerful.
In this article, we will focus on the tool " Inspect element From Google Chrome, because it's our browser of choice. Firefox has its own development tools which can also be invoked by selecting the menu " inspect element ».
Launch of the tool "Inspect the element" and the localization of the code
You can launch this tool by pressing the keys CTRL + SHIFT + I on your keyboard. Alternatively, you can click anywhere on a web page and then select Inspect the browser menu item.
Your browser window will split in two, and the bottom window will show the source code of the web page.
The developer tool window is further divided into two windows. On your left, you will see the HTML code for the page. On the right pane, you will see the CSS rules.
As you move your mouse over the source of the HTML code, you will see the highlighted area highlighted on the web page. You will also notice the CSS rules for this element in question.
You can also take the mouse pointer over an item on the webpage, right-click and select " inspect element ". The item you clicked will be highlighted in the source code.
Code Developer and Developer Debugger
HTML and CSS in the element inspection window are editable. You can double click in the HTML source code and edit the code as you like.
You can also double-click and edit the attributes of the styles in the CSS pane. To add a rule, click the plus icon on the style pane at the top.
When you make changes to the CSS or HTML code these changes will be reflected instantly in your browser.
Note that not all changes made here are saved anywhere. The tool Inspect element Is a debugging tool, and it does not save your changes to a file on your server. This means that if you refresh the page, all your changes will be lost.
To actually make the changes, you'll need to modify the style of your WordPress theme or a template to add the changes you want to save.
Before you start editing your WordPress theme existing using the tool " Inspect element Make sure to save all your changes by creating a child theme.
How to find WordPress errors easily
The tool Inspect element Has an area called " Sideboard Which shows all the errors that exist on your site. Before trying to debug an error or ask for help from the authors of a theme or plugin, it's always worth looking here to see what's wrong.
For example, if you were a customer OptinMonster Who wonders why his optin does not load, then you can easily find the problem that indicates that the " Slug of your page does not match ».
If your share bar was not working properly then you can see that there is a JavaScript error causing it.
That's all for this tutorial, I hope you can better customize your WordPress blog. Feel free to share this tutorial with your friends.
