Inspect Element

There is too much information for any one person to know right away in development and coding. Another tool you can use when getting started is “inspect element,” or inspecting the site’s current DOM tree state. This way of snooping shows the code normalized by the browser, which has its pros and cons:

  • Complete view; shows everything dictating the page.
  • Shows code in a “corrected state,” adding missing tags, or fixing invalid code.
  • Can be complex, and requires higher-level understanding of web languages to navigate.

Chrome

In Chrome:

  1. Right click in an empty area of the page.
  2. Select “Inspect.”

using the inspect code feature in Chrome

Firefox

In Firefox:

  1. Right click in an empty area of the page.
  2. Select “Inspect Element.”

using the inspect code feature in Firefox

Safari

To inspect code in Safari, you first need to make it so you can see the developer tools:

  1. Open preferences.
  2. Go to the advanced tab.
  3. Select “Show Develop menu in menu bar.”
  4. Right click in an empty area of the page.
  5. Select “Inspect Element.” There is too much information for any one person to know right away in development and coding. Another tool you can use when getting started is “inspect element,” or inspecting the site’s current DOM tree state. This way of snooping shows the code normalized by the browser, which has its pros and cons:
  • Complete view; shows everything dictating the page.
  • Shows code in a “corrected state,” adding missing tags, or fixing invalid code.
  • Can be complex, and requires higher-level understanding of web languages to navigate.

Chrome

In Chrome:

  1. Right click in an empty area of the page.
  2. Select “Inspect.”

using the inspect code feature in Chrome

Firefox

In Firefox:

  1. Right click in an empty area of the page.
  2. Select “Inspect Element.”

using the inspect code feature in Firefox

Safari

To inspect code in Safari, you first need to turn on the developer tools:

  1. Open preferences.
  2. Go to the advanced tab.
  3. Select “Show Develop menu in the menu bar.”
  4. Right-click in an empty area of the page.
  5. Select “Inspect Element.”

using the inspect code feature in Safari

Internet Explorer, Edge

To inspect code in Edge:

  1. Select the text, images, or links in the browser
  2. Right-click and select Inspect.
  3. The developer tools should appear, showing the HTML of those elements

Internet Explorer, Edge

It is very difficult to develop for and with these products. It is recommended you use one of the browsers above for the duration of the course.

development browser inspect website