Developer Tools

Developer Tools is a set of web developer tools built into the browser. You can use them to examine, edit, and debug HTML, CSS, and JavaScript.

Opening the Developer tool
- Developer tool can be opened using F12
- You can also find it in ⋮ > TOOLS > DEVELOPER TOOLS
DevTools :

The following shows us different DevTools avalaiable :
Element / Page Inspector :
- View and edit page content and layout. Visualize many aspects of the page including the box model, animations, and grid layouts.

Console :
- See messages logged by a web page and run JavaScript from the Console.

Sources / Debugger :
- Debug JavaScript, persist changes made in DevTools across page reloads, save and run snippets of JavaScript, and save changes that you make in DevTools to disk.

Network :
- See all the network requests made when a page is loaded.

Performance :
- Find ways to improve load and runtime performance and Analyze your site's general responsiveness, JavaScript, and layout performance.