JavaScript tracing, debugging, profiling made simple with spy-js
•
2 likes•4,095 views
This document summarizes the spy-js tool for debugging JavaScript applications. It works by injecting tracing code into JavaScript files using a proxy. This collects runtime data and sends it to a backend. The backend then notifies IDEs like WebStorm, allowing developers to debug JavaScript by viewing call stacks and event timelines. It aims to provide a simple, fast, and cross-browser way to debug JavaScript without much configuration required.
Report
Share
JavaScript tracing, debugging, profiling made simple with spy-js
- 3. piece of wisdom the philosophy of JavaScript (to the extent that it has any philosophy) is that you should not be able to observe what is going on
- 4. demo
- 5. in a nutshell javascript developer opens a web page via smart proxy ! the proxy injects some special code into each script of the page ! the script code executes and sends runtime data back to the proxy ! IDE gets notified when new event data is available and can request full call stack typical JS dev
- 6. proxy Local virtually no configuration required, but more fragile ! System OS/browser configuration required, but more reliable
- 7. instrumentor code + regular expression = syntax tree
- 8. instrumentor code parsing AST traversing AST modification code generation prettifying parallel processing
- 9. quiz #1 Wrapping any loop statement into a block can not break the loop code, true or false?
- 10. quiz #1 Wrapping any loop statement into a block can not break the loop code, true or false?
- 13. tracer app code objects dumper event queue app code timer app code back-end
- 14. quiz #2 Each function expression or function declaration in JavaScript must have “function” keyword, true or false?
- 15. quiz #2 Each function expression or function declaration in JavaScript must have “function” keyword, true or false?
- 16. back-end and UI processing and persisting trace ! serving UI and tracer requests events tree ! stack tree infrastructure (sessions, proxy and instrumentor hosting) code
- 17. quiz #3 this is how spy-js works: my web page is parsed into some tree using horse.js framework and then the awesome cat on the unicorn sends my data to the WebStorm
- 18. quiz #3 this is how spy-js works: my web page is parsed into some tree using horse.js framework and then the awesome cat on the unicorn sends my data to the WebStorm NO
- 19. quiz #3 javascript developer opens web page via proxy the back-end proxy modifies requested javascript files using instrumentor the instrumentor changes the page code to collect runtime data and injects tracer code javascript developer executes some scenario on the page (or runs tests) and the tracer sends collected runtime data to the back-end YES
- 20. future nodejs, packaged javascript apps ! collected runtime information analysis and presentation ! advanced proxying ! extensible instrumentation/code injection
- 21. when WebStorm 8 EAP starts Jan 2014 ! visit spy-js.com to get a web UI based version today
- 22. questions