[![Inspect Element Basics 1](https://coma.lv/wp-content/uploads/2025/10/inspect.webp)](https://coma.lv/wp-content/uploads/2025/10/inspect-1030x451.webp)

# Inspect Element Basics

Oct 31, 2025/by [Vadim Pavlovich](https://coma.lv/en/author/djcoma/)

Have you ever wanted to temporarily edit a page to see how it would look in certain colors with certain fonts and so on?

This is possible with a tool you already have in your browser called Inspect Element. It is a dream come true for all users who like to customize websites themselves. In this article you will learn the basics of using this tool and how it can be used.

## What Is Inspect Element, or Developer Tools

Modern browsers such as Google Chrome, Mozilla Firefox, Edge and Safari have built-in tools that let web developers track down errors and edit elements. These tools show the HTML, CSS and JavaScript code, as well as how the browser works with that code. With these tools you can see how your site will look after your corrections, without making changes to the site itself.

Writers will also appreciate this tool, because it lets you easily change personal information before taking a screenshot: no more spending time blurring confidential data in Photoshop. For support agents, in turn, it is a great way to find errors that affect how a site is displayed correctly.

In this article we will look at how it works in Google Chrome, since it is our favorite browser.

## Launching the Inspector and Finding the Code

You can launch the code inspector with the keyboard shortcut Ctrl + Shift + I. Alternatively, you can right-click anywhere on the page and choose it from the browser menu.

![WordPress](https://coma.lv/wp-content/uploads/2025/11/Ekranuznemums-2025-11-09-230137.jpg)

Your browser will split into two panes, and the bottom one will show the source code. The developer code is also divided into two panes. On the left you see the HTML, and on the right the CSS rules.

![WordPress](https://coma.lv/wp-content/uploads/2025/11/Ekranuznemums-2025-11-09-231603.jpg)

On the left you see the HTML, and on the right the CSS rules

When you hover over the HTML source, you will see the selected area highlighted on the page itself. You will also see the CSS rules change to show the CSS for the element you are looking at.

![WordPress](https://coma.lv/wp-content/uploads/2025/11/Ekranuznemums-2025-11-09-231919.jpg)

The selected area

You can also simply hover over any element on the page, right-click and choose Inspect. The selected element will be highlighted in the source code.

## Editing and Debugging Code in Inspect Element

Both panes in the Inspector are editable. You can double-click anywhere and edit the code.

![WordPress](https://coma.lv/wp-content/uploads/2025/11/Ekranuznemums-2025-11-09-232224.jpg)

You can also double-click and edit any attributes and styles in the CSS pane. To add your own rule, click the plus icon or simply click just below the last rule.

![WordPress](https://coma.lv/wp-content/uploads/2025/11/Ekranuznemums-2025-11-09-232504.jpg)

As soon as you make changes to the code, they are instantly shown in the browser. But remember that after refreshing the page (refresh or F5), all the changes you made through Inspect Element will disappear.

Note that none of your changes are saved anywhere. The code inspector is just a debugging tool and does not change the files on your server. This means that if you refresh the page, all your changes will disappear. To keep them on your site, you will need to edit the files of your WordPress theme.

## Easily Find Errors on Your Site

The Inspector has an area called **Console** that shows all the errors on your site. Before debugging or asking the plugin authors for help, it is always useful to look here to better understand the nature of the error.

![WordPress](https://coma.lv/wp-content/uploads/2025/11/Ekranuznemums-2025-11-09-233434.jpg)

For example, if you are an [OptinMonster](https://optinmonster.com/) user wondering why your optin does not load, you can easily find the error “your page slug does not match”. If your sharebar did not work correctly, you may notice that there is a JavaScript error. Tools like Inspect Element and [SupportAlly](https://supportally.com/) will help you get more effective support. Any support service you contact with your questions appreciates customers who show initiative and provide as many details about the problem as possible.

And this is only a small part of what you can do with such a powerful tool as Inspect Element. DevTools include tabs and tools such as **Lighthouse** for checking performance, SEO and Core Web Vitals, as well as tools for analyzing network requests (**Network**) and profiling performance (**Performance**). These features help you identify bottlenecks in the speed and structure of your site, making it faster and more convenient for users.

---

*Our specialization is WordPress website development and maintenance. Contact us for a free consultation — [vadim@coma.lv](mailto:vadim@coma.lv), [+371 29394520](tel:+37129394520)*

---