How to open DevTools in the browser
There are many ways to open the Browser Developer Tools.
- To access the DOM or CSS of the webpage, right-click the desired element on the page and select Inspect. Or press Command+Option+C (Mac), Control+Shift+C/I (Windows, Linux, Chrome OS), or press F12 (Internet Explorer, Edge).
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.