Enter your search term

Search by title or post keyword

How to Inspect Elements Using Chrome, Edge, or Safari Developer Tools

Level up your digital marketing skills with our free courses, expert insights, forums, and social groups!

Check it Out

Inspecting elements of web pages using DevTools is one of the most common tasks for any web developer.

It helps you understand how a web page functions.

But that’s not all — this type of developer tools can also simplify things when you want to develop your own web pages.

But if you don’t know how to use developer tools like Element Inspector, your job as a web developer is going to be more complicated.

That’s why in this tutorial we shall explore how to inspect elements using any of the popular web browsers.

Let’s see!

Frequently Asked Questions

What is the Inspect Command on PC?

The inspect command can be fired on your PC inside the Chrome browser or Microsoft Edge browser by pressing the F12 key or Ctrl+Shift+C on your keyboard.

What is the Inspect Command on Mac?

If you’re a Mac user, you can fire the same inspect command by pressing the Cmd+Option+i keyboard shortcut in the Apple Safari browser.

What You’ll Need to Inspect Elements Using Chrome Developer Tools?

You’ll need only Chrome, Safari, or Mozilla Firefox web browser to inspect elements of a webpage on your PC or Mac.

How to inspect elements using Developer Tools: Step-by-Step Instructions

1. Inspect Elements in Google Chrome and Microsoft Edge

  1. Open the webpage that you want to inspect;
  2. Select the element (i.e. button, text, image, link, animation — anything) on the page that you want to inspect;
  3. Right-click on the selected element and choose “Inspect”.
  4. The selected element will open in a panel on the right side or bottom half of your browser. You can hover your mouse on the parts of code showing in the Inspect panel, and the part of the webpage that the code affects will be highlighted. Clicking the code opens all the CSS styles applied to that element in the bottom half of the inspect panel.

2. Inspect Elements in Apple Safari

In Safari, things are a bit more complex than in Google Chrome.

You first need to enable the Web Inspector tool before you can start using it to inspect the web pages.

Here’s the full process:

  1. Go to the Preferences of your Safari browser;
  2. Navigate to Advanced preferences, and enable the “Show Develop menu in menu bar” option by checking its checkbox. This will enable the Web Inspector and the whole developer menu.

Now you can start inspecting the web pages or specific elements of web pages.

Here’s how to do that:

  1. Open the web page you want to inspect;
  2. Select the element you want to inspect;
  3. Launch Safari Web Inspector by pressing Cmd+option+i on your keyboard. Alternatively, you can also right-click the selected element and choose the “Inspect Element” option.

What next?

Once an element is open in the Inspection panel, you can edit and change its CSS styles or HTML code to see how your changes would affect the element before making those changes live on the page.

Or else, if you wish to copy an element from some other webpage, you can copy its code along with CSS styles and paste it into your own webpage.

If not always, it can work fine in many cases.

Similar Tutorials to Check Out

  • How to Learn Coding: Inspecting an element is one thing, and diagnosing the bugs found in it is another. It requires coding skills to do that. If you want to learn to code, this tutorial can guide you in the right direction.
  • How to Unzip Files: Building websites requires downloading many types of packages, plugins, themes, and extensions, which often come in compressed.zip folders. If you don’t know how to extract the contents of such folders, it can be problematic. This tutorial explains how to do that.
  • How to Fix the White Screen of Death: Finally, this tutorial touches upon the issue of the White Screen of Death (WSoD) error that is faced by many people on their computers.

Wrapping Up

Using developer tools like Element Inspector is essential for WordPress development and web development in general.

By now you should be skilled enough to use the Developer Tools included in Microsoft Edge, Google Chrome, and Apple Safari to inspect elements of web pages.

If you still have any questions, feel free to share them in the comments and we’ll try to answer them at the earliest.

Also, do share this guide on social media, because sharing is caring!

Leave a Comment