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!

Outline

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.

Links

• http://princiya.com/portfolio/talks/
• https://princiya777.wordpress.com/
• https://twitter.com/princi_ya
• https://github.com/princiya

Slides

https://docs.google.com/presentation/d/13vI7KepXN2Zm-mHm3mfYh7hGrYg1r_XFFUXWSPNjj8s/edit?usp=sharing