What are Chrome Developer Tools?
The Google Chrome browser includes a suite of web developer tools called Chrome DevTools. For web developers, they can be incredibly useful. These tools include:
These tools provides real time information about the web page or application. Function of each of these is described below:
This tool allows us to inspect and edit the HTML and CSS of the web page. With the help of this tool, we can also add new elements to the web page. Although these changes are local and temporary, you can always reset them by refreshing the page.
You may observe how your page is loading using the Network panel. You can view what resources are being loaded and how long each resource will load using the Network panel. Also, you can inspect different types of connections established by the web page.
The resources that make up your web application can be inspected using the Application panel. You can also check what files are loaded, as well as what cookies and local storage.
You may examine the security options on your website using the Security panel. You may check your page's permissions and any security flaws.
You can monitor how much memory your page is consuming in the Memory section. Also, which resources are using memory and where memory leaks are happening can be examined by using the Memory panel.
The Performance of web page can be measured using Performance panel. Network, memory, GPU memory and web vitals are some of the parameter on which the performance of the web page depends.
The lighthouse panel automatically creates information on the structure and operation of websites to aid developers in performance improvement. It can provide analysis on performance, accessibility, best practices, search engine optimization (SEO) and progressive web app (PWA).
You can rearrange the positions of developer tools according to your convenience by using the chrome DevTools settings. Also, you can check responsiveness of web pages across variety of the devices.