Web developers and designers' job when creating a website is for the users to be convinced in one singular entity instead of making it look like just a series of HTML elements formatted to make a website look nice. However, using the right tool, even the non-developers can now check on the back curtain of a website to see what's happening on the site's back-end.
The classic "view page source" trick might be familiar to you, which displays the page's raw HTML in a browser window. However, there's an easier way to do the detective work on your site: The Inspect Element Feature lets the user view and modify a website's front-end. This feature can be useful when a web developer or designer is building a website or if an individual is learning how a website works.
This article will help you understand what is "inspect element", and how to do it on four popular or most known browsers.
Web professionals’ secret weapon is the inspect element. It is what developers, designers, and marketers frequently used to see the inside of any website whether it's their own website or not, to preview the website’s content, style, bugs that need to be fixed, or to learn how the website is built. For example, if you as a user or a developer find an interesting interface on your competitor's website, the inspect element will allow you to see the HTML and CSS that make it up.
How to Inspect Element #
Currently, all modern web browsers have a native tool to inspect the element. Below are the different steps or instructions on how to use the inspect element tool in four major desktop web browsers: Google Chrome, Firefox, Safari, and Edge. In this article, I'll be using mhthemes.com as an example.
- How To Inspect Elements in Chrome
- How To Inspect Elements in Firefox
- How To Inspect Elements in Safari
- How To Inspect Elements in Edge
How To Inspect Elements in Chrome #
There are several ways for you to open the developer tool:
- Using your mouse, right-click on any part of the page and choose Inspect. Choosing the Inspect will bring you to the element in the inspector view.
- In the top right corner of your web browser, you will see the three dots in which you can Customize and control Google Chrome, there, you can click More Tool > Developer Tools > Elements.
- Use shortcuts: For Windows: control-shift-C, for macOS: command-option-C.
With inspect element you can review and check your website's responsiveness. You can do the steps above and click the Icon beside “Elements”.
How To Inspect Elements in Firefox #
To open the Firefox Inspector, you can:
- Using your mouse, right-click on any part of the page and choose Inspect. Choosing the Inspect will bring you to the inspector view.
- In the top right corner of your firefox browser, you will see the three lines in which you can click More Tool > Web Developer Tools > Inspector.
- Use shortcuts: For Windows: control-shift-C, for macOS: command-option-C
The inspect element of Firefox is at the bottom of the window by default. To change this, click the three dots in the top right corner of the inspector, there, you can choose the display option that you want.
How To Inspect Elements in Safari #
Before you use Safari's inspect tool, Web Inspector, you first need to enable the Safari Developer tools. To do this, select Safari > Preferences. You will see the preferences window under Advance, there, you have to check the box next to the Show Develop menu in the menu bar. After that, you'll see a Develop option added to the menu above.
Once you've enabled the Safari Developer tools. You can now go to your desired web page. There are three ways to open Web Inspector:
- Using your mouse, right-click on any part of the page and choose Inspect. Choosing the Inspect will bring you to the element in the inspector view.
- From the top menu bar, choose Develop > Show Web Inspector.
- Use the shortcut command-option-I.
By default, Safari's inspector opens at the bottom of the window. You can change this configuration by clicking the icon to position the display on the right side or to open in a separate window - both features are located next to the X icon in the top left corner of the display.
The Safari's inspector panel contains two columns. The first column shows the source HTML, and the second column shows the page's CSS. You can use your cursor to explore the source HTML, there, you can see which lines code of each page (blue highlights are for the content, green highlights for the padding, and orange highlights are for the margins).
How To Inspect Elements in Edge #
To open the Edge Inspector, you can:
- Using your mouse, right-click on any part of the page and choose Inspect. Choosing the Inspect will bring you to the element in the inspector view.
- In the top right corner of your web browser, you will see the three dots, there, you can click More Tool > Developer Tools > Elements.
- Use shortcuts: For Windows: control-shift-C, for macOS: command-option-C
The codes in the “Element” can be edited by clicking the certain codes that you want to edit, from there you can try editing the text, heading tags, paddings, and margins. You can see the changes on the webpage. But don’t worry because the original appearance of the page will re-appear once you reload the page.
Once you learn the basic knowledge of your browser’s inspector tool, you will learn all the information about your favorite websites that are publicly available. With just a few clicks and editing of CSS and HTML code, you can explore how web pages are built, what styles they use, how these websites are optimized for search engines, how web developers format the websites on mobile, and more.