1 of 44

Discover the New Firefox Profiler

profiler.firefox.com

Nazım Can Altınova

Slides: https://share.firefox.dev/profiler-fosdem

2 of 44

$ whoami

  • Nazım Can Altınova
  • From Turkey - Living in Berlin
  • Software Engineer at Mozilla
  • Working on the Performance Tooling team
  • @canaltinova on Twitter
  • @canova on GitHub

2

3 of 44

profiler.firefox.com

3

4 of 44

4

5 of 44

Wait, what’s happening here?

5

6 of 44

What is a profiler?

6

7 of 44

Helps developers to analyze performance issues

7

8 of 44

And gives insight

8

9 of 44

What is sampling?

9

main()

a()

b()

c()

1ms

Stops the execution of the profiled code at a fixed rate and records relevant information like the current stack.

10 of 44

10

11 of 44

Samples provide a view into the profiled program

11

12 of 44

But it can miss important events that happen quickly.

12

13 of 44

Markers to the rescue!

​

13

14 of 44

What are markers?

Markers provide a view into the executing code that does not miss anything.

14

15 of 44

Some Existing profiler tools

  • Firefox Profiler
  • Perf - Linux
  • Instruments - macOS
  • Visual Studio Diagnostic Tools - Windows

15

16 of 44

What is the Firefox Profiler

16

17 of 44

Capture a performance profile. Analyze it. Share it. Make the web faster.

​

17

18 of 44

18

19 of 44

Two main advantages

19

20 of 44

  • See both JS and native stacks in a merged call tree.

20

21 of 44

2.1. Capture a profile and share with an expert

21

22 of 44

2.2. Capture it yourself, analyze the data later

22

23 of 44

How to capture a good profile?

23

24 of 44

1. Go to profiler.firefox.com

24

25 of 44

2. Follow the instructions

25

26 of 44

26

  • Start/stop the profiler�OR�Ctrl + Shift + 1

2. Capture profile�OR�Ctrl + Shift + 2

27 of 44

27

Interval of sampling

Threads you want to profile

Features you can enable for the profiler

28 of 44

Capturing workflow

  • Make sure that you’re not running something on a background tab.
  • Click “Ctrl + Shift + 1” to start the profiler
  • Do some work (Interact with the UI, or load a website etc.)
  • If you are satisfied with the interaction, click “Ctrl + Shift + 2” to capture the profile.
  • If you are not satisfied with it, click “Click + Shift + 1” to stop it without capturing, and go to step one and start over.

28

29 of 44

Profiler UI and how to read it

29

30 of 44

Timeline

30

31 of 44

Screenshots in the timeline

31

32 of 44

Thread stack graph in the timeline

32

33 of 44

Markers in the timeline

33

34 of 44

34

35 of 44

The range selection

35

36 of 44

The panels

36

37 of 44

Sharing a profile

37

38 of 44

What do we have in the profile data?

38

Samples

Markers

Screenshots

Profile metadata

Network Requests

Other thread information

39 of 44

Profile sharing popup

39

40 of 44

40

41 of 44

Single tab and advanced view

41

42 of 44

42

43 of 44

Demo

43

44 of 44

Firefox Profiler Documentation: https://profiler.firefox.com/docs/

Slides: https://share.firefox.dev/profiler-fosdem

Matrix channel: https://chat.mozilla.org/#/room/#profiler:mozilla.org

Thank You