Debugging JS - Leverage the power of Browser Dev Tools

•Descargar como PPTX, PDF•

0 recomendaciones•97 vistas

MadhurMaloo

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

Tecnología

Debugging JS
NOT A NIGHTMARE ANYMORE…CHEERS !!!

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

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

Leveraging JS Console
ARE YOU FAMILIAR WITH THE CONSOLE?

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

Advanced Debugging
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

Developer Tools
Chrome vs Edge vs Firefox

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

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

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…
 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

Más contenido relacionado

Similar a Debugging JS - Leverage the power of Browser Dev Tools

The Ember.js Framework - Everything You Need To KnowAll Things Open

Ruby in the Browser - RubyConf 2011Ilya Grigorik

.NET Debugging Tips and TechniquesBala Subra

.Net Debugging TechniquesBala Subra

Алексей Ященко и Ярослав Волощук "False simplicity of front-end applications"Fwdays

Java Tools and Techniques for Solving Tricky ProblemWill Iverson

Tools and Techniques for Faster Developmentjtaby

Dnn connect dnnmobi-slidesashishpd

Angular js mobile jsday 2014 - Verona 14 mayLuciano Amodio

Building frameworks: from concept to completionRuben Goncalves

Cross platform engineering - Lessons Learned (Michael Asimakopoulos, Valadis ...GreeceJS

Google Chrome DevTools features overviewOleksii Prohonnyi

Cross platform mobile development with CoronaKMS Technology

Web valley talk - usability, visualization and mobile app developmentEamonn Maguire

Mining Product Opinions and Reviews on the WebFelipe Japm

3D in AndroidWen Jiun Yap

Front-End Engineering 101Milan Korsos

Building Web InterfacesChristian Heilmann

3stages Wdn08 V3Boris Mann

Selenium-based Visual Test AutomationApplitools

Similar a Debugging JS - Leverage the power of Browser Dev Tools (20)

The Ember.js Framework - Everything You Need To Know

Ruby in the Browser - RubyConf 2011

.NET Debugging Tips and Techniques

.Net Debugging Techniques

Алексей Ященко и Ярослав Волощук "False simplicity of front-end applications"

Java Tools and Techniques for Solving Tricky Problem

Tools and Techniques for Faster Development

Dnn connect dnnmobi-slides

Angular js mobile jsday 2014 - Verona 14 may

Building frameworks: from concept to completion

Cross platform engineering - Lessons Learned (Michael Asimakopoulos, Valadis ...

Google Chrome DevTools features overview

Cross platform mobile development with Corona

Web valley talk - usability, visualization and mobile app development

Mining Product Opinions and Reviews on the Web

3D in Android

Front-End Engineering 101

Building Web Interfaces

3stages Wdn08 V3

Selenium-based Visual Test Automation

Último

Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...apidays

Exploring the Future Potential of AI-Enabled Smartphone Processorsdebabhi2

Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Igalia

Breaking the Kubernetes Kill Chain: Host Path MountPuma Security, LLC

Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Drew Madelung

The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfEnterprise Knowledge

Scaling API-first – The story of a global engineering organizationRadu Cotescu

Real Time Object Detection Using Open CVKhem

Slack Application Development 101 Slidespraypatel2

The 7 Things I Know About Cyber Security After 25 Years | April 2024Rafal Los

How to Troubleshoot Apps for the Modern Connected WorkerThousandEyes

A Year of the Servo Reboot: Where Are We Now?Igalia

Tata AIG General Insurance Company - Insurer Innovation Award 2024The Digital Insurer

A Domino Admins Adventures (Engage 2024)Gabriella Davis

Driving Behavioral Change for Information Management through Data-Driven Gree...Enterprise Knowledge

08448380779 Call Girls In Greater Kailash - I Women Seeking MenDelhi Call girls

Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024The Digital Insurer

Histor y of HAM Radio presentation slidevu2urc

Finology Group – Insurtech Innovation Award 2024The Digital Insurer

Handwritten Text Recognition for manuscripts and early printed textsMaria Levchenko

Debugging JS - Leverage the power of 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

10.

11.

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

18.

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

Notas del editor

Why do people use ‘==‘ or ‘!=‘ . Lazy enough to add an extra ‘=‘ !!!And to add to the woes…someone minified the code in development environment. #doomsday

Debugging JS - Leverage the power of Browser Dev Tools

Recomendados

Recomendados

Más contenido relacionado

Similar a Debugging JS - Leverage the power of Browser Dev Tools

Similar a Debugging JS - Leverage the power of Browser Dev Tools (20)

Último

Último (20)

Debugging JS - Leverage the power of Browser Dev Tools

Notas del editor