How to Inspect Web Page Elements

See the HTML and CSS markup of any web page

close-up of web browser address bar

KTSDESIGN / Science Photo Library / Getty Images

PRODUCT DISCLOSURE $

Websites are built from lines of code, but the results are pages with images, video, 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.

This article uses right-click to refer to the mouse device action on a Windows PC as well as the Control+click action on a Mac.

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.
Inspecting web elements in Chrome

Use the Chrome DevTools to copy or edit the Hypertext Markup Language (HTML) markup and to 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​.
Inspect web elements in Firefox

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.
Inspect web elements in Safari

If you don't see the Develop menu, go to the Safari menu and select Preferences. On the Advanced tab, select the Show Develop menu in menu bar check box.

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 display the Tools menu, press Alt+X.

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.

Inspect web elements in Internet Explorer

Like the other element inspector tools, use Internet Explorer to cut, copy, and paste elements as well as 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 check box.
  • Press F12, then select DOM Explorer.

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

Inspect web elements in Microsoft Edge