Inspecting Websites with Developer Tools

Mastering inspect element functionality is key to debug websites, applications and requests. Become a debug aficionado in no time.

chromeinspect-elementqatesting

February 11, 2015


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.

  1. Download Google Chrome, then open it.

  2. Go to your application. Once it’s open head to you web application. Mine for instance is at http://thoughts.metaterran.com.

  3. Open the Web Inspector. Right Click on any part of the website and you should see a menu with an option Inspect:

  4. After selecting Inspect, you should see a window pop-up in either one of three ways:

Type Screenshot
On the side
On the bottom
In a new window
  1. 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(&quot;/logos/doodles/2018/celebrating-mister-rogers-5592633123536896-vacta.gif&quot;) center center / 100% no-repeat; transition: opacity 2s ease 0s;"></div>