Inspect Element in Chrome
The steps below should resemble inspecting elements on any browser. You can achieve this functionality on Chrome, Firefox, Safari and Internet Explorer.
Download Google Chrome, then open it.
Go to your application. Once it’s open head to you web application. Mine for instance is at http://thoughts.metaterran.com.
Open the Web Inspector.
Right Clickon any part of the website and you should see a menu with an option
Inspect, you should see a window pop-up in either one of three ways:
|On the side|
|On the bottom|
|In a new window|
- Explore the mark up. For instance, I’m gonna choose to inspect the header video from Google:
I can inspect this by right-clicking on the item, or element, and selecting
Inspect. And I would see:
The below is telling me that the header video is contained in a
div. This information and feature is important because it allows me as a developer to debug my application. As a test engineer, this functionality allows me to map out dependancies for my application.
<div style="position: absolute; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); width: 100%; height: 100%; cursor: pointer; background: url("/logos/doodles/2018/celebrating-mister-rogers-5592633123536896-vacta.gif") center center / 100% no-repeat; transition: opacity 2s ease 0s;"></div>