[00:00.000 --> 00:11.920]  I will just do it very quickly. Nazim Kamaltinova is a software engineer for Berlin, working
[00:11.920 --> 00:16.000]  on Mozilla and has been working on the performance tool in Ting, which developed the Firefox
[00:16.000 --> 00:20.320]  profiler. He goes to talk about what's new with the Firefox profiler. Power tracks,
[00:20.320 --> 00:24.440]  your improvement in portals. Thanks a lot for the introduction. Hi, everyone. And yeah,
[00:24.440 --> 00:31.000]  I will be talking about the profiler and what's new in the Firefox profiler more specifically.
[00:31.640 --> 00:36.120]  So first, I'm going to give you an introduction about the profilers and what the Firefox
[00:36.120 --> 00:41.320]  profiler is, and then I will continue with the importers that we have and the other tools
[00:41.320 --> 00:47.560]  that use the Firefox profiler. Then I will continue with the new features and UI improvements
[00:47.560 --> 00:52.600]  like power profiling, source code view, and inline constructs, and many more.
[00:53.560 --> 01:00.200]  So first, the Firefox profiler is located in profiler.firefox.com, so it's a website,
[01:00.200 --> 01:06.600]  and you can go in there and follow the instructions there. And also, the source code is located
[01:07.480 --> 01:12.360]  in our GitHub repository, so you can find our GitHub repository and contribute if you like.
[01:12.920 --> 01:20.600]  And let's start with what a profiler is first. A profiler helps developers to analyze performance
[01:20.600 --> 01:26.120]  issues, and it gives them insight into how their application works, and it gives them a lot of
[01:26.120 --> 01:33.320]  clues into the application, and then you need to do some detective work to understand the inner
[01:33.320 --> 01:44.120]  details, and then you solve the problems. So I'm not going to get into the normal profilers or
[01:44.120 --> 01:50.360]  give more details about them, because there are multiple profilers like statistical profilers
[01:50.360 --> 01:57.000]  or event-based profilers, but I will talk more in detail about what the Firefox profiler is.
[01:57.560 --> 02:04.840]  And it is a statistical profiler with additional data, and what statistical profiler is that
[02:04.840 --> 02:11.880]  the profiler pauses the execution of Firefox in a determined interval, and then captures the
[02:11.880 --> 02:19.240]  backtrace of the Firefox and all the threads. And after capturing that, also this call stack
[02:19.240 --> 02:26.200]  includes frames from both JavaScript and native code, and after that, Firefox profiler frontends
[02:27.000 --> 02:35.080]  visualizes this captured stack, and it gives you an overview of your application. And in addition
[02:35.080 --> 02:40.840]  to that, we have markers as well as a data source, but I will talk about them later in more detail.
[02:41.640 --> 02:47.960]  And this is what you see when you start to analyze a performance profile. It can be a bit
[02:47.960 --> 02:55.960]  intimidating at first, but don't worry about it. I will talk about it a bit later, but also
[02:56.200 --> 03:05.000]  the more you use, the more you are going to get used to it. Also, so my colleague Julian will
[03:05.000 --> 03:12.440]  be talking about the Firefox profiler introduction tomorrow in the JavaScript day room. I definitely
[03:12.440 --> 03:18.200]  recommend you to check that out as well, because he will give you details about how to capture a
[03:18.200 --> 03:25.640]  profile and how to analyze a profile. So it will be tomorrow at 4.30 p.m. I definitely recommend
[03:25.640 --> 03:33.000]  you to check that. And let's move on to the importers that we have inside the profiler.
[03:33.880 --> 03:41.080]  So first, let me explain what an importer is, because, for example, there are lots of profile
[03:41.080 --> 03:48.440]  data formats on the web, and all the data formats require different kinds of UIs, but
[03:49.240 --> 03:53.880]  we have something called importers inside the Firefox profiler, so you can import the
[03:53.880 --> 04:00.920]  different kinds of data formats into our analysis view, so you can see them automatically. For
[04:00.920 --> 04:07.560]  example, we support Chrome trace event format, Linux perf script, ART trace and Valgrind, and
[04:08.280 --> 04:15.480]  it's pretty easy to just drag and drop all the things into the profiler, and it automatically
[04:16.360 --> 04:23.960]  shows you everything there. And I'm going to skip the video, and we also have additional
[04:23.960 --> 04:33.320]  importers, like ETW importer, but you need to follow the instruction here to be able to import it.
[04:34.840 --> 04:43.640]  And also there are other tools like the JavaJFR profiler that uses Firefox profiler inside.
[04:43.640 --> 04:52.600]  So JFR profiler is an IntelliJ plugin that lets you profile your program and then see the
[04:53.320 --> 04:59.560]  profile JFR format inside the Firefox profiler, seamlessly, and it's been implemented by Johannes
[04:59.560 --> 05:08.280]  Beschberger from SAP, so he's been also contributing to us a lot for the Firefox profiler, so thanks
[05:08.280 --> 05:14.520]  to him as well for implementing that. And you can find the plugin in this link, and also he will
[05:14.520 --> 05:22.920]  be talking an introduction talk in this step room at 5.30pm. If you're curious about his journey
[05:22.920 --> 05:27.720]  and how he implemented his own tool using the Firefox profiler, I recommend you to check that
[05:27.720 --> 05:35.640]  as well. And we have other tools simply from our colleague Marcus as well, so it looks like time
[05:35.640 --> 05:44.200]  is up actually without coming to the other exciting stuff, but do we have still five minutes for
[05:44.200 --> 05:49.240]  questions or? Yes, I left, like we have a few minutes for questions because then we need to
[05:49.240 --> 05:58.120]  change the speakers, but yeah, who has questions? Well, we had more features to come, but
[05:59.080 --> 06:05.480]  sorry about that, because of the technical problems, we couldn't finish it, but let me explain
[06:05.480 --> 06:12.440]  quickly the, like over the new features, like we have the power profiling, and actually Florian
[06:12.440 --> 06:17.640]  mentioned a little bit about power profiling, we have this setting over here that you can select,
[06:17.640 --> 06:24.040]  and then when you capture some profile data, we have this additional power usage per process,
[06:24.120 --> 06:30.360]  and you can see what process is using how much power, and this gives you a lot of information,
[06:30.360 --> 06:36.280]  unless you reduce the power information or power usage of your website or Firefox,
[06:37.000 --> 06:43.720]  and also we include like CO2 emission information there, so you can see the effect of your
[06:44.360 --> 06:50.440]  program, and this is huge thanks to Chris Adams and Frashad from the GreenWeb Foundation,
[06:50.440 --> 06:57.640]  they implemented this CO2 information in our tooltip, and also Florian has a talk
[06:58.280 --> 07:04.280]  in the energy dev room today, you can check that out as well at 5.30, also we have source code view
[07:04.280 --> 07:11.400]  and inline call stacks, and if you look at here, you can see our inline call stack there, and now
[07:12.360 --> 07:18.280]  previously we had some missing samples there, missing frames because of the, because compiler
[07:18.280 --> 07:25.160]  like optimizes some functions by inlining them to the caller, so now we properly show you everything
[07:25.160 --> 07:31.560]  there, and also we have the source code view, so you can see the source code, and it lets you see
[07:31.560 --> 07:38.280]  a lot more inside, and you can see what type of functions are being called inside that function,
[07:39.080 --> 07:46.280]  and you can also use that show file name to context many items to open that up,
[07:47.160 --> 07:50.520]  and our DevTools performance panel has been also replaced with the
[07:51.640 --> 07:57.720]  new Firefox profiler, and we also improved some markers, and unfortunately I won't be able to
[07:57.720 --> 08:04.440]  explain that a lot, but now we changed how we visualized the markers, like now instant markers
[08:04.440 --> 08:12.760]  is in diamond shape, and interval markers are rectangles, so it can give you more information,
[08:13.240 --> 08:19.800]  and it can let you distinguish between them, and we have the task manager that Florian mentioned,
[08:19.800 --> 08:30.120]  I will skip that, and you can select multiple tracks, and you can also, we improved so you can
[08:30.120 --> 08:38.840]  search some tracks if you're curious, and we have lots of transforms there, and now the Firefox
[08:38.840 --> 08:45.080]  profiler front-end is localized, so we have more than 15 languages currently, and more to come, so
[08:45.080 --> 08:52.040]  thanks to our outreach intern Hasna, and also all of our localizers, and you can change the
[08:52.040 --> 08:57.080]  loc-hell, we have no periodic sampling mode, and also our documentation has been refreshed,
[08:57.880 --> 09:02.440]  if you are curious definitely check that out, because there are lots of
[09:03.080 --> 09:09.160]  big inner information there that can let you onboard with the Firefox profiler,
[09:09.800 --> 09:13.640]  and that's it, thank you, and sorry about the technical problems,
[09:19.880 --> 09:24.760]  again you can find the documentation in this link, and my slides are there, if you want to get
[09:24.760 --> 09:29.800]  learn more about them, I also have some presenter notes with more information actually, because I
[09:29.800 --> 09:38.520]  skipped most of them now, but also you can find our matrix channel here, you can ask us anything
[09:38.520 --> 09:44.680]  in our matrix channels, and all of our developers are there, and happy to answer your questions.