Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

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.

Using the inspect tool for DIY web developers

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.

Opening Inspect developer tools in Google Chrome

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

Subscribe to WPBeginner

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.

Opening Inspect developer tools in Google Chrome

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.

Launch 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.

Choose dock position

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.

Selected HTML highlighted in preview

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.

Edit HTML using Inspect tool

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.

Editing CSS in the inspect tool

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.

Important Note: Any changes you make here are not saved anywhere. Inspect element is a debugging tool, and it does not write your changes back to the files on your server. If you refresh the page, all your changes will be gone.

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.

Inspect errors in Console

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.

Using inspect tool in mobile mode

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.

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.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us. Here's our editorial process.

Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit - a collection of WordPress related products and resources that every professional should have!

Reader Interactions

26 CommentsLeave a Reply

  1. Syed Balkhi

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Dennis Muthomi

    The mobile emulation feature is the best tool, just the other day, I was trying to figure out why my site wasn’t displaying well on iPhones. The emulation feature allowed me to quickly diagnose that an element wasn’t scaling down correctly.
    Being able to visually debug responsive issues across various devices without needing to test on physical devices saves so much time.

    • Dayo Olobayo

      You’ve got the right idea. Mobile emulation is super useful for basic checks. It’s important to remember though that emulators can’t perfectly replicate every device and browser combination. Testing on a few physical devices whenever possible is still a good practice.

    • Mrteesurez

      Yes, I completely agree, the mobile emulation feature is a game-changer. I’ve had a similar experience where my site looked perfect on desktop but had issues on specific mobile devices. Using emulation, I quickly identified that my navigation menu was breaking on smaller screens. This feature not only saved me the hassle of testing on multiple physical devices but also allowed me to fix the issue in real-time. It’s a must-have tool for anyone serious about responsive design, ensuring your site looks great no matter where it’s viewed.
      Thanks for sharing your experience.

  3. Mrteesurez

    This is helpful, I don’t know one can actually edit the code and see changes in real time.
    My question:
    1) Can I use the inspection tool to see the PHP or anynbackend code ??
    2) Is there anyway I can use the inspection tool on mobile ??

  4. Jiří Vaněk

    Thanks for this guide. Now is much more easier for me to find CSS class in code for making any changes. The CSS code can make AI for me, becouse Im not good at coding, and rest Im able to find in isnpect tools. That is all what I need.

  5. hossam ismail

    hey!
    I can’t change my heading font size in mobile version.
    For example,
    Heading font size in desktop is 24px
    but it is also 24px in mobile ??
    this issue especially with heading, how can i fix this?

    • WPBeginner Support

      If you reach out to your theme’s support they should be able to let you know how they have set up the mobile CSS

      Admin

  6. Esmeraldo Lleshi

    How can I make the html that i edited to stay permanently?

    • WPBeginner Support

      It would depend on what was edited, if is CSS then you would add the CSS under Appeaance>Customize>Additional CSS. If it is more of an HTML change then you would want to check with your theme’s support as WordPress themes are built with templates, for a bit more on that you would want to take a look at our glossary page here: https://www.wpbeginner.com/glossary/template/

      Admin

  7. Milan

    Once I make changes, how I can save update/edited page? Whenever I close it it revert to previous version.

    • WPBeginner Support

      Inspect element is for testing the changes, if you’re editing the CSS you would want to copy the CSS you added and paste it under Appearance>Custmize>Additional CSS :)

      Admin

  8. Kristina

    My dilemma is that once I inspect an element, I’d like to know what PAGE in my theme this element appears on. So there’s an e lement that appears as part of my theme, throughout my site, and when I inspect element, i can see the code, but can’t determine what portion of the theme has it, so that I can change it in the child theme, permanently. I tried editing one page, directly from the inspect element pane, but as soon as I exited and returned, my change was gone and it was “back to normal.”

    Anyway to inspect to element and determine where I can find it in my theme files?

    Thank you.

    • WPBeginner Support

      Hi Kristina,

      You can try to guessing the template file based on where the code appears in the page layout. For example, if it is in header section then you may look for it in the header.php file. You can also download all your theme files via FTP and then use a tool that allows you to search for text in multiple files at once. One such app is Notepad++ (for Windows), open the app and the go to Search > Search in Files.

      Admin

  9. stephanie

    This is such great content, thanks a lot for sharing.

    Little problem for me, nothing happens when i click ‘inspect element’ in my chrome browser. Any help or suggestions?

    • WPBeginner Support

      Hi Stephanie,

      If you are using any browser extensions, then uninstall all of them. If the problem persists, then try reinstalling Google Chrome.

      Admin

  10. avinash

    Sir,
    Actually i am new in wordpress can you tell where from i can edit the Html elememt and where i
    can found the element.style in wordpress theme.

  11. Isaac Anim

    This is a very great post you have here. But I need to draw your attention to something.

    I don’t know if you have noticed but this particular article has being stolen. It looks like the culprit only goes around the web stealing content. As I write this comment, he has copied about 5 of my articles.

    The website is even not in Google Search. I was just checking how my website looks in Yandex search results and I happen to find this thief.

    Here is the link to the stolen article

  12. Ethan

    I am curious, why isn’t your website mobile friendly?

    • Saviour Sanders

      I’ve been wondering about the same thing.

  13. Sila Mahamud

    Customizing WordPress for DIY Users and you have also highlighted What is Inspect Element or Developer Tools? You also given us the video tutorial the basic of inspect elements. To be honest that is great content wherever you share with us. Thanks a lot for sharing this content with us.

Leave A Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.