Debug your javascript application with ease when you leverage the power of the browser dev tools.

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 !!!