Elements Tool in Microsoft Edge Browser

The Elements Tool provides the HTML and CSS code of the webpage. This code can be modified to check the changes live in the browser itself and you can also check the layout and colors used in the elements of the webpage. The elements in the webpage are the various nodes, text, attributes, and attributes that make up the DOM.

Benefits of Elements Tool:

The Elements tools are used to view and change the HTML and CSS code of the webpage. The various benefits it provides are:

• Color-Coded Code: The Elements tool displays the HTML and CSS code in colors. This helps the developers easily read and distinguish certain keywords from others without looking at the whole code.
• Options to manipulate CSS: The CSS in the tool can be changed according to your needs. You can add classes, change colors quickly, and even change the values used in the CSS code. You can also inspect the grid or flexbox layout very quickly, which can help a lot in the development process.
• Live Preview: Any proper changes made in the HTML and CSS code are reflected in the webpage with no refresh required. This allows developers to focus more on the changes and save time by not refreshing every time the changes are made.
• Quick to Inspect: The tool allows developers to very quickly make changes to the required element. You can inspect a particular element by using the Inspect option, and you can also search for specific elements in the DOM using the Find option.
• DOM Manipulation: You can directly make changes in the HTML code and get the expected preview on the webpage without any problem.

How to Open Elements Tool:

The tools is a default tab in the DevTools and it is also the first tab which is displayed when you open the DevTools. To open DevTools press the shortcut keys "F12" or "Ctrl+Shift+I" or you can right-click the webpage and click Inspect.

How to use Elements Tool

The Elements Tool contains two main section one is the DOM section and the other is the Pane section which contains multiple panes to deal with CSS.

DOM Section:

The section provides the HTML code in an expandable tree format, and the code is also color-coded to increase readability. You can edit the DOM directly here, and the changes will be reflected in the webpage instantly. You can add breakpoints, focus on particular elements, or force the state of that element in this section.

Various feature of DOM Section:

There are may features of the Elements Tool which can be used to inspects the elements of the webpage but lets us understand some of the commonly used features.

• Inspecting a particular Element: Using the option present at the end of the top-right part of DevTools you can select an element to focus it in the DOM section and display its CSS properties in the Styles pane.

• Searching in DOM: Focus on the DOM section by clicking anywhere on it and the press "Ctrl+F" shortcut key this will provide you a search bar to find string, element and XPath in the DOM.

• Modifying an Element: The various modification that can be done in the DOM are:
  • You can edit text, attributes, tag name etc. by double clicking the DOM contents and typing the changes.
  • You can also edit the elements in HTML editor by just right clicking the element and selecting Edit as HTML. To exit the HTML editor press "Ctrl+Enter".
  • You can drag the tab name of sibling elements to reorder them.
  • You can delete an element by right clicking the element and select Delete Element or just press delete on you Keyboard.
  • If required use "Ctrl+Z" to undo your actions in the DOM.

• Forcing State in an Element: In the selected element you can force it to a particular such as hover, focus, visited etc. Just right click the element and select the required sub-option from the Force state option.

• Adding Breakpoints in an Element: You can block any modifications in the element such as subtree modification, attribute modifications or node removal by just right clicking the element and selection the required sub-option under Break on option.

Panes Section

The section provides various panes to deal with the HTML and CSS code in the webpage. You can filter out CSS properties, check for layouts, modify the CSS, add DOM breakpoints and get the list of various event listeners or properties.

• Styles pane: The Styles Pane displays the CSS code of the selected element along with the CSS code that is common for multiple elements. You can edit the CSS in various ways such as changing values, adding classes or Pseudostate or type the CSS properties that you like to include in the webpage. Lets move from left to right and understand the various option this pane provides.
  • Filter: This search bar allows you to search characters present in the displayed CSS code of the style pane.
  • Toggle Element state(:hov): Provide various checkboxes to visualize the selected element with the triggered Pseudostate some of these are hover, visited and focus.
  • Element Classes(.cls): It allow you to add any predefined classes to the selected element. The predefine classes means that you can add these classes which are already specified in the CSS code of the whole webpage.
  • New Style Rule(plus icon): On clicking this button you get the prompt to add styles to the selected element.
  • Toggle common rendering emulations(paint icon): Allows to force rendering of the dark and light mode of the webpage.
  • Computed Styles Sidebar: Displays the whole Computed pane as a sidebar in the Styles pane.

• Computed pane: Provides an expandable list of all the CSS properties used by the elements. On expanding you the list of various values of the expanded property along with the elements where that property is defined. You also get the box sizing information of the selected elements you also can click any of the parts of the box model to highlight that clicked property in the respective selected element. Lets move from left to right and understand the various option this pane provides.
  • Filter: Used to search for properties or values of the properties.
  • Show all: If checked the pane will display all the properties and there default values which are not changes in the webpage CSS code.
  • Group: If checked the pane will group the properties respectively under layout, text, appearance, animation, table and other categories.

• Layout pane: Provide various options to view and deal with layouts in CSS which are grid and flexbox. Under Gird section you get various settings for the grid overlay and you can also change the color of the grid overlay of each element where grid is implemented. Under Flexbox section you get to change the color of the flexbox overlay of each element where flexbox is implemented. The various overlay display settings are:
  • Drop-down list to show labels: In this drop down list you can select to hide line numbers, show line numbers or name of the select element which have grid layout.
  • Show tack sizes: Labels the grid with the respective row and column sizes.
  • Show area names: Labels the grid with the area name as its is mention in the CSS code.
  • Extend grid lines: Extends the lines as dotted of the preview of the grid layout in the webpage.

• Event Listeners pane: It provides an expandable list of all the event listeners used in the webpage. You can expand any event listener and get all the elements that are using it. You also have a option to remove the event listener from the respective element. Lets move from left to right and understand the various option this pane provides.
  • Refresh: Used it to refresh the list of events displayed.
  • Ancestors: If checked then the pane will list the even listeners of all the ancestors of the selected element.
  • Drop-down list: You can select to display all event listeners or only passive or blocking event listeners.
  • Framework listeners: If checked then the pane will list the event listeners that are bound to the framework used for the webpage.

• DOM Breakpoints pane: This displays the breakpoint you added in the DOM such as subtree modifications, attribute modification and node removal. By default this pane is empty but as you go on adding breakpoints, all are listed in the pane along with the element and there class name separated by a dot. It also provide a checkbox to enable or disable the breakpoint.

• Properties pane: Provides a expandable list of the properties of the selected element. The pane is very helpful to as all the properties and there values are provided in a clean manner to be viewed or copied. It provides two options which are:
  • Filter: In this search bar you can search for properties for the list of properties that is being displayed by the Properties pane.
  • Show all: If checked then the pane also displays these properties which are not modifed in the CSS code of the selected element.

• Accessibility pane: The pane provides accessibility options and accessibility tree of the selected element. If you wish to inspect on the accessibility of the webpage then this pane can be of great use. It provide some checkboxes which are:
  • Enable full-page accessibility tree: If checked then you will have to reload the DevTools and then in the DOM section you will find a accessibility button which will the accessibility tree of the whole webpage.
  • Show source order: If checked then the child elements of the selected element get a number which represents the order of the child elements.

Conclusion

The Elements tool is great for inspecting the HTML and CSS code in the browser itself, which saves time switching between the code editor and the browser continuously to reflect the changes. The tool provides various CSS features, which help a lot with dealing with CSS, and the tool also allows you to edit the HTML code.