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