Inspector
The Inspector tool allows you to see the HTML, CSS of the webpage that you are currently inspecting. With it, you can check what CSS is applied to each element on the page. It also allows you to preview instant changes to the HTML and CSS which are reflected live in the browser. These changes are not permanent and are reset once you refresh the browser window.
- Edit as HTML (Add attribute/Edit text): This allows to change the HTML and see the results in real-time. Most useful for debugging and testing.
- Create Node: Create another empty inner division.
- Duplicate Node: Create an exact copy of the division, along with the same attributes.
- Delete Node: Deletes the current element.
- Copy/ Copy as HTML: Copy HTML which is currently selected.
- Change Pseudo-Class (:hover/:active/:focus): It forces element states to be toggled on. Enabling us to view the particular styling on the element.
- Copy CSS Path/ Copy XPath: Most useful feature of Inspector (feature could be enabled manually) it allows to copy the CSS selector or XPath expression, this selects the current HTML element.
Application:
- Viewing and changing the DOM/ CSS
- Inspect and change HTML Pages.
- Inspect animations
- Find unused CSS.
Browser Developer Tools
Every web-developer needs some basic set of tools for understanding the underlying structure of the code and enables us to inspect the web content. Developer tools are built directly into the browser. These are the tools that are browser dependent. Most of these tools are common among various browsers and do a range of things, from inspecting elements of a currently-loaded HTML, CSS, and JavaScript. With developer tools, we can directly interact with the source code that is fetched into the client side of our system. This article will explain such basic functionality of the browser’s devtools.
Across all browsers, the basic functionality of the developer tools remains the same, only naming conventions and terminologies changes. In this article, we would be focusing the majority of sections on two popular browsers Firefox and Chrome.