Tutorial 3: Using Elements Panel (HTML)

In Chrome, DevTools by Afnan ArshadLeave a Comment

This is the third tutorial of Learning Chrome Web Developer Tools course. In this tutorial, we are going to learn about elements panel. The last tutorial was about Customizing Chrome DevTools. This tutorial is in two parts, we will cover HTML in this tutorial and next, we will cover CSS in elements panel.
Before beginning this tutorial, it is important to note that any change you make in Elements panel is temporary and may differ from what you have written actually in your web page. Now let’s start!

What is Elements Panel?

In chrome DevTools, the very first panel from left is elements panel which helps us to:

  • Inspect HTML tags representing DOM
  • View CSS applied to elements

Picture 3.1


How to Inspect an HTML Element in DevTools?

To inspect an element or to know the HTML of an item in web page, right click on the element and select Inspect from the context menu(Picture 3.2). For example, in the following picture, I have clicked on DevTools and selected inspect in Chrome. The elements panel then open and shows the HTML behind that element.

Picture 3.2

Another way to inspect an element is Press Ctrl + Shift + C (Windows) or Cmd + Shift + C (Mac) to open DevTools in Inspect Element mode, then hover over an element


Useful info about HTML tag

When you inspect an element in DevTools, it gives a lot of information and control over selected HTML tag or web page item. We can examine the following with inspect element:

1. Hover over HTML tag

When you hover over selected HTML tag it shows,

  • Tag Name
  • Class or ID (if applied)
  • Exact dimension of that tag.
  • Margin in orange highlight
  • Padding in green highlight
  • Border in yellow highlight
  • Actual content area in blue highlight

 

 

Picture 3.3

 

  • == $0 shows the current node index. Means if you have to check which tag you selected earlier then you goto console panel and write $1 for the previous selection and then further down to $2, $3 and so on(Picture 3.4).
node index ==$0 devtools

Picture 3.4

2. Right Click on HTML tag

When you right-click on selected HTML tag, we can further perform actions, most actions are self-explanatory, I will try to explain some below:

  1. Add attribute such as ‘style’ or ‘class’ attribute.
  2. Edit attribute such as ‘style’ or ‘class’ attribute.
  3. Edit as HTML let us edit HTML of selected tag, whether attributes, properties.
  4. Delete is self-explanatory.
  5. Copy outerHTML and copy element are identical.
  6. Copy Selector let us copy the ID or Class of tag
  7. Copy XPath let us copy the XSLT(Extensible Stylesheet Language Transformations) based syntax for selected tag used for XML, PDF and more.
  8. Hide element simply hides element, doesn’t delete it.
  9. Will be discussed in tutorial 4
  10. Break on triggers when javascript add, remove or modify a tag.
Google Chrome Devtools xpath

Picture 3.5


How to Navigate the DOM in HTML?

Navigate through the DOM structure using your mouse or keyboard. A collapsed node has an arrow next to it pointing right, an expanded node has an arrow next to it pointing down as shown in (Picture 3.6). You can expand/contract a node using mouse and keyboard, see below:

navigating DOM

Picture 3.6

Using your mouse:

  • Click once to highlight a node.
  • To expand a node, double-click anywhere on it or click on the arrow next
    to it.
  • To collapse a node, click on the arrow next to it.

Using your keyboard:

  • Press the Up Arrow or Down Arrow key to select the node above or below the current one.
  • Press the Right Arrow or Left Arrow key to expand or contract a node. Press it again to move to the first child of the expanded node. You can use this technique to quickly navigate deeply-nested nodes.

How we Edit DOM node and its children as HTML

You can edit a DOM node and its children as HTML:

  • Open the more actions menu and select Edit as HTML (Picture 3.7).
  • Press F2 (Windows / Linux) or Fn+F2 (Mac).
  • Press Ctrl+Enter (Windows / Linux) or Cmd+Enter (Mac) to save your changes.
  • Press Esc to exit the editor without saving.
Edit as html

Picture 3.7


How to Navigate Breadcrumb Trail

At the bottom of the Elements panel is a breadcrumb trail. The node to the right is the current node. And to the left of that are its parent nodes. And so on, all the way up the tree.Navigating back up the structure moves the highlight. DevTools displays as many items as possible in the trail (Picture 3.8).

breadcrumb trail

Picture 3.8

 

If the entire trail doesn’t fit in the status bar, an ellipsis (…) shows where the trail has been shorten. Click the ellipsis to show the hidden elements (Picture 3.9).

breadcrumb ellipsis

Picture 3.9


How HTML is compiled in Elements Panel?

We need to consider the following key points about HTML being compiled in elements panel:

  • Once HTML is loaded from a web page. The HTML could be changed using JavaScript.Example: We can change the inner text of H2 heading using JavaScript easily.
  • The HTML structure you have written in the file may differ from what appears in the browser’s HTML.Example: If you forgot to write closing </h2> tag then chances are, chrome will automatically add it for you.
  • The HTML could be loaded from an external source using iFrame.Example: If you have used an iframe in your web page and added its source Facebook.com then the source code of that link will also appear in the Elements panel along with your HTML code.
  • Using a framework to induce content. (React or Angular e.t.c)Example: Reach might add its own attributes in your HTML for its operations.

Whats next?

In the next tutorial, we will dive deep into CSS section of elements panel in DevTools.

In this complete chrome DevTools course, all code files will be available at the end of each tutorial and there will be a quiz to test your knowledge. All available absolutely FREE.

Quiz

Elements panel represents:

How to do permanent changes in code?

What we see in elements panel?

How to Inspect an HTML Element in DevTools?

How to hide the HTML tag?

What is meant by ==$0 ?