Chrome DevTools, for Super Fast SSR Applications!

Hello and welcome to this talk about Chrome DevTools to basically improve your application. First of all, who I am I'm Luca De Pupo, I design your software engine at Miraform. I love hiking, running, cycling, so I do sport in reality, and in my free time I also love to create tech content for tech people. So, first of all, I work at Miraform, we are a consultant company, so if you like Node, JavaScript, and this ecosystem and you want to join us, let me know, we are hiring. And we are full remote.

So, let's jump to the talk. This is a common situation nowadays. So, there are developers that try to basically resolve different challenges, because there are different requirements in our application. For instance, we need to take care of the user experience. We need to take care of the performance. We need to take care of accessibility of SEO and also to best practice. Then we need also to check the security part, and maybe we have a server-side rendering application. So, all this kind of stuff increases the complexity of our application. And at some point, we need to understand how we can debug all of them.

So, honestly, probably we cannot debug everything, but we can try to mitigate or basically have good coverage or good experience for the majority of this point. And we are lucky that the Chrome DevTool exposes useful features to debug many of them. So, today, what I want to do is try to show you some of them. In fact, inside of Chrome DevTool, we have a performance tab that enables us to improve the performance of our application. Accessibility tab and accessibility tree that help us to understand how accessible is our application. Lighthouse, we have the network tab that enables us to total in the request. Or the coverage panel that enables us to understand if we can reduce the bundle size of our application. And lastly, we have also now an MCP server that can help us to basically connect our LLM to a website and then basically try to create a sort of report of what we need. And using it, then we can review our codebase. So, let's jump to the codebase, to the Chrome DevTool to see it in action. So, let's move in this QP application. I'm going to the To-Dos tab. If I open the Chrome DevTool panel, I can search using Command-Shift-P for a specific tab. In this case, I want to show the coverage part. The coverage tab panel enables us to basically... Let me run the script.

As you can see, here we have a list of files that the application is downloading. We have a report of the total bytes and unused bytes of each specific file. This tool helps in understanding if specific parts can be split into different chunks for optimization. For example, analyzing a file with unused code can prompt splitting it into essential and non-essential parts for efficient loading. Pay attention to details like Chrome extensions and CSS elements displayed in the panel.

It's crucial to be cautious since what is initially visible may not always reflect the complete situation. Enabling specific configurations can alter the code displayed, requiring a careful evaluation of what should be split. Moving on to the Network tab, it provides insights into testing application performance under various network conditions. By simulating different network speeds, such as offline mode or slow connections like 3G or 4G, developers can assess user experience and loading times in different scenarios.

Throttling network requests allows developers to mimic real-world conditions and understand the application's behavior in varying network environments. This feature is valuable for testing PWAs and ensuring that applications perform optimally regardless of the user's internet connection. By adjusting network settings within Chrome DevTools, developers can fine-tune their applications to deliver a consistent experience across different network speeds.

Yes, please pay attention to what you are seeing here because it's not always true what we perceive. Enabling specific configurations can lead to changes in the code displayed, requiring a careful evaluation of what should be split. Moving on to the Network tab, it offers insights into testing application performance under varying network conditions. By throttling network requests, developers can mimic real-world conditions to understand the application's behavior.

Throttling network requests allows developers to simulate different network speeds like offline mode or slow connections such as 3G or 4G. By adjusting network settings within Chrome DevTools, developers can optimize their applications for different network speeds. Throttling network requests helps in testing PWAs and ensuring optimal performance regardless of the user's internet connection.

Using Chrome DevTools, developers can throttle network requests to test the application's performance under different network conditions. This feature is valuable for understanding the user experience in various network environments and optimizing applications to deliver a consistent experience across different network speeds. Additionally, exploring the accessibility features in Chrome DevTools allows developers to check the accessibility attributes of elements within the application.

But maybe you are working on a PWA application. The expectation is to see the application maybe with some specific notification or stuff like this. Or you can check your application with a slow connection, for instance, a 3G connection. As you can see, now, we are still waiting for all this file. Yes, it's not a production bundle, but imagine you are downloading all this kind of stuff. You can check how much time the user needs to wait before basically the full page. Or the same is for the slow 4G. You can refresh the page and that's it.

That's it. Fantastic. And let's move back to no throttling. We talk about accessibility. If I go in the element tab, I can check the accessibility part of this application. So if I use the picker here and maybe go to this element, as you can see here, I can use the accessibility tab on the right to check the accessibility, the area, basically the area attribute of the element. Spoiler, this application is not accessible. But here, as you can see, you can see the area attribute or the area label and the title and blah, blah, blah. Here, if you basically set the information.

For instance, if I add here area, not here, but here area label test, as you can see we have an area attribute here and we can see what happens. Then we have also an accessibility tree view. If you enable this check, you basically get this button. If you click this button, what happens is basically the view changes from HTML3 to accessibility tree view. Here you can see how your application looks like for a screen reader. This is also because you can basically check, for instance, here there is an image without the alt title. You basically check if your application is accessible for a screen reader just by clicking a button here and check what happens in the accessibility tree. Fantastic.

Fantastic. Now let's jump to the performance panel. The performance panel is probably that panel that when you open it and you see what is inside, you want to basically close it again. We can use it also for basically check before releasing production how our application reacts in case of different CPU or different networks. Now as you can see, this is the local matrix of my application. Let me do this. This is the local matrix. We have the SCP in 1.30 second. We have an IMP of 32 millisecond and blah, blah, blah.

As you can see, we have a sort of iteration, information about layout shifting, pointing, and blah, blah, blah. This is information just using our local matrix. I want to basically get matrix with a different CPU and different network. How can I get them? Using the environment settings at the right here, we can basically choose a CPU with a six times slowdown and a network of fast 4G. If you click record and reload, what happens is that Chrome Web Tool is reloading the paging and tracing some information for you.

And this is the result. We have an insight panel here where basically you can get information about SCP or SCP request discovery. As you can see, I already got the information here that the first image doesn't have a fetch priority high. I can improve it by adding this information to the image. And basically, just without touching nothing special, I already got the information. Here there is a third party information. We have a lot of insight then. IMCP, IMB, font, a lot of legacy code, probably not in this page but in the other, yes.

But as you can see, we have different insights already built in that we can use to improve the application. Basically, our insights to improve our application. For instance, I can use the discovery with AI button that enables me to chat with Gemini Nano and the AI assistance already built in in Chrome Web Tool. And maybe I can ask for instance, why is SCP request discovery, blah, blah, blah. And here you can chat with it to basically improve your application and try to fix your issue.

What we can do is also going back to this part. And I don't know. Let me close this. What we can do is basically analyze our performance panel. And what we can do is basically add labeling inside of the panel. For instance, we can add annotation, need to be faster. And maybe we want to basically link this one with this. And add another label. For instance, load this after the link at the entry. Something like this.

Then what we can do is, ok, I did all my job with this panel. I want to share my thoughts with the rest of the team. I can save the trace using the annotation. Save it wherever you want. And send it to another teammates. The other teammates can open the performance panel and, as you can see, can import Tracer. And got the same basically Tracer that I already have inside of my previous page. And maybe the other developer can now work to implement my request. Fantastic! Ok, now it's time to jump to the terminal to see the MCP server. If I go to Visual Studio Code here. Let me close it and reopen it. Using Gemini or Copilot or whatever you want, you can set up your MCP server with the Chrome DevTool. It's pretty stupid. The MCP server for Chrome DevTool is just a configuration of Chrome DevTool, command and pick.

The MCP server for Chrome DevTool is just a configuration of Chrome DevTool, command and pick. And this is the argument. Nothing special. And what you can do here is try to ask something to the LLM to basically get information from your application. For instance, what I can do is use Chrome DevTool MCP server to test the performance of this page. So, this is my page. Let me do this. Enable MCP server. Now, in another, you cannot see it, but I have another Chrome open by the DevTools. And as you can see, now it's basically tracking information. And after that, I got some information about the performance of this page.

And maybe, I don't know, would you like to go see it? Yes. Because as you can see, there is improvement that it can do in some way. It tried to basically estimate the priority and blah, blah, blah. At some point, probably, you can get also the code fixed by its idea to improve basically your application. Let me do that. At some point, it should be back to file, one file, add the priority i, and change a sort of delay that I have inside of the page. Now, let me just investigate the discrepancy.

Okay, at some point, probably, we will get the result. Now, it's time to jump to the conclusion. So, let me go back here. So, today we see some features of Chrome DevTools and how to basically use it to check our application and try to improve them. So, if you want to learn more about Chrome DevTools, the documentation is awesome. And if you want to watch something, the Chrome for Developer YouTube channel contains some amazing videos. Also, some hands-on videos. So, if you want to learn more, these two are the best links for you. And that's it. I hope you enjoy. I hope you continue to learn more during this conference. And thank you so much. These are my contacts. If you want to chat with me, they are open. And thank you again. Bye bye.