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.
HTML
<!DOCTYPE html> <html> <head> <title>GFG</title> <style> h1{ color: green; } </style> </head> <body> <h1>w3wiki</h1> </script> </html> |
Output :
Elements Tool for HTML, CSS and DOM in Microsoft Edge Browser
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?
- Features and Benefits
- Steps to use Elements Tools
- Conclusion
Contact Us