How to Inspect Web Page Elements

See the HTML and CSS of any web page

Websites are built with lines of code, but the results are specific pages with images, video, fonts, and other features. To change one of those elements or see what it consists of, you have to find the specific line of code that controls it. You do that with an element inspection tool.

Most web browsers don't make you download an inspection tool or install an add-on. Instead, they let you right-click the page element and choose Inspect or Inspect Element. However, the process differs a little from browser to browser.

Inspect Elements in Chrome

The most recent versions of Google Chrome let you inspect the page in a couple of ways that use its built-in Chrome DevTools:

  • Right-click something on the page or a blank area and choose Inspect from the popup menu.
  • Use the Chrome menu to access the More Tools > Developer tools option.

The Chrome DevTools let you do things like easily copy or edit HTML lines or hide or delete elements altogether until the page reloads.

Once DevTools opens on the side of the page, you can change where it's positioned, pop it out of the page, search for all the page files, select elements from the page for specific examination, copy files and URLs, and customize a bunch of the settings.

Inspect Elements in Firefox

Like Chrome, Firefox has a couple of different ways to open its tool called Inspector:

  • Right-click a blank area on the page or choose an element and select Inspect Element from the popup menu.
  • From the Firefox menu, click Web Developer > Inspector​.

As you move your mouse over various elements in Firefox, the Inspector tool automatically finds the element's source code information. Click an element, and the "on-the-fly search" stops, and you can examine the element from the Inspector window.

Right-click an element to find all the supported controls. You can do things like edit the page as HTML, copy or paste inner or outer HTML code, show DOM properties, screenshot or delete the node, easily apply new attributes, see all of the page's CSS, and more.

Inspect Elements in Safari

There are a couple of methods used to examine the web elements in Safari including:

  • Right-click or Control-click on any item or space on a web page.
  • Click Develop in the menu bar and select Open Web Inspector in the popup menu that appears. If you don't see Develop in the menu bar, pull down the Safari menu and choose Preferences, click on the Advanced tab and check the box next to Show Develop menu in menu bar.

Click on individual elements of the web page to see the code devoted to that particular section.

Inspect Elements in Internet Explorer

A similar inspect element tool, called Developer Tools, is available in Internet Explorer:

  • Press F12 on the keyboard.
  • Use the Tools > F12 Developer Menu option. Click Alt+X if you don't see the Tools menu.
  • Right-click on the page and click Inspect Element.

IE has a Select element tool in this menu that lets you click on any page element to see its HTML and CSS details. You can also easily disable or enable element highlighting while you're browsing through the DOM Explorer tab.

Like the other element inspector tools, Internet Explorer lets you cut, copy, and paste elements as well as edit the HTML, add attributes, copy elements with styles attached, and more.