Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Debugging JS - Leverage the power of Browser Dev Tools

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

  • Login to see the comments

  • Be the first to like this

Debugging JS - Leverage the power of Browser Dev Tools

  2. 2. Why do people hate debugging JS
  3. 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. 4. Debugging ain’t a stress anymore!! Yo Bugs !!! Image Source
  5. 5. Leveraging JS Console ARE YOU FAMILIAR WITH THE CONSOLE?
  6. 6. Oh Wait…it’s console.log() right? Yeah I am familiar with that.  Console.log / Console.debug   Console.table  Console.error / Console.exception / Console.warn  Console.count  Console.assert  Console.trace
  7. 7. Advanced Debugging Leverage the power of Browser Dev Tools
  8. 8.  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
  9. 9. Developer Tools Chrome vs Edge vs Firefox
  10. 10. 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
  11. 11. Hey!! What about production? INTERESTING QUESTION !!! Image Source
  12. 12. 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
  13. 13. 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
  14. 14. Thank You !!!