This document discusses debugging JavaScript and provides tips for leveraging browser developer tools. It begins by noting common issues that make JavaScript debugging stressful like using loose equality checks and minified code. It then outlines features of the browser console like console.log and advanced debugging techniques using the Network, Performance, Memory, and React tabs. Differences in developer tools across Chrome, Edge, and Firefox are highlighted. Finally, it introduces TrackJS for monitoring applications in production and tracking errors.

1. Debugging JS
NOT A NIGHTMARE ANYMORE…CHEERS !!!

2. Why do people hate debugging JS

3. Debugging === Stress??
 Why do people use ‘==‘ or ‘!=‘ . Lazy enough to add an extra ‘=‘ !!!
 Here come dangling & circular references…welcome aboard !!
 And to add to the woes…someone minified the code in development
environment. #doomsday
Com’on yar!!! Clean up your code!!!

4. Debugging ain’t a stress
anymore!!
Yo Bugs !!!
Image Source

5. Leveraging JS Console
ARE YOU FAMILIAR WITH THE CONSOLE?

6. Oh Wait…it’s console.log() right?
Yeah I am familiar with that.
 Console.log / Console.debug
 Console.group
 Console.table
 Console.error / Console.exception / Console.warn
 Console.count
 Console.assert
 Console.trace

12. Advanced Debugging
Leverage the power of Browser Dev Tools

13.  Network Tab – server calls are expensive
 Performance Tab – powerful profiling
 Memory Tab – prevent memory leaks
 Emulation – not all browse on the same phone
 React Tab – great tool for debugging react applications

14. Developer Tools
Chrome vs Edge vs Firefox

15. Do all browsers treat me the same?
(Live Examples)
 DOM Explorer
 Edge has an edge over Chrome and Firefox owing to its ‘Changes’ subtab
 Debugger Tab
 Firefox has a ‘Font’ and ‘Animations’ subtab
 Edge has a cool ‘Color picker’
 Chrome lets you inspect tooltips as well
 Emulation
 Chrome has a variety of options compared to other two

16. Hey!! What about production?
INTERESTING QUESTION !!!
Image Source

17. TrackJS to your rescue
 Monitor application in production environment
 Fix bugs before users report them, hopefully
 Simplified stack traces
 Insightful graphs to monitor the health of application over time
 Framework integration, ofcourse

19. And you get rolling…
 Error Segregation
 A timeline of events and actions leading up to an error
 Trace state transitions
 Get info of IP addresses to understand user behavior in a particular geography
or organisation.
…and much more

20. Thank You !!!