How to Inspect Element in Chrome

Inspecting web elements in a browser lets developers, designers, or digital marketers manipulate the appearance of a web page. Developers or testers are more likely to use this feature to debug a particular element, conduct layout tests, or perform live CSS editing.

The inspect element feature is an easy-to-use yet powerful feature for web developers.

It is exceptionally useful as it enables users to manipulate the appearance of specific web pages. It allows web designers to instantly modify the CSS properties like fonts, sizes, colors, etc. to get a sense of how a web page would look if certain changes are made.

Moreover, it is the best solution for users looking to make temporary changes on a web page on their local browsers.

This article will demonstrate two simple methods to inspect web elements on the Chrome browser.

Inspecting Element on Chrome

The methods discussed here are only applicable to Chrome browsers, and the steps for inspecting web elements may differ for other browsers.

Method 1: Inspect Element Using Chrome Developer Tools

Listed below are the steps to inspect element in the Chrome browser:

1. Launch Chrome and navigate to the desired web page that needs to be inspected. (Let’s consider bstackdemo.com in this example)
2. At the top right corner, click on three vertical dots
3. From the drop-down menu, click on More tools -> Developer Tools
4. Alternatively, you can use the Chrome inspect element shortcut Key.
   • MacOS – Command + Option + C
   • Windows – Control + Shift + C.

• The Developer tools will open up along with Console and few other tools. Resize the editor box by dragging the corners for convenient viewing and debugging.

Clicking on the Inspect option from the right-click menu will directly open the Developer tools including the editor, Console, Sources, and other tools. Refer to the image below for a better understanding.

Try Testing on Chrome Browser Versions

Now, let’s move on to the second method for inspecting web elements on desired versions of Chrome.

Method 2: Using BrowserStack Live (for specific Chrome versions)

BrowserStack is a cloud-based testing platform that empowers developers and testers to test their websites across popular operating systems and browsers.

Its real device cloud comprises 3000+ real devices and browsers for comprehensive remote testing. BrowserStack’s infrastructure includes popular browsers like Chrome, Firefox, Safari (including latest and legacy versions), and devices from Samsung Galaxy, Apple (iPhones and iPads), OnePlus, Xiaomi etc. Check out the complete list here.

To inspect a web element on a specific Chrome version, follow the steps below:

1. Sign up for a free trial on BrowserStack Live.
2. Navigate to the Live dashboard after signing up.
3. Select the desired operating system (Android, Windows, macOS). Let’s consider Windows 10 as an example.
4. Select Chrome and its desired version (v.90 in this case).
   
5. Click on the desired Chrome version. A new Live session will be initiated on a real Chrome browser.
6. Navigate to the desired website and perform the steps mentioned in the first method.

With 72.5% of the overall browser market share, Chrome is the undisputed market leader. Naturally, users are more likely to inspect or diagnose their websites on Chrome. While Safari and Firefox hold 13.1% and 3.4% respectively.

Thus, it is imperative for users to know the steps required to inspect elements on Chrome. The methods illustrated above will help users easily inspect web elements on Chrome – an integral part of Chrome testing. Additionally, the second method will prove to be very handy for users willing to debug or inspect websites on a specific Chrome version.