How to Inspect Element on Chrome


In this article, we will show you how to inspect elements on Chrome and change the appearance of a website. Check it out!

Understanding the Element Panel in Chrome

An element panel is a tool in the chrome developer tools that lets you inspect and modify a site from the front end. A web page can be edited by editing its CSS and HTML files to change its appearance and content.

It is quite easy to access the element panel from Google Chrome. Simply click on the Menu bar -> More tools -> Developer tools in the upper right corner of your screen.

Once an element box opens, you’ll notice it’s divided into three sections. Let’s see how each part is broken down:

  1. DOM panel allows the page layout to be changed. HTML files will be under your control and can be modified at your discretion. The box can be found on the upper right-hand side, under Elements.
  2. CSS panel can be used to modify a homepage’s style rules by changing, adding, or removing CSS properties – fonts, sizes, and colors, for example. This panel is located in the middle part under Styles.
  3. Developer tools are displayed in the console panel. The element box has it at the bottom.

How can you use it?

The following are a few things you can do with DOM and CSS panels:

  • CSS live-editing allows you to see your changes immediately as you make them in the CSS panel.
  • You can test different layouts on a website before making permanent changes.
  • Debugging allows you to see if there is any broken code on your site.
  • With temporary editing, you can manipulate the web page freely because any changes you make are temporary and only affect your browser.

Why Should You Inspect an Element?

Using the inspect element can be a great solution for people who need to make temporary changes on a web page without a lot of hassle. In addition, it offers other benefits, such as:

  • Digital writers who need to take a screenshot of a webpage that contains sensitive information can use the inspect element to remove it.
  • A really useful feature for web designers is the ability to preview changes to design and layout before implementing them on a website.
  • A user can see hidden keywords on a website using the inspect element, so digital marketers can exploit this feature on their competitor’s website.

How to inspect an element in Google Chrome:

  • Go to any site on Chrome and select an element you wish to inspect.
  • Select More tools -> Developer tools from the drop-down menu that appears after clicking three vertical dots in the sidebar. On Mac OS, you can use command+option+c, and on Windows or Linux, you can use control+shift+c.


  • You can make changes to the element box as needed. Additionally, you can resize the editor box by dragging its corners.

When you click around on the panels in the final step, you will see a few options. Let’s examine what they are and how they work.

  • Adding an element — is used to add any elements you want on a web page. To access it, right-click anywhere on the DOM panel and select Add attribute from the drop-down menu. However, to pull this off you need to know basic HTML.
  • Delete an element — can be used to omit any element from a homepage. Select Inspect, click the highlighted section and select Delete element. Next, click the element you wish to remove.
  • Hide an element – you can hide an element from showing up on a web page. You simply choose to Hide an element when you want to delete an element, which is similar to the process of deleting an element. The same steps can be undone as well.
  • Modify a site’s CSS — freely modify the CSS properties by editing them in the CSS panel. Among other options, you can change font size, color, borders, margins, etc.


There you go! On Chrome, we talked about inspecting elements. That’s not so hard, is it?

Remember, you only affect your browser, not the website, so don’t be afraid to try it out. Wishing you the best of luck!


Post a Comment (0)
Previous Post Next Post