This document discusses several tools for enabling workflows for code and no-code collaboration including Firefox Profiler, Firefox Replay, and layout debugging tools. Firefox Profiler allows collaborative performance analysis by enabling users to record, capture, slice, and publish recordings to share. Firefox Replay enables collaborative debugging by allowing users to record page interactions, save sessions, and share recordings so others can replay and analyze them while adding logs for cues. Additional layout debugging tools allow visualizing CSS Flexbox, Grid, and analyzing sizing decisions.

1. Workflows to enable
Code / No-Code
Collaboration
Harald Kirschner
@digitarald
@FirefoxDevTools @Mozilla

2. 12,334contributors
747,524contributions to Firefox
65,371code specific contributions
1,870,928contributions across other the Mozilla contribution areas
Firefox's contributor community, 20172019
Mozilla & the Rebel Alliance, An interactive network representation of Mozilla's contributor communities

3. The 50 best workplaces for innovators
Fighting for Online Freedom
Fast Company 08062019
“If Mozilla is going to preserve the internet for
everyone, the team working on that directive
needs to reflect as many perspectives as
possible, cultivating a diverse, open culture of
collaboration.”

4. Record & Report
1
Triage & Diagnose
2
Enable Everybody. You, Engineers, Designers,
Product, QA, Automation, Customer Success,
Evangelists, Community, Contractors, DevOps,

5. Visual Layout Debugging

6. Modern CSS Layouts
CSS Flexbox CSS Grid

7. Variable Fonts editor

8. CSS changes are tracked

9. Export changes in many formats

10. CSS Flexbox Highlighter

11. Customize highlighter color

12. Browse Flex Children

13. Break down of Flexbox Sizing Decisions

14. CSS Grid Highlighter

15. Visualize Grid relationships

16. CSS Subgrid coming in Firefox 71 🎉

17. Collaborative Performance
with Firefox Profiler

18. Origins of the
Firefox Profiler

19. Firefox Profiler in Firefox’s toolbar

20. Trigger all the slow things …

21. Capture opens the recording in a new tab

22. Your familiar performance analysis, just web-based!

23. Slice the recording to the critical moment

24. And Publish to get a link for sharing

25. Share that link to collaborate …

26. Start an iterative analysis cycle

27. Share out insights or follow up by generating links

28. Side-by-side Comparison of Recordings

29. Collaborative Debugging
with Firefox Replay
(aka Time Travel Debugging)

30. While in your app, start a recording session

31. Page load and all interactions will be recorded

32. Save your recording session …

33. … and share it out to your team

34. Load the session to replay and analyze

35. Lets add some logs, starting with user input

36. Logs are used as cue points to jump back in time

37. Scrub over the Timeline for before/after previews

38. Logpoints let us inject on-demand logging

39. Replay analyzes each log for instant previews

40. Navigate back to when each log was hit

41. Iterate on your logs to observe state over time

42. Console-Log-Debugging FTW

43. Scrub through execution past and future

44. Layout Tools Firefox Replay
Experiment in Firefox Nightly
(macOS only)
👍 Ready in Firefox DevTools
Firefox Profiler
profiler.firefox.com firefox-replay.com
Firefox extension in Firefox
Feature in Firefox Nightly
developer.mozilla.o
Harald Kirschner
harald@mozilla.com
@digitarald @FirefoxDevTools
Thank you! Get started:
Visualize, Author & Collaborate Record, Share & Analyze Collaborative Time-Travel-
EarlyAdopters Wanted