• Skip to main content
  • Skip to primary sidebar
  • Skip to footer
  • Phones
  • Media Players
  • Banking and Finance
  • Tips
  • Tutorials
  • Computer
  • Disclaimer
AboutDevice Favicon

About Device

About Device Provides Specification, Review, Comparison, Features, Price of Phones and Computers, How To, General Computer Problem Tutorials, Solution, Education, Tips and Tricks with Videos and Images for faster understanding

You are here: Home / Tutorials / How to Use Inspect Element on your Web Browser

How to Use Inspect Element on your Web Browser

How to Use Inspect Element on your Web Browser

You may not know it, but how this website came to being was by coding. This is foreign to the average internet users who just comes to visit their favourite websites and go off the browser. But for you who is a developer or software engineer, they are many things behind a website you would love to know and the tools needed to access these things are in your favorite web browser – Chrome, Safari, name it, they are there. To check the codes involved in getting that website look that way, you have to use the Inspect Element feature which shows you what the website is made up code-wise. In this post, we give a guide on how to use the Inspect Element feature on the major browsers.

How to Inspect Element on Chrome

Chrome is one of the most popular browser and has many features. One of such features is the ability to inspect element of a webpage. The steps below show how to inspect Element on the Google browser:

Method 1

1. Visit the website you want to inspect

2. Right-click on any part of the page and when the menu shows, select Inspect.

How to Use Inspect Element on Web Browsers
Right-click and select Inspect; Source: alphr.com

Method 2

1. Look over the right corner of the toolbar where you will find these vertical dots. Click this icon

2. Select More Tools in the menu that comes up.

How to Use Inspect Element on Web Browsers
Select More Tools; Source: alphr.com

3. Select Developer Tools.

How to Use Inspect Element on Web Browsers
Select Developers Tools; Source: alphr.com

Method 3

On your keyboard, press F12 on Windows or CMD + Options + I on Mac to bring up the inspect element feature.

How to Inspect Element on Microsoft Edge

Microsoft Edge works similarly as Chrome in the aspect of opening up the Inspect Element function. Follow the steps below to get there.

Method 1

1. Go to a website.

2. At the upper right corner of the toolbar, a three vertical dots icon exists there which you should click.

3. When the menu opens up, locate and select More Tools.

How to Use Inspect Element on Web Browsers
Select More Tools; Source: alphr.com

4. Select Developer Tools

How to Use Inspect Element on Web Browsers
Click Developers Tools; Source: alphr.com

Method 2

1. Place your mouse cursor anywhere on the screen and right-click.

2. Click Inspect.

Method 3

Use the keyboard shortcut Ctrl + Shift + I to bring up the developer tools.

Doing this will open up a new pane down your browser. This is where you can access the Developer Tools which also contains the Elements tab.

How to Re-position the Elements Tab Panel

By default, the panel will be placed at the bottom of the browser’s screen but if you wish, you can change its position. Here’s how to do that:

1. Locate the menu icon of the Developer Tools panel.

2. Choose from the dock side (left, right, or bottom). You can also choose to undock to a separate window.

How to Use Inspect Element on Web Browsers
Select a dock option; Source: alphr.com

You can even resize the Developer panel by dragging the edge of its frame.

How to Use Inspect Element on Safari

Safari which most Mac users use can also allow you to inspect element. The process is a little different from what you will find on Chrome. Check out the steps below:

1. Launch Safari.

2. Locate “Safari” in the header tab and click it.

3. Click Preferences from the menu.

4. At the top of the screen likes the gear icon, click this icon.

5. Select the checkbox that reads “Show Develop menu in menu bar”

Once you do this, the Inspect Element function will be activated. You can now open any website and select Inspect. You can also use keyboard shortcut: CMD + Option + I .

Rounding Up…

Whether you want yo check the CSS property that was used in a particular part of the website or you want to know how the developers coded the overall website, the Inspect Element tool is your best friend. It opens up the website’s developers approach to coding the website and helps you learn something too. We hope you found this post helpful? If you did, kindly leave a comment and don’t forget to share.

You can also check out

How To Edit A Zoom Recording
How to Change your Background in Zoom
How to Change Your Name in Zoom Before a Meeting
How to Change Your Name in Zoom During a Meeting
How to Add Photos on TikTok
How to Know Those That Viewed Your Profile on TikTok
TikTok: How To Edit A Video Caption After Posting
How to Check NIN on MTN, Glo, Airtel and 9mobile
DStv Subscription Package, Prices with Channels
Startimes Subscription Package, Prices, And Channel List For Each Plan
GOtv Subscription Package GOtv Max, Jolli, Jinja and Lite Channel List and Price
GOtv Assigned Channel Number with Channel
GoTV Customer Service Contact, Social Media Handle & Email Address
StarTimes Customer Care Contact, Social Media Handle & Email Address
Top 5 Best Web Browsers for Android
Top 5 Best Music Player Apps for Android
Top 5 Best Alarm Clock Apps for Android
Top 5 Best eBook Reader Apps for iPhone and iPad
Top 4 Best VPN Apps for iPhone and iPad
Top 5 Best Apps for Monitoring Data on iPhone and iPad
Top 5 Best Translation Apps for iPhone and iPad
Top 5 Best Alarm Apps for iPhone and iPad
Top 5 Best Calendar Apps for iPhone and iPad
Top 5 Best Photo Editing Apps for iPhone and iPad

Hope with this, you have learnt How to Use Inspect Element on your Web Browser.

Please share and like below, also comment below for any problem faced or encountered.

  • How to Batch Archive Instagram Posts
  • 5 Best MailChimp Alternatives
  • How to Change the Default Google Account
  • How to Translate a Web Page in Google Chrome
  • How to Add a Text Box in Google Docs
  • Privacy Options you can Explore on Telegram
  • How to See the Size of your Folders in Google Drive
  • How to Calculate Time in Google Sheets
  • How to Resize Cells in Google Sheets
  • How to Delete your Discord Account

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

LATEST

  • Best Bluetooth Speaker to Buy in Nigeria
  • Best Power Bank Brand in Nigeria
  • Best Standing Fans to Buy in Nigeria
  • Best Grammar Checker
  • Tecno phantom V yoga Full price and Specifications

Footer

About AboutDevice

About Device Provides Specification, Review, Comparison, Features, Price of Phones and Computers, How To, General Computer Problem Tutorials, Solution, Education, Banking and Finance Tips and Tricks with Videos and Images for faster understanding

Disclaimer

Please do not share any personal information in the comment section and do not contact any email placed in comment section.

Please This is Not Bank Website, This is a Blog and we provide reply based on our knowledge. Please any information shared is at Your Risk.
Checkout Full Disclaimer

Pages

  • About US
  • Contact Page
  • Disclaimer
  • Privacy Policy

Copyright © 2023