#dddbne
@ArtemGovorov
@JetBrains
spy-js
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
piece of wisdom
demo
in a nutshelljavascript 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
Local
virtually no configuration required,
but more fragile
!
System
OS/browser configuration required,
but more reliable
proxy
instrumentor
code + regular expression =
syntax tree
instrumentorcode parsing
AST traversing
AST modification
code generation
prettifying
parallel processing
quiz #1Wrapping any loop statement into a block can not
break the loop code, true or false?
quiz #1Wrapping any loop statement into a block can not
break the loop code, true or false?
tracer
simple fast
cross-browser
tracer
fast, simple, cross-browser
tracer
app code
app code
event queueobjects dumper
timer
app code
back-end
quiz #2Each function expression or function declaration in
JavaScript must have “function” keyword, true or
false?
quiz #2Each function expression or function declaration in
JavaScript must have “function” keyword, true or
false?
back-end and UI
events tree
stack tree
code
processing and persisting trace !serving UI and tracer requests !infrastructure (sessions, proxy and instrumentor hosting)
quiz #3this 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
quiz #3this 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
quiz #3
javascript developer executes some scenario on the
page (or runs tests) and the tracer sends collected
runtime data to the back-end
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 opens web page via proxy
YES
future
nodejs, packaged javascript apps
!
collected runtime information analysis and presentation
!
advanced proxying
!
extensible instrumentation/code injection
whenWebStorm 8 EAP starts Jan 2014
!
visit spy-js.com to get a web UI based version today
questions
