Element panel is a feature in the chrome developer tools that allows you to inspect and modify a site from the front-end. It’s used to change the appearance and content of a web page by editing its CSS and HTML files.
Accessing element panel from Google Chrome is quite easy. All you do is head to the upper right side of your screen and click on the Menu bar -> More tools -> Developer tools.
Once an element box opens, you’ll see that it’s divided into three different parts. Here’s a little breakdown of each part:
DOM panel is a tool used to change the page layout. You’ll have full control of HTML files and can modify them freely. It’s located in the upper part of the box under Elements.
CSS panel can be used to modify the style rules of a homepage by changing, adding, or removing CSS properties — fonts, sizes, and colors are some of the examples. You can find this panel in the middle part under Styles.
Console panel will show you what’s new in developer tools. It’s in the bottom part of the element box.
Note: this article will only show you how to change page attributes using DOM and CSS panels.
What Can You Do With It?
Here are a few things you can do with DOM and CSS panels:
CSS live-editing — allows you to see the changes you make immediately as you edit in CSS panel.
Layout testing — lets you test different layouts on a website before making permanent changes from the backend.
Diagnosing debug — enables you to see if there’s any broken code on your site.
Temporary editing — allows you to tweak around the web page freely as every change made in it is temporary and only applies to your browser.
Why Do You Need to Inspect Element?
Inspect element can be an excellent solution for people who need to make temporary changes on a web page without a fuss. Moreover, it also offers other benefits, such as:
Content writers — digital writers who need to take a screenshot of a webpage that contains sensitive information can use the inspect element to remove it.
Web designers — this feature can be really handy to see how certain design and layout changes would look like before implementing them on a web page.
Digital marketers — inspect element allows users to see hidden keywords on a website so digital marketers may use this feature to their advantage on their competitor’s web page.
How to Inspect Element on Chrome?
This section will only show you how to inspect elements on Chrome as it’s a Google Chrome tutorial, and therefore not applicable to other browsers.
Steps to inspect element on Google Chrome:
Open any site on Chrome and select the element you want to inspect. Here we will be using Hostinger’s homepage as an example.
Click on three vertical dots on the sidebar, a drop-down will appear then select More tools -> Developer tools. Alternatively, you can also use these shortcuts: command+option+c on Mac OS, and control+shift+c on Windows or Linux to do it.
The element box will pop up and you can make changes as needed. You can also resize the editor box by dragging its corners.
Pro tip: The easiest way to open the Chrome inspector is by right-clicking on the page element you want and then scroll to the bottom and click Inspect.
Once you get to the final step, a few options will appear when you click around on the panels. Let’s see what they are and how they work.
Adding an element — is used to add any elements you want on a web page. Right-click anywhere on DOM panel and select Add attribute from the drop-down menu to access it. You have to understand basic HTML to be able to pull this off though.
Delete an element — can be used to omit any element from a homepage. Simply click on the element you want to remove, then select Inspect, click on the highlighted section in the panel and choose Delete element.
Hide an element — this feature can hide an element from showing up on a web page. It has similar steps of deleting an element, you just have to choose Hide an element option. It can also be undone by doing the same steps.
Modify a site’s CSS — freely modify the CSS properties by editing them in the CSS panel. You can change fonts, sizes, colors, borders, margins, etc.
Pro tip: All changes can be undone by pressing control+z for Windows and Linux, or command+z for Mac OS.
There you have it! We’ve explained how to inspect elements on Chrome. Pretty easy, right?
Let’s take a look at the steps once more:
Go on any website and select the element you want to inspect.
Right-click on the element and choose Inspect.
Make changes as needed — DOM panel is used for HTML layout edits while CSS changes the styles of the web page.
Add, delete, hide or modify any elements on the panels using the steps mentioned above.
Remember, don’t be afraid to experiment with it as it only affects your browser and not the website itself. Good luck!
Linas started as a customer success agent and is now a full-stack PHP developer at Hostinger. He is passionate about making a positive impact on people by utilizing user-driven development techniques. As much as he enjoys coding and changing the world, he secretly dreams of becoming a rock star.