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
Com’on yar!!! Clean up your code!!!
Debugging ain’t a stress
Yo Bugs !!!
Leveraging JS Console
ARE YOU FAMILIAR WITH THE CONSOLE?
Leverage the power of Browser Dev Tools
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
Do all browsers treat me the same?
Edge has an edge over Chrome and Firefox owing to its ‘Changes’ subtab
Firefox has a ‘Font’ and ‘Animations’ subtab
Edge has a cool ‘Color picker’
Chrome lets you inspect tooltips as well
Chrome has a variety of options compared to other two
Hey!! What about production?
INTERESTING QUESTION !!!
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
And you get rolling…
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
…and much more