Developer Tools are tools that are a part of most modern web browsers.
The DevTools UI is overwhelming, there's so many tabs! Use some time to get familiar with each tab to understand the power. You will discover that DevTools will boost your productivity.
Overall, there are nine main groups of tools available in Chrome Developer Tools.
These are: Elements, Console, Sources, Network, Performance, Network, Application, Security and Audits.
Every developer experience that you code some CSS and the styles aren't being applied or they do not look as you expect. You should know how the browser actually apply styles to HTML elements and how to immediately change styles from DevTools. Look at this CSS tutorial.
console.log(). Look at this DEBUGGING tutorial.
The Audits panel show reports of the site speed. It also shows concrete tips on how to improve speed. Look at this AUDITS tutorial.
Use the Device Mode to build responsive mobile-first websites. You may simulate a wide range of devices. Look at this DEVICE MODE tutorial.