The Elements tool in Microsoft Edge is accessed from the Developer Tools. It gives you a hierarchical presentation of the HTML structure of a webpage and lets you explore, alter, and test CSS styles as well as the DOM. Web developers and designers require this tool to inspect and manipulate web page HTML, CSS, and the Document Object Model (DOM). In this article, we will look at how to use Microsoft Edge’s Elements tool to manipulate and observe web page structure.
Table of Content
What is a developer tool?
It is a feature in Edge that allows developers to test their development work by allowing them to manipulate the DOM, check network options, identify sources, check performance, etc.
There is an abundance of features available in the Elements tool, and with this, developers and designers can learn more about the process of creating web pages. The elements tool contains three primary sections, which are the HTML pane, styles pane, and computed pane.
1. HTML Pane:
The HTML structure of the web page is shown in the HTML pane. It contains a document tree, which allows you to explore and navigate elements to understand their relationships. The HTML pane can be used in the following cases:
- To find elements in the code, clicking on an element in the HTML pane highlights it on the webpage.
- To make changes to the content in the pane by double-clicking on it.
2. Style Pane:
This is used to examine and change the CSS rules that are applied to elements. It offers several style options, such as:
- Applied Styles: You can see the CSS rules that an element is currently subject to.
- Computed Styles: You can add the styles by computing them from other styles or formulas.
- Box Model: It shows the padding, borders, and margins of the element.
- Pseudo-elements and pseudo-classes that are applied to the elements
3. Computed Pane:
This displays an element’s final computed styles, including all CSS rules and inheritance, to understand how styles are resolved.
Features and Benefits:
- HTML and CSS can be edited in real-time, and the results can be seen immediately on the page.
- You can search and filter to quickly locate elements and styles.
- You can verify and improve the accessibility of your web pages using the built-in accessibility tools.
- The source code of web pages can be edited, and the changes can be seen in real time.
- The Elements tab assists in identifying and correcting HTML and CSS issues.
- You can improve the performance of web pages by analyzing and modifying styles and structure.
- You can inspect other websites to understand their structure.
Steps to use Elements Tools:
Step 1: Open Microsoft Edge and navigate to the web page you want to inspect. To open Developer Tools, you can press F12 or right-click on the page and select Inspect.
Step 2: To access the Elements tool, click the Elements tab.
Step 3: Clicking on elements in the HTML pane allows you to explore the document structure and inspect them.
Step 4: Check applied styles in the Styles pane, experiment with CSS rules, and see how changes affect the page.
Example: Let us write a simple example with the given html code. In the code we will also add some style and identify the same using the elements tab. we will make changes to the HTML and style using the elements tab by following the above steps.
<!DOCTYPE html> <html>
<head>
<title>GFG</title>
<style>
h1{
color: green;
} </style>
</head>
<body>
<h1>GeeksforGeeks</h1>
</script>
</html>
|
Output :
Conclusion:
We understood the workings of the elements tab in Edge Developer tools. We learned about the primary sections that help manipulate the DOM. The Elements tool provides you with the insights and tools you need to excel in web development and design, whether you’re fixing problems, optimizing performance, or learning from other websites.