Downloaded 11 times
Uploaded byFITC
Here Be Dragons – Advanced JavaScript Debugging
The document discusses various types of errors in JavaScript, such as loading, runtime, and logic errors, and highlights debugging tools like Node Inspector and Visual Studio Code for efficient debugging. It also covers techniques for remote debugging and provides resources and plugins for enhanced debugging capabilities. Additionally, practical commands for debugging Node applications in different operating systems are included.
More Related Content
Similar to Here Be Dragons – Advanced JavaScript Debugging
Here Be Dragons – Advanced JavaScript Debugging
- 1. Rami Sayar -@ramisayar Technical Evangelist Microsoft Canada
- 3. • Types ofErrors in JavaScript • Frequent Locations of Errors in JavaScript • Debugging and Introspection Tools • Remote Debugging Node Processes • Remote Debugging Front-End JavaScript
- 4. • Working knowledgeof JavaScript and Node. Note: Slides will be made available.
- 7. • Loading Errors •E.g. Incorrect syntax, minification errors, network-related errors, missing files, etc. • Runtime Errors • E.g. Syntax errors, misspelled variables, illegal assignment, variables/classes don’t exist, etc. • Logic Errors • E.g. BUGS! But also errors due to format and parameters (JSON vs XML), etc…
- 13.
- 14. • Using thiswrong an scoping errors • Accidentally creating memory leaks • Dangling references to unused objects • Circular references • Incorrect coercion, comparisons and equality • Incorrect references to instance objects & prototypical inheritance errors • So much more…
- 15. • Allow youto control execution and walk through line-by-line • Debug with breakpoints to conditionally stop execution • Examine the call stack • Pause on exceptions • Stack trace exceptions
- 16.
- 17. • Node Inspectorsupports almost all of the debugging features of the Blink DevTools, including: • Set breakpoints (and specify trigger conditions) • Step over, step in, step out, resume (continue) • Inspect scopes, variables, object properties • Edit variables and object properties • Break on exceptions • CPU and HEAP profiling • Network client requests inspection • Console output inspection
- 18. • Other coolstuff: • Node Inspector uses WebSockets, so no polling for breaks. • Remote debugging • Live edit of running code, optionally persisting changes back to the file- system. • Set breakpoints in files that are not loaded into V8 yet - useful for debugging module loading/initialization. • Embeddable in other applications
- 19. npm install -gnode-inspector node-debug app.js
- 20. It’s free andruns on Linux/OSX/Windows. There’s also WebStorm and Eclipse.
- 23. Debugging node applicationsis easy if you know you want to debug… It gets harder when you want to connect to already-running production applications…
- 24. On OSX/Linux… $ pgrep-l node 2345 node your/node/server.js $ kill -s USR1 2345 On Windows… > tasklist /FI “IMAGENAME eq node.exe” > node -e “process._debugProcess(3084)”
- 25. • With built-innode debugger: $ node debug localhost:5858 • With node-inspector: $ node-inspector • With Visual Studio Code • Use Attach launch setting, debug…
- 27. Who hasn’t heardthat one or a variant before?
- 28. Wait… what! Youcan do that?
- 30. • An opensource, extensible, platform-agnostic tool for remotely debugging and testing your JavaScript. • Plugins: • Console: View logs and errors for your application. • Modernizr: View a list of supported and unsupported features. • DOM Explorer: Inspect the DOM tree and its corresponding styles. • Object Explorer: Display the living JavaScript variables tree. • XHR Panel: View XHR calls information sent by your devices. • ngInspector: Inspect your Angular.js scopes • Network Monitor: View network activities (XHR & resources loading). • Resources Explorer: Inspect local resources such as localStorage or cookoes.
- 31. $ npm i-g vorlon $ vorlon Add to your code. <script src="http://localhost:1337/vorlon.js"></script> Open http://localhost:1337
- 32. • Deploy Vorlon.JSto a public server/PaaS/wtv. • As simple as a git push • Add this to your public beta website: <script src="http://mywebsite.com/vorlon.js"></script>
- 33. Note: Don’t dothis in production with SSL and authentication setup. Better yet, only do this in staging/beta.
- 34. Vantage = CLI+ SSH + REPL for your live node app
- 36. • Types ofErrors & Locations in JavaScript • Debugging and Introspection Tools • node-inspector • VS Code • Remote Debugging Node Processes • node-inspector, VS Code • Vantage • Remote Debugging Front-End JavaScript • Vorlon.JS
- 38. tw: @ramisayar |gh: @sayar slideshare.net/ramisayar
- 39. • http://www.toptal.com/javascript/10-most-common-javascript- mistakes • https://developers.google.com/web/tools/javascript/breakpoints/ •http://www.w3schools.com/js/js_debugging.asp • http://www.webreference.com/programming/javascript/rg31/index.h tml • http://eloquentjavascript.net/08_error.html • http://www.pluralsight.com/courses/fixing-common-javascript-bugs • https://trackjs.com/ • http://www.standardista.com/javascript/15-common-javascript- gotchas/
- 40. ©2013 Microsoft Corporation.All rights reserved. Microsoft, Windows, Office, Azure, System Center, Dynamics and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.