How to Inspect Web Page Elements

This article explains how to inspect elements in Chrome, Firefox, Safari, Internet Explorer, and Microsoft Edge, including how to enable inspections in IE and Edge.

How to Inspect Web Elements With Your Browser

Websites are built from lines of code, but the results are pages with images, videos, fonts, and other features. To change one of those elements or see what it consists of, find the line of code that controls it. To do that, use an element inspection tool. You don't have to download an inspection tool or install an add-on for your favorite web browser. Instead, right-click the page element, then select Inspect or Inspect Element. How you access this tool varies by browser, however.

Inspect Elements in Google Chrome

In Google Chrome, there are two ways to inspect a web page using the browser's built-in Chrome DevTools:

• Right-click an element on the page or in a blank area, then select Inspect.
• Go to the Chrome menu, then select More Tools > Developer Tools.

Use the Chrome DevTools to copy or edit the Hypertext Markup Language (HTML) markup and hide or delete elements until the page reloads.

When Chrome DevTools opens at the side of the page, change its position, pop it out of the page, search for page files, select elements from the page for a closer look, copy files and URLs, and customize the settings.

Inspect Elements in Mozilla Firefox

Mozilla Firefox has two ways to open its inspection tool, called Inspector:

• Right-click an element on the web page, then select Inspect Element.
• From the Firefox menu bar, select Tools > Web Developer > Inspector​.

As you move the pointer over elements in Firefox, Inspector automatically finds the element's source code information. When you select an element, the on-the-fly search stops, and you can examine the element from the Inspector window.

Right-click an element to find the supported controls. Use the controls to edit the page as HTML markup, copy or paste inner or outer HTML markup, show Document Object Model (DOM) properties, take a screenshot of or delete the node, apply new attributes, see the Cascading Style Sheets (CSS), and more.

Inspect Elements in Safari

There are a couple of ways to examine web elements in Safari:

• Right-click any item or space on a web page, then select Inspect Element.
• Go to the Develop menu, then select Show Web Inspector.

Select individual elements on the web page to see the markup devoted to that section.

Inspect Elements in Internet Explorer

A similar inspect element tool, which is accessed by enabling the Developer Tools, is available in Internet Explorer. To enable Developer Tools, press F12. Or, go to the Tools menu and select Developer Tools.

To inspect elements on a web page, right-click the page, then select Inspect Element. From the Internet Explorer Select element tool, select any page element to see the HTML or CSS markup. You can also disable or enable element highlighting while browsing through the DOM Explorer.

Like the other element inspector tools, use Internet Explorer to cut, copy, and paste elements and edit the HTML markup, add attributes, copy elements with styles attached, and more.

Inspect Elements in Microsoft Edge

Before you can inspect elements in Microsoft Edge, you must enable inspection. There are two ways to enable inspection:

• Go to the address bar and enter about:flags. In the dialog box, select the Show View Source and Inspect Element in the context menu checkbox.
• Press F12, then select DOM Explorer.

To inspect an element, right-click an element on a web page, then select Inspect Element.