How to Inspect Element in Any Browser | #firefox | #chrome | #microsoftedge

  • Inspect Element is a command found in all modern browsers that allows you to see the HTML that makes up the current webpage. 
  • In any browser, you can right-click (Ctrl-click on a Mac) and choose Inspect. 
  • Many browsers also allow you to inspect elements by making a selection in the browser’s main menu.

Whether you’re an aspiring developer, digital marketing professional or just curious about the underpinnings of the web, there’s a simple way to explore the actual code behind any website. 

Using the Inspect Element command in any web browser, you can not only see the HTML used to create the page — a useful learning tool in and of itself — but you can edit that code and see how it affects the page. Any changes you make to a webpage are local and only appear in your browser until you refresh or close the page. 

The Inspect Element console in Chrome.

You can use the Inspect Element command to explore the HTML code behind any website.

Dave Johnson


How to inspect element in Chrome

There are several ways to use the Inspect Element command in Chrome. To open the Inspect Element page, go to the website you want to view and then do either one of these:

  • Use the right-click menu. Right-click any part of the website and then choose Inspect from the popup menu. 
  • Use the Chrome menu. Click the three-dot menu at the top of the screen, choose More tools, then Developer tools.  

The right-click menu in Chrome.

The easiest way to inspect the HTML of a webpage in Chrome is to right-click and choose Inspect.

Dave Johnson


How to inspect element in Firefox

Likewise, Firefox offers a couple of ways to inspect elements in a webpage: 

  • Use the right-click menu. Right-click any part of the website and then choose Inspect from the pop-up menu. 
  • Use the Firefox menu. Click the three-line menu at the top of the screen, choose More tools, then Web Developer Tools. When the console opens at the bottom of the screen, click Inspector

The main menu in Firefox.

You can open the Inspector in Firefox by going to More tools in the main menu.

Dave Johnson


How to inspect element in Microsoft Edge

There is just one way to reach the Inspect Element tool in the current version of Microsoft Edge — using the right-click menu. Right-click any part of the website and then choose Inspect from the pop-up menu. 

The right-click menu in Microsoft Edge.

In Edge, right-click anywhere on the webpage and choose Inspect.

Dave Johnson


How to inspect element in Safari

Unlike most modern browsers, the Inspect Element command is disabled by default in Safari — but it’s easily turned on. 

1. Start Safari.

2. In the menu bar, choose Safari, then Preferences

3. Click the Advanced tab.

4. At the bottom of the window, check the box for Show Develop menu in menu bar

Preferences options in Safari.

Before you can use the inspect element command in Safari, you need to enable it in Preferences.

Dave Johnson


Once you’ve enabled this feature, you can get to the Inspect Element command in two different ways:

  • Use the Ctrl-click menu. Ctrl-click any part of the website and then choose Inspect Element from the pop-up menu.
  • Use the Develop menu. Click Develop in the menu bar at the top of the screen, then choose Show Web Inspector

The right-click menu in Safari.

In Safari, Ctrl-click on the webpage and choose Inspect Element.

Dave Johnson




Original Source by [author_name]

Leave a Reply

Your email address will not be published.

1 + four =