#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