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.
Note: For developers or testers seeking to inspect elements on a specific Chrome browser version, refer to the second method.
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:
Step 1: Launch Chrome and navigate to the desired web page that needs to be inspected. (Let’s consider bstackdemo.com in this example)
Step 2: At the top right corner, click on three vertical dots
Step 3: From the drop-down menu, click on More tools -> Developer Tools
Step 4: Alternatively, you can use the Chrome inspect element shortcut Key.
MacOS – Command + Option + C
Windows – Control + Shift + C.
The Developer tools will open along with the Console and a few other tools. You can resize the editor box by dragging the corners for convenient viewing and debugging.
One of the easiest ways to inspect a web element in Chrome is to right-click on it and select the Inspect option.
Clicking the Inspect option from the right-click menu will open the Developer tools, including the editor, Console, Sources, and others.
Read More: How to Inspect Element in Firefox
Method 2: Using BrowserStack Live (for specific Chrome versions)
BrowserStack is a cloud-based testing platform that allows developers and testers to test websites across various operating systems and browsers. Its real device cloud includes 3500+ devices and browsers, covering popular options like Chrome, Firefox, Safari, and devices from brands like Samsung, Apple, OnePlus, and Xiaomi.
To inspect a web element on a specific Chrome version, follow the steps below:
- Sign up for a free trial on BrowserStack Live.
- Navigate to the Live dashboard after signing up.
- Select the desired operating system (Android, Windows, macOS). Let’s consider Windows 10 as an example.
- Select Chrome and its desired version (v.90 in this case).
- Click on the desired Chrome version. A new Live session will be initiated on a real Chrome browser.
- Navigate to the desired website and perform the steps mentioned in the first method.
Conclusion
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.
Follow-up Read: How to inspect element on iPhone Safari
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.
Featured Article
