A naukri.com initiative
Dev
2w
90
Image Credit: Dev
Chrome DevTools: Everything You Need to Know
- Chrome DevTools is an essential tool for every web developer as it offers a wide range of features that make the debugging and optimization process more straightforward.
- The Performance tab on DevTools can be used to collect some metrics for the performance of a web application. In the recently versions of Chrome, the web vitals are the three essential metrics for a healthy website.
- Web Vitals are a set of essential metrics that Google defines to measure user experience regarding a website's performance.
- Last Contentful Paint (LCP) measures the web page loading performance, whereas First Input Delay (FID) measures the time it takes from the moment the user first interacts with the page.
- Cumulative Layout Shift (CLS) measures visual stability or the number of unexpected layout shifts that occur during user interactions.
- In the application tab, users can see the storage of a web application like Session Storage, Local Storage, IndexDB, Cookies, and the Service Worker if the application uses this resource.
- IndexedDB is a more advanced local database that allows the storage of large amounts of structured data, such as JavaScript objects, and can be used to store data related to offline web applications.
- In the network tab, users can analyze what was sent in the request, such as the request body, header, cookies, and much more.
- In the Source tab, developers can analyze an application's source code and third-party libraries to perform a debug.
- Google's Chrome User Experience Report (CrUX) is a valuable source for measuring the actual experience of using a website and can be accessed through tools such as Google PageSpeed™ Insights, Google Search Console, or directly on tools like Chrome DevTools.
Read Full Article
5 Likes
For uninterrupted reading, download the app