JSFoo 2019

On component architecture, front-end engineering and Developer Experience (DX)

Debugging the Debugger

Submitted by Princiya Sequeira (@princiya) on May 15, 2019

Section: Full talk (40 mins) Technical level: Intermediate Status: Waitlisted


This talks is an inception of debugging the Firefox devtools’ debugger which is built using React and Redux. All of us love to ‘console’ log our code, but there are other effective techniques that will help accelerate the debug loop cycle. In this talk I will present the various available browser devtools debugging techniques using practical examples from the community to debug the development of the debugger project!


While breakpoints are most commonly used for debugging purposes, logpoints add a lightweight alternative to script pausing. Events are the binding glue of the web; exposing what causes DOM changes in the right way can provide a much better understanding of the various scripts updating specific DOM elements and potential issues. Enabling breakpoints and similar debugger concepts are a great way to debug web applications, diagnose failing tests, untangle script interactions and race conditions.

debugger.html is Firefox Devtools’ community maintained debugger which is built using React and Redux. It works with Firefox and Chrome ‘s debugging protocols and also helps in diagnosing Node.js applications. In this talk we shall inspect the running debugger app itself to learn more better ways of debugging web applications, a.k.a, debug the debugger.

We shall also look into the comparative landscape of available debugging techniques across different browsers and text editors. The talk is packed with tips to get better at debugging and tricks to debug web applications.

Speaker bio

I work as a Lead Front-End Engineer at a health tech startup based out of Berlin. I 💙 food and JavaScript! When not coding or cooking, I am an Advocate for Diversity & Inclusion, OpenSource and Privacy & Security.

Past - Outreachy intern; Present - Lightbeam (browser extension that reveals web tracking) and Firefox Devtools’ Debugger Maintainer. I volunteer my time in co-organising the Berlin critical tech meetup and curating diversity scholarship applications for JSConfEu.

I am too obsessed in translating tech jargon into meaningful cartoons and want to make everything accessible and performant! I love to attend conferences, network with people and mentor them.




Preview video



  • Abhishek Balaji (@booleanbalaji) a year ago

    Hi Princiya,

    Thank you for submitting a proposal. We need to see detailed slides and a preview video to evaluate your proposal. Your slides must cover the following:

    • Problem statement/context, which the audience can relate to and understand. The problem statement has to be a problem (based on this context) that can be generalized for all.
    • What were the tools/frameworks available in the market to solve this problem? How did you evaluate these, and what metrics did you use for the evaluation? Why did you pick the option that you did?
    • Explain how the situation was before the solution you picked/built and how it changed after implementing the solution you picked and built? Show before-after scenario comparisons & metrics.
    • What compromises/trade-offs did you have to make in this process?
    • What is the one takeaway that you want participants to go back with at the end of this talk? What is it that participants should learn/be cautious about when solving similar problems?

    We need your updated slides and preview video by 28 May to evaluate your proposal. If we do not receive an update, we’d be moving your proposal for evaluation under a future event.

    • Princiya Sequeira (@princiya) Proposer a year ago

      Hi Abhishek,

      I have updated my talk proposal with a preview video and the first draft version of the slides. Looking forward to the feedback.


      • Abhishek Balaji (@booleanbalaji) a year ago

        Thanks, moving this to evaluation.

Login to leave a comment