Hi Folks! Are you all right? everything in peace? Everything calm? I hope you are well!
Today I'm gonna talk about the Chrome DevTools! Have you already used it in your web application? Do you know all the features? Today we will explore the main features and latest news of Chrome devtools
Now that you understand the main web vitals metrics, let's explore them in devtools!
Let's jump into the example page provided by google:
In this example you can see the tree metrics of web vitals after on load the page. The dev tools will give you the score of the web vitals.
we can simulate what the real experience of users are having through CrUX by bringing real metrics.
The Chrome User Experience Report (CrUX) is a set of real performance data from real users browsing the web, collected through Google Chrome. This data is based on measurements of page performance on real devices and is provided to help developers understand how pages are being experienced by users in the real world.
CrUX is a valuable source for measuring the actual experience of using a website, especially to understand how it performs in terms of Core Web Vitals (such as LCP, FID and CLS), and can be accessed through tools such as Google PageSpeed Insights, Google Search Console, or directly in tools like Chrome DevTools.
Notice that the LCP and CLS had a worse score with inferior networks and processing.
The perfomance tab contains a lot of more features that we can explore in another article.
Let's jump to the Application Tab.
2. Application
In the network tab we can see all the requests made to render the page content, where we can filter the requests HTTP, CSS, Documents HTML, Javascript etc.
In addition to being able to analyze what was sent in the request, such as the request body, header, cookies and much more
4. Source
Contacts:
Linkedin:
Twitter:
dev.to:
SOCIAL SHARE CARD GENERATOR