Chrome DevTools: Everything You Need to Know

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

1. Performance

When we think about performance of our web app we need to collect some metrics to rely on data to improve or work on some point in our application.

For this, we have the Perfomance tab on DevTools. In the recently versions of Chrome, the web vitals (the tree essential metrics for a healthy website.
We already have the Page Speed Insights and Lighthouse for example.
But now we can see all the changes in metrics live.

First let's understand the 3 main metrics for Loading, Visual Stability and Interactivity. They are the foundation for great user experience, what is the key to keep the visitors engaged to come back for more).

Web Vitals are a set of essential metrics that Google defines to measure user experience in relation to a website's performance. These metrics are focused on important aspects such as the speed of loading, interactivity and visual stability of a page. The main goal of Web Vitals is to ensure that websites offer a smooth and enjoyable browsing experience based on what users actually feel when interacting with the page.

Loading

Last Contentful Paint (LCP): Measures the web page loading performance. It track how long it takes to render the most essential and important elmements.

Interactivity

• First Input Delay (FID): It measures the time it takes from the moment the user first interacts with the page (such as clicking a link or button) until the browser actually starts processing that interaction.

Visual Stability

• Cumulative Layout Shift (CLS): Measure visual stability or the number of unexpected layout shifts that occur during user interactions, including element appearing, resizing, or repositioning.

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: https://coffee-cart.app/?ad=1

Now open the devtools with CTRL + SHIFT + I or CMD + ALT + I on mac. Open the Perfomance Tab with CTRL + SHIFT + P or CMD + SHIT + P and search by tapping > perfomance.

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.

So in this example we can see how to setup the integration with the CrUX, bringing the real metrics of users that are using the application.

Another way to simulate lower CPU networks and processing, we can use the Environment Settings in the performance tab to measure page loading.

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 application tab we can see the storage of our application like Session Storage, Local Storage, IndexDB, Cookies and the Service Worker if our application use this resource.

Cookie

Cookies are small text files stored in the browser by the server. They are sent along with HTTP requests and can be used to store information about the state of an application, user preferences, login sessions, among others. Each cookie have a limit of 4KB size.

Local Storage

LocalStorage is a form of persistent storage that stores data as key-value pairs in the user's browser. This data does not expire, that is, it remains in the browser until the user manually removes it or until the website deletes the data. Each domain can store up to 5 MB of data.

Data stored in localStorage remains even after the browser is closed and reopened.

Example:

localStorage.setItem("username", "JohnDoe");
const user = localStorage.getItem("username");

Session Storage

SessionStorage is similar to localStorage, but with one important difference: it is volatile and stores data only during the browser session. In other words, the data is deleted as soon as the browser tab or window is closed.

Each domain can store up to 5 MB of data.

Data is removed when the browser tab is closed or the browser session ends.

Example:

sessionStorage.setItem("sessionID", "123456");
const sessionID = sessionStorage.getItem("sessionID");

IndexedDB

IndexedDB is a more advanced local database, allowing the storage of large amounts of structured data, such as JavaScript objects. It is asynchronous and offers more flexible and complex access to data and can be used to store data related to offline web applications.

It can store large volumes of data (usually tens of MB to GB), depending on the browser and device settings.

Example:

const request = indexedDB.open("MyDatabase", 1);
request.onsuccess = function(event) {
  var db = event.target.result;
  // work with the database
};

Cache Storage

Cache Storage is used to store network resources (such as HTML, CSS, JS files, images) locally in the browser. This storage is part of the Service Workers APIs, allowing web applications to work offline or in unstable network conditions.

Allows you to cache and manage network responses (files), which improves performance and the ability to work offline.

The Cache Storage API is asynchronous, which means that operations do not block the main thread.

Example:

caches.open("my-cache").then(function(cache) {
  cache.addAll(["/index.html", "/style.css", "/script.js"]);
});

3. Network

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

In the Source tab, we can analyze the application's source code and third-party libraries to perform a debug.

I certainly won't be able to explore in detail the many other resources that dev tools offer, but this is the essential thing for you to know and start your journey to explore the tools.

In the future I may write a more specific article about each dev tools tab or make a video talking about it in more detail

Thank you very much for reading this far and stay well always!

Contacts:

Linkedin: https://www.linkedin.com/in/kevin-uehara/
Instagram: https://www.instagram.com/uehara_kevin/
Twitter: https://x.com/ueharaDev
Github: https://github.com/kevinuehara
dev.to: https://dev.to/kevin-uehara
Youtube: https://www.youtube.com/@ueharakevin/