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.

1. spy-js
#dddbne
@ArtemGovorov
@JetBrains

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?

11. tracer
cross-browser
simple
fast

12. tracer
fast, simple, cross-browser

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