Inspect Element is one of the developer tools found in most web browsers like Chrome, Safari, and Firefox. By using this feature, anyone can view and edit the source code of any website. With the Inspect feature, you can even access HTML Codes, CSS, JavaScript, and media files. You can easily open the developer tools on the Chrome browser using shortcuts, the Chrome tools menu, etc. Any changes you made with the Chrome inspector will disappear when you reload the page.
How to Inspect Elements in Chrome Browser [Windows & Mac]
There are three ways to inspect elements on Google Chrome. All the methods are discussed below. Before following the steps below, ensure to update Google Chrome to the latest version.
Using Shortcuts
Using the shortcut keys is the easiest way to open the Inspect menu on the Chrome browser.
Information Use !!
Concerned about online trackers and introducers tracing your internet activity? Or do you face geo-restrictions while streaming? Get NordVPN - the ultra-fast VPN trusted by millions, which is available at 69% off + 3 Months Extra. With the Double VPN, Split tunneling, and Custom DNS, you can experience internet freedom anytime, anywhere.
1. Open the Chrome browser on your PC and visit any website.
2. Press the shortcut keys listed below. The shortcut keys vary between Mac and Windows.
- Windows – Ctrl + Shift + C or Ctrl + Shift + I.
- Mac – Command + Option + C or Command + Option + I.
3. A Inspect Element page will appear on the right side of your screen.
4. On that page, you can view all the HTML and CSS codes that are used on the webpage.
5. Scroll down and choose the element you want to edit, delete, and inspect.
Tip: You can also press the F12 key to open the Inspect menu.
Using Mouse
1. Open any webpage on the Chrome browser.
2. Place the cursor anywhere on the screen.
3. On your mouse, give right-click.
4. A dialog box will appear containing different options.
5. Click on the Inspect option available at the end.
6. The Inspect menu will open on the right side of the webpage.
7. Now, highlight and edit the element.
Using Chrome Tools
1. First, click on the three-dotted icon present at the top right corner of the screen.
2. Click on the More Tools option.
3. After clicking that, you can find another dialog box appearing to the side.
4. In that dialogue box, click on Developer Tools to open the Inspect menu.
5. Once opened, highlight the element and delete or duplicate it based on your preference.
How to Inspect Elements in Chrome Browser [Android Phone]
1. Launch the Google Chrome browser on your Android Phone.
2. Visit any webpage and select the three-dotted icon.
3. Click the Bookmark star icon to bookmark that webpage.
4. Tap Edit at the bottom and type Inspect Element in the Name field.
5. On the URL field, delete the webpage URL and enter the code mentioned below.
javascript:(function () {
var script = document.createElement(‘script’);
script.src=”//cdn.jsdelivr.net/npm/eruda”;
document.body.appendChild(script);
script.onload = function () {
eruda.init()
}
})();
6. After adding the code, navigate back to the address bar and type Inspect Element.
7. Select the Inspect Element with the code from the search suggestions.
8. Now, the Inspect Element icon will be displayed at the bottom right. If you can’t find the icon, restart Chrome.
9. Visit the webpage you want to inspect and tap the Inspect Element icon.
10. Finally, view or edit the elements of the webpage on your Android Phone.
Frequently Asked Questions
The primary reason for this problem is excessive cache files. Clear the cache on Chrome before opening the Inspect Element menu.
Disclosure: If we like a product or service, we might refer them to our readers via an affiliate link, which means we may receive a referral commission from the sale if you buy the product that we recommended, read more about that in our affiliate disclosure.