WEBVTT 00:00.000 --> 00:10.000 So, let's start. 00:10.000 --> 00:15.000 Thank you. 00:15.000 --> 00:19.760 So, when we're working on performance issues, we often encounter problems that are not 00:19.760 --> 00:23.160 necessarily in our direct area of expertise. 00:23.160 --> 00:28.160 We have to share the things we see in performance profiles without colleagues and in return, 00:28.160 --> 00:32.160 they might want to share their findings back with us or with the others. 00:32.160 --> 00:34.920 This is not always easy, but it should be. 00:34.920 --> 00:39.520 I'm Nazim Jan Altenova and I work for the Firefox Profiler and today we're going to be 00:39.520 --> 00:44.560 talking about the Firefox Profiler and how we can make it so much easier for you to collaborate 00:44.560 --> 00:46.760 with your colleague. 00:46.760 --> 00:51.080 First, we're going to be talking about the challenges we face day-to-day while collaborating 00:51.080 --> 00:53.480 using the performance tools. 00:53.480 --> 00:55.920 Then we're going to take a look at the Firefox Profiler. 00:55.920 --> 01:00.080 We're going to capture performance profile and then we're going to look at the sharing 01:00.080 --> 01:04.080 capabilities that we have inside the Profiler. 01:04.080 --> 01:09.280 Then lastly, we're going to look at the application that can help us with both across 01:09.280 --> 01:14.200 different browsers or different profiles and toolchains. 01:14.200 --> 01:21.800 So, what are the challenges we actually face day-to-day while collaborating with our colleagues? 01:21.800 --> 01:28.800 Let's say that I work for Facebook and I was tasked to make their page load as fast as possible. 01:28.800 --> 01:34.760 Let's say that for the specific case, I was looking at the profile of the WayneDrog Johnson's 01:34.760 --> 01:39.800 Facebook profile and I noticed something interesting in the profile and I would like to reach 01:39.800 --> 01:41.640 out to my colleague. 01:41.640 --> 01:47.440 Traditionally, what does mean that I need to download the performance profile from Chrome DevTools 01:47.440 --> 01:48.440 to my desk? 01:48.440 --> 01:53.480 I need to figure out a way to share it with my colleague somehow and at the end, once they 01:53.480 --> 02:01.720 open it up, I need to explain the issue in such a way that I can see the thing that I was 02:01.720 --> 02:06.680 seen in my local computer. 02:06.680 --> 02:11.440 But this is 2025, surely there's a more effective way of collaborating with my colleague 02:11.440 --> 02:16.720 and making sure that we are looking at the same thing while collaborating. 02:16.720 --> 02:21.360 One sharing is not really the solution here as this conversation might happen as synchronously 02:21.360 --> 02:27.560 or we might want to look at the different parts of the profile at the same time. 02:27.560 --> 02:32.680 Firefox Profiler is a tool that was initially developed for Firefox engineers to make 02:32.680 --> 02:37.600 Firefox faster but then lots of great collaboration features were added to it. 02:37.600 --> 02:43.480 And later it was expanded to include many more data sources and workflows. 02:43.480 --> 02:48.680 And it would be where it allows web and application developers to collaborate on many different 02:48.680 --> 02:54.960 types of applications and workflows. 02:54.960 --> 02:59.440 So let's see how to use the Firefox Profiler. 02:59.440 --> 03:03.480 To be able to use it first, we need to navigate to Profiler.firefox.com. 03:03.480 --> 03:08.640 And if you're in Firefox, you will see this big button says that says enable. 03:08.640 --> 03:15.280 As you click there, a new popup or new icon will appear on the top right corner of your browser. 03:15.280 --> 03:21.200 Now after doing this, we're ready to profile. 03:21.200 --> 03:27.080 So let's see how to profile a website. 03:27.080 --> 03:32.680 First I need to look at go to the top right corner and then click on the profile icon to start 03:32.680 --> 03:34.840 profiling. 03:34.840 --> 03:41.120 Once I click now, we are recording everything inside the Firefox and then I paste my URL 03:41.120 --> 03:44.080 and navigate to it eventually. 03:44.080 --> 03:50.520 Once I navigate and once I'm sure that everything is done, I captured everything. 03:50.520 --> 03:57.000 I go back to the profile icon and click one more time to capture the profile. 03:57.000 --> 04:00.920 And now the profiler is captured. 04:00.920 --> 04:09.200 So we go back to this full range one more time and we click and click the Facebook.com 04:09.200 --> 04:14.600 to focus on this URL, this tab only. 04:14.600 --> 04:21.320 So now that's it, in the end, you should see a profile that looks something like this. 04:21.320 --> 04:26.800 So we have everything that we need, we capture the data now, it's time to analyze it. 04:26.800 --> 04:32.320 So first, let's take a look at the different components of this UI because if you are 04:32.320 --> 04:38.000 new to profiling and if you're not familiar with the Firefox Profiler, it can be a bit 04:38.000 --> 04:40.200 intimidating at first, right? 04:40.200 --> 04:45.640 So the Firefox Profiler is actually split into two main sections. 04:45.640 --> 04:53.360 The first one is the timeline over here and the second one is the bottom panel there. 04:53.360 --> 04:56.720 So let's talk about the timeline. 04:56.720 --> 05:02.400 Timeline is the overview of the profile that we just captured. 05:02.400 --> 05:04.360 We have screenshots and other information. 05:04.360 --> 05:11.280 So this is the area where we navigate in the profile and once we are done navigating, once 05:11.280 --> 05:15.680 we zoomed into the section that we would like to analyze, we switch back to the bottom 05:15.680 --> 05:19.520 panels and analyze it properly. 05:19.520 --> 05:22.640 So in the timeline we have the screenshots. 05:22.640 --> 05:29.360 So you can hover over them and see what is happening in a certain area in the time. 05:29.360 --> 05:34.880 And then we have the Facebook.com track which is the all activity happening in this tab. 05:34.880 --> 05:42.880 So you see yellow is here means JavaScript and yeah we have some areas. 05:42.880 --> 05:48.760 So you can see the CPU usage over of this track as well. 05:48.760 --> 05:53.360 And once you hover over a section you will see lots of tool tips. 05:53.360 --> 06:00.000 So here you can see the CPU which for example 94% and the category is layout and then 06:00.000 --> 06:01.920 you can see this tag. 06:01.920 --> 06:07.320 So this gives you some ideas on what is happening in a certain time. 06:07.320 --> 06:10.680 And then we have the network track. 06:10.680 --> 06:17.760 So this shows you all the network requests that are happening for this tab specifically. 06:17.760 --> 06:19.720 And then below it we have the memory. 06:19.720 --> 06:24.760 So you can see the relative memory increase and decrease over time the allocation and the 06:24.760 --> 06:28.680 allocation over time. 06:28.680 --> 06:33.920 And so this was the timeline and let's go back to the bottom panels again. 06:33.920 --> 06:37.560 So the first thing we see is the call tree tab there. 06:37.560 --> 06:44.360 So the call tree is the aggregation of all the stacks that we captured while sampling. 06:44.360 --> 06:48.360 And this on this left side you see all the time and information. 06:48.360 --> 06:50.600 And on the right side you see the function. 06:50.600 --> 06:55.040 So you can expand and see what type of functions are being called. 06:55.040 --> 07:01.760 And the flame graph is essentially the same data but with a different visualization. 07:01.760 --> 07:04.760 You see the functions again. 07:04.760 --> 07:09.680 This tag chart looks similar to flame graph but it's actually a bit different. 07:09.680 --> 07:11.680 So there are two main distinctions. 07:11.680 --> 07:15.360 One, it is top down instead of bottom up. 07:15.360 --> 07:20.200 But the most important thing is that it is not aggregated. 07:20.200 --> 07:23.120 So in the flame graph everything was actually collapsed. 07:23.120 --> 07:26.800 But here you see that the x-axis is actually time. 07:26.800 --> 07:29.560 So it actually overlaps with the timeline over here. 07:29.560 --> 07:33.200 So this is actually what you see usually in Chrome Devtools. 07:33.200 --> 07:38.640 The graph, this tag chart that we have there. 07:38.640 --> 07:43.640 And the first three tab were related to the sampling data. 07:43.640 --> 07:47.880 And the last three are about the markers that we have. 07:47.880 --> 07:52.880 So the markers are special events that we have inside Firefox. 07:52.880 --> 07:59.760 So we instrument Firefox a source code to inject some information like these. 07:59.760 --> 08:06.080 And you can also add your own markers with performance.mark or performance.measure APIs. 08:06.080 --> 08:10.840 So when you hover over a marker like this CSS transition one, 08:10.840 --> 08:13.640 you see a additional information about it. 08:13.640 --> 08:19.480 For example here we see the animated property is transformed and the target is the span. 08:19.480 --> 08:28.320 So we get to see a lot more information about this execution. 08:28.320 --> 08:30.320 And the marker table is similar. 08:30.320 --> 08:32.640 It's the table version of the marker chart. 08:32.720 --> 08:39.080 And network tab is again like marker chart but for specific format work. 08:39.080 --> 08:44.960 You see a lot more detailed information about network requests here. 08:44.960 --> 08:48.080 So now we get a sense of the UI. 08:48.080 --> 08:51.560 Now we know what which top one is which. 08:51.560 --> 08:54.040 So let's capture the profile. 08:54.040 --> 09:01.200 And now let's analyze that further and see what needs our attention. 09:01.200 --> 09:07.520 First I look at the screenshots over here to see where the navigation occurred. 09:07.520 --> 09:11.800 I see that it usually overlaps with the activity that's happening in the track. 09:11.800 --> 09:14.640 So I see that it is this section. 09:14.640 --> 09:19.520 So I zoom into this area by clicking on the magnifier icon again. 09:19.520 --> 09:23.240 And now I see that there's a regular red bar here. 09:23.240 --> 09:26.520 It's usually a jank happening here. 09:26.560 --> 09:32.440 So jank means that the website wasn't responsive in this section for more than 50 milliseconds. 09:32.440 --> 09:35.960 So I click on there and then zoom in there as well. 09:35.960 --> 09:42.080 And now I don't really have the necessary expertise to analyze this information. 09:42.080 --> 09:44.640 So I need to share this with my colleague. 09:44.640 --> 09:48.520 To be able to do that I go up to this upload local profile. 09:48.520 --> 09:52.120 And then I remove some information if I need to. 09:52.160 --> 09:56.680 And finally I click on the upload button. 09:56.680 --> 10:01.640 So once I click on the upload the profile will be uploaded to our server. 10:01.640 --> 10:07.840 And then you will get here like a small URL permalink for you to share. 10:07.840 --> 10:11.880 So now you can share this permalink with your colleague. 10:11.880 --> 10:17.080 And immediately they will see the exact same view that you are seeing. 10:17.080 --> 10:24.320 And now we see in the sharing part and that's which gears to your colleague's perspective. 10:24.320 --> 10:27.720 Let's see how they can look at your profile. 10:27.720 --> 10:33.040 Let's say that we already shared the URL, the permalink with the colleague. 10:33.040 --> 10:36.360 And they can just open their own browser. 10:36.360 --> 10:38.400 It can be Chrome, it can be any browser. 10:38.400 --> 10:43.600 And then they paste the URL so they can navigate to it. 10:43.640 --> 10:48.200 After the profile is loaded, you will see the exact same view. 10:48.200 --> 10:50.400 So this was the same view that I was seeing. 10:50.400 --> 10:52.320 Like this is the zoomed in section. 10:52.320 --> 10:56.320 This is the jank marker that I zoomed in. 10:56.320 --> 11:01.480 And this view will be preserved for your colleague to see. 11:01.480 --> 11:06.720 So it makes it so much easier for you to tell your colleague can look at this section of the profile. 11:06.720 --> 11:10.280 So I'm interested in here. 11:10.280 --> 11:15.160 And now let's assume that our colleague is investigating further in this profile. 11:15.160 --> 11:19.840 And they go back to the timeline in the time range one more. 11:19.840 --> 11:22.680 And see that there is like a gap here. 11:22.680 --> 11:26.800 So this gap indicates that there was no CPU utilization happening. 11:26.800 --> 11:32.200 So since this is a page load, we would like to utilize the CPU as much as possible. 11:32.200 --> 11:38.600 So from experience, they know that it usually happens when you are waiting for a network request. 11:38.600 --> 11:40.400 So the JavaScript is done. 11:40.400 --> 11:47.000 We need to finish a network so they can execute it. 11:47.000 --> 11:49.680 So they switch to the network tab here. 11:49.680 --> 11:55.120 And then they see that indeed there are some network requests that we are waiting for. 11:55.120 --> 12:02.120 So they again go up there to permitting button and generate a new permitting this time. 12:02.120 --> 12:09.960 So and then they share it with their colleague who knows more about the network inside of their website. 12:09.960 --> 12:13.800 So again, the profile was already shared before. 12:13.800 --> 12:16.320 So we didn't really do any more uploads. 12:16.320 --> 12:25.480 But now we get a screenshot or a snapshot of that view. 12:25.480 --> 12:31.720 So now when I share it with my colleague, they will see the exact same view as well. 12:31.720 --> 12:39.760 And in the meantime, they've gone back to looking at the jank marker that jank event that we were looking before. 12:39.760 --> 12:44.840 So they go back, these are in this red area one more time. 12:44.840 --> 12:50.480 And this time, they would like to analyze it because this is the colleague's perspective. 12:50.480 --> 12:52.760 So they switch to the snapshot. 12:52.760 --> 12:57.600 They see that even though they work at Facebook, they don't have the source maps available apparently. 12:57.640 --> 13:00.680 So they literally have no idea what's happening here. 13:00.680 --> 13:04.120 But they can still understand some things, right? 13:04.120 --> 13:10.440 There are some this QI function and RI function being called over and over again recursively. 13:10.440 --> 13:14.720 So from experience, they know that this can be some react DOM happening. 13:14.720 --> 13:19.080 And they would like to zoom in to this area. 13:19.080 --> 13:26.000 So what they can do is they can double click on a stack to zoom in again. 13:26.000 --> 13:30.960 So they double click and then click on the magnifier icon to zoom into the section. 13:30.960 --> 13:37.680 And now they're investigating the stack a bit more and they see lots of RI functions being called. 13:37.680 --> 13:43.760 So they filter by typing RI here. 13:43.760 --> 13:49.400 And now they need to send us to their colleague, knows more about the react side. 13:49.400 --> 13:53.760 And then they generate a new permalink again by going to the right section. 13:53.760 --> 14:00.240 So again, it's good to note that now that we filter the stacks and we change the tab to the 14:00.240 --> 14:02.720 section, these will be still preserved. 14:02.720 --> 14:10.560 So now your colleague again will see the same view as before. 14:10.560 --> 14:16.440 So but, up until this point we've talked about the Firefox Profiler in Firefox. 14:16.440 --> 14:19.720 But actually the Firefox Profiler isn't just for Firefox. 14:19.720 --> 14:23.080 You can use it in other applications as well. 14:23.080 --> 14:29.280 We will actually recently publish the Chrome extension that lets you use the Chrome's internal 14:29.280 --> 14:35.240 profiler to capture record your website. 14:35.240 --> 14:41.160 And then eventually it opens up the Firefox Profiler analysis view for you to analyze. 14:41.160 --> 14:47.600 For example, let's see again here, I've added the profiler extension here and added to my toolbar. 14:47.600 --> 14:50.080 So it's the same steps to reproduce. 14:50.240 --> 14:57.880 I click on the ProfiRiCon, it starts profiling and then I navigate to the URL that I would 14:57.880 --> 15:05.800 like to navigate to and then once it's done, I go back to the URL and the icon and I click 15:05.800 --> 15:10.600 one more time to stop profiling and capture the profile. 15:10.600 --> 15:17.720 And once I do that, it will show you the same view, but this time with the data that comes 15:17.720 --> 15:24.520 directly from Chrome's internal profiler instead of the Firefox. 15:24.520 --> 15:31.000 So now from this point you can do the same thing like you can analyze the profile or you 15:31.000 --> 15:35.840 can share it with your colleague. 15:35.840 --> 15:41.000 So you can find the extension in the URL or you can scan the QR code or you can find it 15:41.000 --> 15:43.280 in Chrome store as well. 15:43.280 --> 15:50.040 So also we have other data sources, like for example, Node.js is similar. 15:50.040 --> 15:55.600 Let's say that you profile the Node.js application and the profile is in your disk already. 15:55.600 --> 16:00.880 So what you can do is to navigate to the Profiler's website and drag and drop that into 16:00.880 --> 16:07.520 the Profiler and you can see the same data and then from the point you can do the same 16:07.520 --> 16:08.520 thing. 16:08.760 --> 16:18.680 Other supported Profiler formats like Linux, Perf, etc. 16:18.680 --> 16:24.440 So yeah, in this talk we've covered some of the most powerful features of Firefox 16:24.440 --> 16:30.920 Profiler like the is sharing capabilities, but Firefox profiles actually has a lot more 16:30.920 --> 16:32.680 to offer than just this. 16:32.680 --> 16:37.200 So if you're curious, I would definitely recommend you to look at the documentation here 16:37.240 --> 16:44.920 or you can scan the QR code or you can join to our Matrix channel linked here to ask us 16:44.920 --> 16:45.920 any questions. 16:45.920 --> 16:49.600 But of course after this talk, I'm happy to answer questions as well. 16:49.600 --> 16:50.320 So thank you.