We're sorry but this page doesn't work properly without JavaScript enabled. Please enable it to continue.
Feedback

Discover the New Firefox Profiler

00:00

Formal Metadata

Title
Discover the New Firefox Profiler
Title of Series
Number of Parts
490
Author
License
CC Attribution 2.0 Belgium:
You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal purpose as long as the work is attributed to the author in the manner specified by the author or licensor.
Identifiers
Publisher
Release Date
Language

Content Metadata

Subject Area
Genre
Abstract
Using a profiling tool help developers to get detailed information about the execution of their application and allow them to understand the behavior of it. The Firefox Profiler is a profiler that is built into Firefox. It has tighter integration with Firefox than external profilers. It can provide more information and insight into what the browser is doing. It can also show the memory usage and Firefox internal code execution. During the talk, I will be explaining, how to capture a good profile and how to analyze profile data. I will be sharing Firefox Profiler specific features like memory tooling, single tab/advanced view and how to use them. I will also be sharing the future of Firefox Profiler! Web applications are more popular than ever and users expect more from a web application. Unfortunately, they are using applications more frequently from low powered devices, which strains your application’s performance. Managing application performance can be challenging as modern applications have many dependencies and their complexity can hide the issues. Using profiling tools to look for potential bottlenecks can significantly reduce the number of problems in your application. It helps you to get detailed information about the execution of your application and it allows you to understand the behavior of it. The Firefox Profiler is a profiler that is built into Firefox and is available at https://profiler.firefox.com/. It has tighter integration with Firefox than external profilers. It can provide more information and insight into what the browser is doing. Aside from understanding the execution of a web page, it can also show the memory usage and Firefox internal code execution. The intended audience is all web developers and people who want to contribute to Mozilla by helping us analyze the Firefox performance issues by capturing profiles and filing bugs.
SoftwareTwitterSoftware developerSampling (music)CodeBit rateInformationExecution unitSample (statistics)Event horizonView (database)Stack (abstract data type)Network topologyExpert systemMotion captureProfil (magazine)View (database)System callComputer programmingGraph (mathematics)Goodness of fitRow (database)Line (geometry)User interfaceWeb browserInformationSoftware bugData analysisCASE <Informatik>Bit rateExpert systemSequelWeb pageMathematical analysisSource codeComa BerenicesSampling (statistics)AdditionCodeComputer iconTask (computing)2 (number)Network topologyMultiplication signFunctional (mathematics)Software engineeringSingle-precision floating-point formatStack (abstract data type)Machine codeBranch (computer science)Web 2.0MereologyMotion captureData compressionFrame problemSoftware developerLatent heatElement (mathematics)Graph (mathematics)Scripting languageGreatest elementLogic gateInformation technology consultingReal numberWebsite1 (number)File formatMultilaterationTouchscreenPower (physics)Closed setArrow of timeComputer animation
Thread (computing)Graph (mathematics)Range (statistics)InformationSample (statistics)Pointer (computer programming)Default (computer science)DemonTrailWeb-DesignerArithmetic progression1 (number)Demo (music)Sheaf (mathematics)InformationMultiplication signDifferent (Kate Ryan album)View (database)Slide ruleContent (media)Computer iconUniform resource locatorCodeSource codeProfil (magazine)Web 2.0Selectivity (electronic)Sampling (statistics)Right angleProcess (computing)Row (database)Category of beingSoftwareRange (statistics)TouchscreenMultilaterationSingle-precision floating-point formatShared memoryGraph (mathematics)Line (geometry)Logic gateRepetitionSoftware developer2 (number)Computer animation
Profil (magazine)Demo (music)Slide ruleComputer animation
Profil (magazine)InformationMotion captureWeb pageTap (transformer)Keyboard shortcutComputer animation
Arithmetic meanConvex hullStructural loadWritingMereologyBitMultiplication signFunctional (mathematics)Closed setView (database)System call2 (number)Table (information)Stack (abstract data type)InformationGroup actionSoftwareCorrespondence (mathematics)Range (statistics)Frame problemProcess (computing)Event horizonPattern languageInterpreter (computing)Graph (mathematics)Computer configurationDifferent (Kate Ryan album)Profil (magazine)Web pageGreatest elementSheaf (mathematics)Java appletRevision controlFlagSoftware developerKeyboard shortcutNetwork topologySpeicherbereinigungCartesian coordinate systemUniform boundedness principleFilm editingCellular automatonFrequencyLevel (video gaming)Physical lawTouchscreenTap (transformer)Android (robot)MathematicsComputer animationLecture/Conference
Execution unitSlide ruleMatrix (mathematics)InformationMatrix (mathematics)Slide ruleProfil (magazine)Computer animationLecture/Conference
Open sourcePoint cloudFacebook
Transcript: English(auto-generated)
Okay, hello everyone and welcome So yeah, as you said, I'm gonna talk about the new Firefox profiler today, and I'm Nazem John I am a software engineer at Mozilla and I'm working on the performance tooling team and
You can find me there So the Firefox profiler is essentially the profiler dot Firefox dot com so you can visit there and there are some instructions But I'm gonna walk you through everything so bear with me So this is a typical like screenshot from Firefox profiler and like What's happening here? Like there are a lot of stuff going on. Like there are a lot of colors. There are a lot of graphs. So
It's kind of intimidating at first for people's to use that tool but I'm gonna walk you through all the panels and every detail So you're gonna be more comfortable to use that tool once we're done
so but essentially you should take a look at back and like we should Learn what is a profiler first? so profiler essentially helps developer to analyze the performance issues and
Use insight or into how Program works so it does that by sampling the prof program. So what is sampling then? Profiler stopped execution of the program in a like a fixed rate for example one millisecond. So
and records the relevant data For example, that can be a current stack. It records the data and resumes the profile program later So in this graph you can see a simple program and the work the vertical lines are the profiling profiler sampling and
those straight lines are the program execution and main calls a calls B and calls C So as you can see on the first peak first sequel actually Profiler missed it because like the red
Arrows are the stack of the current program and we managed to capture the main B, but at the at the first peak we actually managed to miss it because like the C runs less than one millisecond and
It just falls between two sampling time and we didn't see it but Rest of it like as you can see on the second peak second sequel. We actually managed to capture that call so it gets all the stack information in an interval time and
Once we have that we aggregate those data and we create something like this a call tree So this is an example from Firefox actually So there's a main function and there from the main there are other calls So we sample
Every millisecond and aggregate that data and also we create those timings from that that aggregated data I'm gonna talk about the same the timing later so yeah, as we learn the samples provide a view into the profile program, but as you can see on the
First sequel we can miss some stuff that happens quickly So markers to the rescue as an additional to the sample data in the profiler we also have marker data and What are markers so they are also very similar to samples
They provide a view into the executing code but they don't miss anything because we manually add those information in the source code and We also include additional information for example in this picture There is the call stack the stack and then there are some
Additional information for styling. So this is a marker that we add whenever there's a new styling happens in a web page so We learned those two Main data sources from a profiler, but what is the Firefox profiler now then?
So the motto of the Firefox profiler is capture performance profile Analyze it share it and the make the web faster so this is again the same one, but there are two main advantages of
Firefox profiler and The first one is you can see both JavaScript and the native call stack in a single call tree What that means is so when you run a JavaScript function in your web page and if that function
for example as a DOM element and we need to see the DOM edition in the Firefox source code, so We also after that JavaScript Frame we also see some Firefox related native code execution so you can also see that those informations as well
Also, you can filter to just JavaScript only. So if you are profiling your web page, you can just see JavaScript that that's what it's important to you and The second part has two branches The first one is for actually non-technical people
So if you're a non-technical person you can just capture a profile for example Firefox is a performance issue and you you have you can reproduce that but You don't know what to do So what you can do is capture a profile and then share it with an expert in this case
you can create a bug in bugzilla and you can share the URL of that specific profile data and Some expert can come and see that profile later Also, if you're a technical person, you can capture it yourself it can be again a web page or Firefox and
You can save it into your desktop or you can share it and keep the URL and then take a look at your data later So we'll now learn that there are actually two main UIs in this first You need to be able to capture a profile and then you need to be able to analyze it
so we're gonna see the first capture in UI and How to capture a good profile data so first you need to go into the profiler dot Firefox dot com and You just need to follow the instructions. It's pretty straightforward
there is a big button that says install add-on so you need to install the add-on first and once you install that You're gonna see this pop-up So this an icon will appear on the top right side of your Firefox and once you click that this pop-up appears and
There are two big like main buttons here. So once the first one is for you to Start recording or stop recording and the second button is to capture that profile So a work a typical workflow is this first you need to
Make sure that you don't have any background task or tabs in your Firefox So you need to isolate that performance problem as much as possible and once you do that you need to start the profiler and After that, you can do the work that that do you think?
there is a performance issue, for example, you can if there's a performance issue during the page reload You can start the profiler and then reload it wait until it it's done and then capture the profiler once you do that a new tab will pop up and
It's gonna bring you the profiler at Firefox dot com again And now you're gonna see the data there and you're gonna see the analysis data Analysis UI that we've seen before Okay, so now we captured the profile data and now we can actually
Analysis and try to analyze it So this is the UI I know it's complicated at first But this section is the timeline. So as you can see on the top side here, there are some time and information and
here at first Row, there is a screenshot track so it also records screenshots of your Firefox so you can actually see the UI and the code at the same time and try to see what is happening here and
You can also hover over those and try to see the bigger screenshots and In this section in this process This is the stack graph. So we were capturing the stack
during the sampling now we have that data and we aggregate that and We show a dense view here. So it's not great Accessibility wise because there are a lot of colors. We're trying to make it better But the important color for example here is the yellow one because that means JavaScript category
So you can also see other ones for example DOM as blue and etc and Here you can see The markers that we mentioned before they're more precise there are a lot of them so we again put it into add them to you and
You can hover over those and see the details of those markers. For example This is a stylin marker and you can see some relevant information About that marker and you can see that to 17 milliseconds, which is quite long usually and
You can also actually Select a range during that timeline and then you can click into that magnifier icon in the center And you can actually make it make that we you the full view and then you can zoom into that as long as you want to
see what's happening there and The other thing is we have the panels So at the top of the profiler we have the dense view That we put everything but on the bottom side there are more information for you to see This is more detailed. So I'm not going to go into each tab right now because we're gonna see
Those into the demo slide so That's easier that way but also So now we are familiar with the UI But if you're a non-technical person, you don't have to care about that. You can you should just know how to
share that profile so inside the profiler data we have a lot of Different kind of data the first two ones are that we mentioned Those are the main ones samples and markers and we have screenshots network requests
Metadata, etc. So keep in mind those and so Once you get the UI actually, there's a button on the top right corner Named publish so you can click into that and this pop-up will come up and
Here you can actually remove some of your personal data before Sharing it because as we can see on the previous slide There are a lot of information and those information can include some personal data as well so here for example, we can
Remove the screenshots that can be personal information or we can remove the source resource URLs So once you remove those you can click publish and It's gonna just bring you the URL after That upload session is done
And now you have the URL you can just copy that and send it to someone else or you can post this into the bugzilla comment and some other people can Take a look at that information later And also we have
Single tab and advanced view so this profile UI is Complicated and there are a lot of Firefox related information in it as well but if you're a web developer, you don't have to take you don't have to know those and you can just
See your web content track and you can try to analyze it So this is still a work in progress So we are trying to make it the profiler better for web developers so you can easily start using it but
It's it will happen very soon so you can actually just see the information that you want to see so let's go back to the demo section now and Now we can See those panels and you can see what is happening there
As you can see when once you open up that profile so by the way, you can get those slides here in that URL and You can get that demo
Profile so you can take a look at that So here you can click on that and once you have that you can see it So here this is an example profile that we captured before but before that I want to actually Show how we capture it. So we've seen the UI before but still I want to show you how to do that
So the here not here here. We have the add-on so you can Press start and now we are capturing the information of Firefox and that web page And now you can do some stuff for example, we are doing the tap switch now to
Analyze the performance issue of that tap switch and now we are done with it and we can click capture but I would recommend you to use the shortcuts instead because once you open this Pop up it actually affects the performance of Firefox like you can it
Creates a new view and paints it so To you can minimize the usage of that pop-up and then just use the shortcuts instead So that's much better. So once you done that it captures it. So this is the capturing part and
Let's go back to our profile so we have the screenshots here so you can actually hover over those and see the Bigger version of those and For example, this is a profile that we captured
during the Wikipedia and We try to open the dev tools panel and then close it afterwards. So this part is The one that we open the panel as you can see here. So we are open in this dev tools panel here and this
Big Stack is the dev tools initialization so here we start to initialize that dev tools as you can see and Here it's done at the end of that stack. We initialized it and Afterwards here. We are closing back again and this tag corresponds to the closing part so you can see
what Functions that we are calling during the initialization during the Dev tools opening and during the closing and For example here a garbage collection happens once we are done with that data
So and those are the markers that you can just hover over those and see more information about them and Usually Red bar means that you need to fix something
There's something interesting going on there because there's a delay happening there. So you need to minimize the event processing delays essentially and Here we are doing a lot of work so we can just zoom into that view as well to
see what's happening and Also, we can click into a marker to Automatically select that range and we can zoom into that wheel. So Once you're in there, you can go back here to the full range So let's take a look at that section because there are a lot of
information there and there are some interesting things going on so we zoomed in here and We are going to See the bottom of the page the tabs so The this part is the part that we need to analyze and we need to see what is happening
so you can click each or you can option click and you can Expand everything and you can try to analyze this data. So For example here there's a start there's a main function of Firefox and there's other functions happening
but if you're another Firefox Developer you don't need to know those you can just switch here to JavaScript and you can only see the frames that you actually Can change and here you can again
Expand those and try to see for example on the left side. There's a run in time and this callback this promise callback takes the forty nine percent of the time and it is 295 milliseconds, so it's very high and we can see the self time here
so the running time is the whole time including the Nested function calls and the self time means the time actually that function itself takes so we can try to see for example, there's a
Ten milliseconds half time half time happening here, so That's a red flag so we can try to see what that load function actually does and maybe we can try to make it more performant or Let's see other things
So there's a seven millisecond again the load function interesting so That means that that load function does a lot of work I don't know if it actually has to do it or maybe you can do some tweaks and make it more performant Here another load function so we start to see a pattern here
So there are a lot of individual load function calls happening. Maybe we can just merge them together try to Call everything at once instead of just doing everything Or Yeah, we can just try to
See how we can reduce that time and this is the call tree basically. So this is the that and the second Tab is a bit more visual. So this is the flame graph and This is essentially the same data with the call tree, but you you now have a bottom-up
call stack here, so you see the Longest running functions here. For example, this is a promise call stack that we've seen before and once you go up you see the other functions and You can hover over those again and see
More details about those functions and for example, you can see how long overall takes or how long JavaScript interpreter actually takes that time and You can again change this text you can change the JavaScript only or native only so native only means that
basically C++ rust or if you're an on Android it can be Kotlin or Java so it depends and this is the JavaScript and If you change it back to all all stacks, it will show you everything here
So the stack chart is also pretty similar with the first one But the difference with the flame graph is the first thing this is the top-down and the most important Difference is this X axis is actually the time. So if you
Go back to the full range. You actually see those frames here and You see those frames Here so you can see the timing information and what? frame is being called in what time so and
You Can go back to marker chart. So this is the same data with the those markers, but it's more detailed and Grouped for example, you can see the DOM group. There's garbage collection graphics JavaScript, etc. And You can see more information if you hover over those and
Marker table is the same data, but with a table Also, by the way, you can filter whatever you want for example if you want to see the load Events you can write load events and you'll see load DOM events. For example
This is the before load before unload and load and stuff and you can see this network load function markers, so And you can do that filtering pretty much everywhere you can do that here as well you can see
only load functions and The last tab is the network tab. So that Helps you to see what network requests are being made in this profile session and you can again
hover over those and you can see how long does it take and You can see a more detailed view into that HTTP request Yeah, I think we are pretty much out of time like we have two seconds two minutes I guess so I'm gonna
Close up the demo and So you can Learn more information in this documentation you can go in there and try to see you can also get those slides and You can take a look at those again, and if you have any question, please
just join into our matrix channel it is profiler and Just ask us anything. We are happy to help you You can just ask us. So thank you. Thank you so much
and If you have any questions, please ask yeah, we can have like one or two questions Till I ask the next speaker to come and set up. Yeah, I'm coming