Often a need to change and view the DOM (Document Object Model) structure of a webpage arises while development. Now, we will dive into each of the devtools panels one by one.Įlements - Freely iterate the layout of your site Right click on an element in website and select Inspect. Press ‘Ctrl + Shift + I’ (Windows, Linux) or ‘Command + Option + I’ (Mac) Go to the top right corner, click on Customize chrome (three vertical dots) -> More tools -> Developer tools. We will divide the article into sections on the basis of various panels available in Chrome developer tools of Google Chrome version 62.įor opening Chrome developer tools in Google Chrome, do one of the following: Most of the content of the article can be extrapolated to Mozilla Firefox and Microsoft Edge developer tools. This article aims to give an overview of different features available in Chrome developer tools and their usage.
Essential Chrome Developer Tools To Masterīy Amanpreet Singh With the advent of modern frameworks, ES6 and the increasing risk of security every day, knowing how to use Chrome developer tools can give you a major boost in productivity and help in the easy diagnosis of a website’s performance.
