How to Inspect Web Page Elements

See the HTML and CSS of Any Web Page

The website is built with lines of code, but the result is specific pages with images, video, fonts and more. To change one of those elements or see what it's comprised of, you have to find the specific line of code that controls it. You can 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 might be a little different in your browser.

Inspect Elements in Chrome

The most recent versions of Google Chrome let you inspect the page in a few ways, all of which use its built-in Chrome DevTools:

  • Right-click something on the page (or a blank area) and choose Inspect
  • Enter the Ctrl+Shift+I keyboard shortcut
  • 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's files, select elements from the page for specific examination, copy files and URLs, and even customize a bunch of the settings.

Inspect Elements in Firefox

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

  • Right-click a blank area on the page or choose an element, and select Inspect Element
  • Enter Ctrl+Shift+T or Ctrl+Shift+I with the keyboard
  • From the Firefox menu, click Developer > Inspector
  • From the Tools 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" will stop 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 Opera

Opera can inspect elements too, with it's DOM Inspector tool that's identical to Chrome's. Here's how to get to it:

  • Use the keyboard shortcut Ctrl+Shift+I
  • Navigate to Menu > More Tools > Show Developer menu, and then open the menu through Menu > Developer > Developer Tools
  • From the right-click menu on any element on the page, choose Inspect element

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 (hit 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 new menu that lets you click on any page element to see its HTML and CSS details. You can also easily disable/enable element highlighting while you're browsing through the DOM Explorer tab.

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