So, let's start.
Thank you.
So, when we're working on performance issues, we often encounter problems that are not
necessarily in our direct area of expertise.
We have to share the things we see in performance profiles without colleagues and in return,
they might want to share their findings back with us or with the others.
This is not always easy, but it should be.
I'm Nazim Jan Altenova and I work for the Firefox Profiler and today we're going to be
talking about the Firefox Profiler and how we can make it so much easier for you to collaborate
with your colleague.
First, we're going to be talking about the challenges we face day-to-day while collaborating
using the performance tools.
Then we're going to take a look at the Firefox Profiler.
We're going to capture performance profile and then we're going to look at the sharing
capabilities that we have inside the Profiler.
Then lastly, we're going to look at the application that can help us with both across
different browsers or different profiles and toolchains.
So, what are the challenges we actually face day-to-day while collaborating with our colleagues?
Let's say that I work for Facebook and I was tasked to make their page load as fast as possible.
Let's say that for the specific case, I was looking at the profile of the WayneDrog Johnson's
Facebook profile and I noticed something interesting in the profile and I would like to reach
out to my colleague.
Traditionally, what does mean that I need to download the performance profile from Chrome DevTools
to my desk?
I need to figure out a way to share it with my colleague somehow and at the end, once they
open it up, I need to explain the issue in such a way that I can see the thing that I was
seen in my local computer.
But this is 2025, surely there's a more effective way of collaborating with my colleague
and making sure that we are looking at the same thing while collaborating.
One sharing is not really the solution here as this conversation might happen as synchronously
or we might want to look at the different parts of the profile at the same time.
Firefox Profiler is a tool that was initially developed for Firefox engineers to make
Firefox faster but then lots of great collaboration features were added to it.
And later it was expanded to include many more data sources and workflows.
And it would be where it allows web and application developers to collaborate on many different
types of applications and workflows.
So let's see how to use the Firefox Profiler.
To be able to use it first, we need to navigate to Profiler.firefox.com.
And if you're in Firefox, you will see this big button says that says enable.
As you click there, a new popup or new icon will appear on the top right corner of your browser.
Now after doing this, we're ready to profile.
So let's see how to profile a website.
First I need to look at go to the top right corner and then click on the profile icon to start
profiling.
Once I click now, we are recording everything inside the Firefox and then I paste my URL
and navigate to it eventually.
Once I navigate and once I'm sure that everything is done, I captured everything.
I go back to the profile icon and click one more time to capture the profile.
And now the profiler is captured.
So we go back to this full range one more time and we click and click the Facebook.com
to focus on this URL, this tab only.
So now that's it, in the end, you should see a profile that looks something like this.
So we have everything that we need, we capture the data now, it's time to analyze it.
So first, let's take a look at the different components of this UI because if you are
new to profiling and if you're not familiar with the Firefox Profiler, it can be a bit
intimidating at first, right?
So the Firefox Profiler is actually split into two main sections.
The first one is the timeline over here and the second one is the bottom panel there.
So let's talk about the timeline.
Timeline is the overview of the profile that we just captured.
We have screenshots and other information.
So this is the area where we navigate in the profile and once we are done navigating, once
we zoomed into the section that we would like to analyze, we switch back to the bottom
panels and analyze it properly.
So in the timeline we have the screenshots.
So you can hover over them and see what is happening in a certain area in the time.
And then we have the Facebook.com track which is the all activity happening in this tab.
So you see yellow is here means JavaScript and yeah we have some areas.
So you can see the CPU usage over of this track as well.
And once you hover over a section you will see lots of tool tips.
So here you can see the CPU which for example 94% and the category is layout and then
you can see this tag.
So this gives you some ideas on what is happening in a certain time.
And then we have the network track.
So this shows you all the network requests that are happening for this tab specifically.
And then below it we have the memory.
So you can see the relative memory increase and decrease over time the allocation and the
allocation over time.
And so this was the timeline and let's go back to the bottom panels again.
So the first thing we see is the call tree tab there.
So the call tree is the aggregation of all the stacks that we captured while sampling.
And this on this left side you see all the time and information.
And on the right side you see the function.
So you can expand and see what type of functions are being called.
And the flame graph is essentially the same data but with a different visualization.
You see the functions again.
This tag chart looks similar to flame graph but it's actually a bit different.
So there are two main distinctions.
One, it is top down instead of bottom up.
But the most important thing is that it is not aggregated.
So in the flame graph everything was actually collapsed.
But here you see that the x-axis is actually time.
So it actually overlaps with the timeline over here.
So this is actually what you see usually in Chrome Devtools.
The graph, this tag chart that we have there.
And the first three tab were related to the sampling data.
And the last three are about the markers that we have.
So the markers are special events that we have inside Firefox.
So we instrument Firefox a source code to inject some information like these.
And you can also add your own markers with performance.mark or performance.measure APIs.
So when you hover over a marker like this CSS transition one,
you see a additional information about it.
For example here we see the animated property is transformed and the target is the span.
So we get to see a lot more information about this execution.
And the marker table is similar.
It's the table version of the marker chart.
And network tab is again like marker chart but for specific format work.
You see a lot more detailed information about network requests here.
So now we get a sense of the UI.
Now we know what which top one is which.
So let's capture the profile.
And now let's analyze that further and see what needs our attention.
First I look at the screenshots over here to see where the navigation occurred.
I see that it usually overlaps with the activity that's happening in the track.
So I see that it is this section.
So I zoom into this area by clicking on the magnifier icon again.
And now I see that there's a regular red bar here.
It's usually a jank happening here.
So jank means that the website wasn't responsive in this section for more than 50 milliseconds.
So I click on there and then zoom in there as well.
And now I don't really have the necessary expertise to analyze this information.
So I need to share this with my colleague.
To be able to do that I go up to this upload local profile.
And then I remove some information if I need to.
And finally I click on the upload button.
So once I click on the upload the profile will be uploaded to our server.
And then you will get here like a small URL permalink for you to share.
So now you can share this permalink with your colleague.
And immediately they will see the exact same view that you are seeing.
And now we see in the sharing part and that's which gears to your colleague's perspective.
Let's see how they can look at your profile.
Let's say that we already shared the URL, the permalink with the colleague.
And they can just open their own browser.
It can be Chrome, it can be any browser.
And then they paste the URL so they can navigate to it.
After the profile is loaded, you will see the exact same view.
So this was the same view that I was seeing.
Like this is the zoomed in section.
This is the jank marker that I zoomed in.
And this view will be preserved for your colleague to see.
So it makes it so much easier for you to tell your colleague can look at this section of the profile.
So I'm interested in here.
And now let's assume that our colleague is investigating further in this profile.
And they go back to the timeline in the time range one more.
And see that there is like a gap here.
So this gap indicates that there was no CPU utilization happening.
So since this is a page load, we would like to utilize the CPU as much as possible.
So from experience, they know that it usually happens when you are waiting for a network request.
So the JavaScript is done.
We need to finish a network so they can execute it.
So they switch to the network tab here.
And then they see that indeed there are some network requests that we are waiting for.
So they again go up there to permitting button and generate a new permitting this time.
So and then they share it with their colleague who knows more about the network inside of their website.
So again, the profile was already shared before.
So we didn't really do any more uploads.
But now we get a screenshot or a snapshot of that view.
So now when I share it with my colleague, they will see the exact same view as well.
And in the meantime, they've gone back to looking at the jank marker that jank event that we were looking before.
So they go back, these are in this red area one more time.
And this time, they would like to analyze it because this is the colleague's perspective.
So they switch to the snapshot.
They see that even though they work at Facebook, they don't have the source maps available apparently.
So they literally have no idea what's happening here.
But they can still understand some things, right?
There are some this QI function and RI function being called over and over again recursively.
So from experience, they know that this can be some react DOM happening.
And they would like to zoom in to this area.
So what they can do is they can double click on a stack to zoom in again.
So they double click and then click on the magnifier icon to zoom into the section.
And now they're investigating the stack a bit more and they see lots of RI functions being called.
So they filter by typing RI here.
And now they need to send us to their colleague, knows more about the react side.
And then they generate a new permalink again by going to the right section.
So again, it's good to note that now that we filter the stacks and we change the tab to the
section, these will be still preserved.
So now your colleague again will see the same view as before.
So but, up until this point we've talked about the Firefox Profiler in Firefox.
But actually the Firefox Profiler isn't just for Firefox.
You can use it in other applications as well.
We will actually recently publish the Chrome extension that lets you use the Chrome's internal
profiler to capture record your website.
And then eventually it opens up the Firefox Profiler analysis view for you to analyze.
For example, let's see again here, I've added the profiler extension here and added to my toolbar.
So it's the same steps to reproduce.
I click on the ProfiRiCon, it starts profiling and then I navigate to the URL that I would
like to navigate to and then once it's done, I go back to the URL and the icon and I click
one more time to stop profiling and capture the profile.
And once I do that, it will show you the same view, but this time with the data that comes
directly from Chrome's internal profiler instead of the Firefox.
So now from this point you can do the same thing like you can analyze the profile or you
can share it with your colleague.
So you can find the extension in the URL or you can scan the QR code or you can find it
in Chrome store as well.
So also we have other data sources, like for example, Node.js is similar.
Let's say that you profile the Node.js application and the profile is in your disk already.
So what you can do is to navigate to the Profiler's website and drag and drop that into
the Profiler and you can see the same data and then from the point you can do the same
thing.
Other supported Profiler formats like Linux, Perf, etc.
So yeah, in this talk we've covered some of the most powerful features of Firefox
Profiler like the is sharing capabilities, but Firefox profiles actually has a lot more
to offer than just this.
So if you're curious, I would definitely recommend you to look at the documentation here
or you can scan the QR code or you can join to our Matrix channel linked here to ask us
any questions.
But of course after this talk, I'm happy to answer questions as well.
So thank you.