Basics of Inspect Element: Customizing WordPress for DIY Users

Have you ever wanted to temporarily edit a webpage to see how it would look with specific styling?

It’s possible to edit text, colors, and more with a developer tool already in your browser called Inspect or Inspect Element.

It lets you edit a page’s HTML and CSS styling with minimum coding knowledge. It doesn’t save any changes, so your original page remains unaffected.

In this article, we will show you the basics of the Inspect tool and how to use it on your WordPress site.

What Is The Inspect Tool?

Modern web browsers like Google Chrome, Firefox, Safari, and Microsoft Edge have built-in tools that allow web developers to debug errors.

These tools show a page’s HTML, CSS, and JavaScript code and how the browser executes the code.

You can open these developer tools by visiting any page and selecting ‘Inspect’ from the right-click menu.

Using the Inspect tool, you can edit HTML, CSS, or JavaSCript code for any webpage and see your changes appear on screen (We’ll show you how later in this article).

These changes don’t affect the original webpage and will disappear when you close the window or reload the page.

It allows DIY website owners and developers to test and debug.

• You can apply your styles in CSS and see how they will look.
• Technical writers who need to take screenshots can edit HTML to change the text on the screen and hide personally identifiable information.
• Developers can use it to look for common WordPress errors, 404 errors, debug JavaScript issues, and more.

We’re just scratching the surface of use cases. These developer tools are incredibly powerful and highly useful for advanced users.

In this article, we will focus on the Inspect tool in Google Chrome because it is the most commonly used browser.

Other browsers, such as Firefox, Safari, and Microsoft Edge, have their own developer tools, which can also be invoked by selecting the Inspect element from the browser menu.

Ready? Let’s dig in. You can use the links below to jump to any section of the post.

Video Tutorial

If you don’t like the video or need more instructions, then continue reading.

Launching The Inspect Tool and Locating The Code

You can launch the inspect tool by pressing CTRL + Shift + I (Command + Options + I for MacOS) on your keyboard.

You can also click anywhere on a web page and select ‘Inspect’ from the browser menu.

You can also access the tool from the main browser menu.

In Google Chrome, click on the three-dot menu at the top-right corner and then scroll down to More tools » Developer tools.

Your browser window will split into two.

On the one side, you’ll see the page you were viewing. On the other side, you will see the HTML code and CSS rules.

The position of the Inspect dock varies, but you can change it by clicking on the three-dot menu and selecting the ‘Dock side’ position. You can see the icon to click in the image above.

Moving your mouse over the HTML source will highlight the affected area on the web page.

You will also notice CSS rules change as you click on an element inside the HTML code.

You can also take the mouse pointer to an element on the web page, right-click, and select the ‘Inspect’ tool.

The element will be highlighted in the source code.

Editing and Debugging Code in Inspect Element

Both the HTML and CSS in the inspect element window are editable. You can double-click anywhere in the HTML source code and edit the code as you like.

You can also double-click and edit any attributes and styles in the CSS pane.

To add a custom style rule, click the + icon at the top of the CSS pane.

As you make changes to the CSS or HTML, those changes will be reflected in the browser instantly.

These changes will be saved in your browser’s temporary memory and won’t affect your website.

To make the changes, you will have to add custom CSS to your theme or edit the relevant template to add the changes you want to save.

Before you start editing your existing WordPress theme using the Inspect Element tool, make sure that you create a WordPress backup.

Easily Find Errors On Your Site

The Inspect tool has an area called Console, which shows errors that occurred during the page load.

When trying to debug an error or requesting support from plugin authors, it’s always helpful to look here to see if there are any errors or warnings.

Using the Console tab, you can troubleshoot several common issues. For instance, these are only a few things you can do with the inspect console:

• Find out why an image you added is not displaying
• Why a plugin or theme is not behaving properly
• Which plugin or browser extension may be causing the conflict

Even non-technical users can look at it to find clues about where an issue is coming from.

For example, if you were an OptinMonster customer wondering why your optin is not loading, then you can easily find the problem “Your page slug does not match.”

Tools like the Inspect Element Console and SupportAlly help you get better customer support. The technical support team loves customers who take the initiative to provide detailed feedback on issues.

How to Use Inspect Tool on Mobile (iOS or Android)?

Mobile browsers don’t have developer options turned on by default. Manufacturers assume that most mobile users wouldn’t use it.

The easiest way to troubleshoot and use the inspect tool for mobile issues. Is to use the mobile emulation feature in your desktop browser.

You can then choose a device from the top or screen dimensions. Chrome will then emulate that screen size for you.

Frequently Asked Questions

The following are some of the most commonly asked questions by our users about using the Inspect tool.

1. Can I use the Inspect tool on any website or just my own?

Yes, you can use the inspect tool on any website. Simply right-click and select the Inspect tool from the browser menu to see the code behind any website. Studying the code on other websites is a quick way to learn and improve your own CSS/HTML skills.

2. Why can’t I find the Inspect tool in my browser?

Google Chrome may hide the Inspect option in the right-click menu, particularly when multiple extensions add their own options to the right-click menu. However, you can always open the Inspect tool by clicking on the three-dot menu in the top-right corner of the browser screen and selecting More Tools » Developer Tools. You can also use the CTRL + Shift + I (Command + Options + I on Mac) keys on your keyboard to open it.

Bonus Resources:

It is exciting to be able to make changes to your website as a DIY WordPress beginner.

Over the years, we have seen countless beginners with zero website-building experience become professionals in the field.

If you want to further explore how you can utilize the Inspect tool to do more things on your WordPress site, then the following resources would be a good starting point.

• How to customize your WordPress theme – This beginner’s guide shows how to customize your WordPress theme step-by-step.
• How to properly add custom CSS in WordPress – This tutorial shows multiple ways to easily add your custom CSS in WordPress.
• How to optimize CSS delivery in WordPress – Too many individual CSS files can degrade performance. This tutorial shows how to optimize CSS delivery to boost WordPress speed.
• Default WordPress-generated CSS cheat sheet – This handy guide will show you many CSS classes that WordPress adds to different elements by default. You can then use those CSS classes in your custom CSS code to change the appearance of those elements.

We hope this article helped you learn the basics of the Inspect Element and how to use it with your WordPress site. You may also want to take a look at the default WordPress generated CSS cheat sheet to speed up your theme development skills.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.