Javascript class chaining map library - javascript

I work in a project with many modules implemented in 5-6 different JavaScript files.
Function 1 callback function 2 which callback function 3 etc...
Is there a library or software that can parse all the js files, and draw a mindmap of all callbacks ?
Thanks in advance

Not that I know of. I don't think you'll be able to know until runtime. You could then use a javascript console to look at the stack.
console.trace() should be useful
http://getfirebug.com/wiki/index.php/Console_API#console.trace.28.29

I found 2 tools that build UML diagrams from JS code:
http://jsuml.org/
and
http://code.google.com/p/jsuml2/
this might create the things you want.
You can get just get a stack trace that could ease debugging if this is the main goal of your search, you can get it here:
http://stacktracejs.com/
and another simple one here:
http://eriwen.com/javascript/js-stack-trace/
You could also use this Webkit that has functionality providing stack traces:
http://www.webkit.org/blog/1544/web-inspector-understanding-stack-traces/

Related

Is there a way to get signature/documentation of a function in Node REPL?

"Tab"ing the REPL gives me a list of functions, but often working with multiple languages, I forget the signature of common functions like fs.open, etc. Is there anyway to show these in the REPL?
Thanks to auto-complete in editors, they seem to be fine. But REPL for writing some quick script, I have pull up the node documentation each time for simple things.
Is there a better way to deal with this?
This semi official project developed under the node umbrella on GitHub offers a few improvement over the default REPL while used interactively:
https://github.com/nodejs/repl
Syntax highlighting is enabled for the input, basic functions signatures are displayed as hints.
As stated in this issue, its future is still uncertain, but it's already quite usable in the current state: https://github.com/nodejs/repl/issues/46

Visual representation of classes and/or objects

recently I started to work on some big project written in php/js.
It is really big and I have constant problem of backtracing what functions are called where.
Is there any tool, that would import all the code files and draw/write connections between classes, objects, functions and such?
Regards
BOUML can create UML diagrams out of your code
http://www.bouml.fr/
old 4.23 version is also free if that is needed
http://download.cnet.com/BOUML/3000-2094_4-10788888.html
I am using Intellij IDEA with the PHP Storm Plugin for my PHP/JS-Projects. There I'm able to right click a function and choose "Find Usage ALT+F7". Now I can see, where this function is getting called.
Intellij IDEA/PHP-Storm is also able to generate UML-Diagrams if needed.
I guess Netbeans, Eclipse+PHP-Plugin do have similar functions [maybe execpt of the uml-generator], if you need an IDE at no costs.

How do I add my own JavaScript libs to ClojureScript?

I want to write a Google Chrome extension, using ClojureScript. With ClojureScript I can use all the Google Closure libs, but afaik access to the Chrome browser is not included in those libs. So I want to wrap all the Chrome stuff in my own JavaScript lib.
So far I tried creating my own jar that has a single JavaScript file that just creates a Foo object and exports the constructor. I'v added this jar to the lib directory of the ClojureScript compiler (which also has for example goog.jar), but so far without luck:
Exception in thread "main" java.lang.IllegalArgumentException: No implementation of method: :-compile of protocol: #'cljs.closure/Compilable found for class: nil
at clojure.core$_cache_protocol_fn.invoke(core_deftype.clj:494)
at cljs.closure$eval1056$fn__1057$G__1047__1064.invoke(closure.clj:187)
at cljs.closure$get_compiled_cljs.invoke(closure.clj:422)
at cljs.closure$cljs_dependencies.invoke(closure.clj:440)
at cljs.closure$add_dependencies.doInvoke(closure.clj:462)
at clojure.lang.RestFn.applyTo(RestFn.java:139)
at clojure.core$apply.invoke(core.clj:602)
at cljs.closure$build.invoke(closure.clj:701)
at user$eval1246.invoke(cljsc.clj:21)
at clojure.lang.Compiler.eval(Compiler.java:6406)
at clojure.lang.Compiler.load(Compiler.java:6843)
at clojure.lang.Compiler.loadFile(Compiler.java:6804)
at clojure.main$load_script.invoke(main.clj:282)
at clojure.main$script_opt.invoke(main.clj:342)
at clojure.main$main.doInvoke(main.clj:426)
at clojure.lang.RestFn.invoke(RestFn.java:421)
at clojure.lang.Var.invoke(Var.java:405)
at clojure.lang.AFn.applyToHelper(AFn.java:163)
at clojure.lang.Var.applyTo(Var.java:518)
at clojure.main.main(main.java:37)
Has anyone tried this before?
Take a look at this post from Luke Vanderhart: "Using JavaScript libraries in ClojureScript"
http://lukevanderhart.com/2011/09/30/using-javascript-and-clojurescript.html
Also, this video from Kevin Lynagh: "Extending JavaScript Libraries from ClojureScript"
http://www.youtube.com/watch?v=XfzXFWTT-z0
If I remember Rich Hickeys talk correctly the whole program optimization of the closure compiler needs any library code to adhere to certain coding conventions. I think he also said something of JQuery not doing this but Dojo doing this. I never did this but you might find some useful information here

Are there any static Call-Graph and/or Control-Flow-Graph API for JavaScript? [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 6 years ago.
Improve this question
Are there any Call-Graph and/or Control-Flow-Graph generators for JavaScript?
Call Graph - http://en.wikipedia.org/wiki/Call_graph
Control Flow Graph - http://en.wikipedia.org/wiki/Control_flow_graph
EDIT: I am looking specifically for a static tool that let me access the graph using some API/code
To do this, you need:
parsing,
name resolution (handling scoping)
type analysis (while JavaScript is arguably "dynamically typed", there are all kinds of typed constants including function constants that are of specific interest here)
control flow analysis (to build up the structure of the control flow graphs within methods)
data flow analysis (to track where those types are generated/used)
what amounts to global points-to analysis (to track function constants passed between functions as values to a point of application).
How to do it is pretty well documented in the compiler literature. However, implementing this matter of considerable sweat, so answers of the form of "you can use a parser result to get what you want" rather miss the point.
If you could apply all this machinery, what you'll get as a practical result is a conservative answer, e.g., "A may call B". This is all you know anyway, consider
void A(int x,y) { if (x>y) foo.B(); }
Because a tool sometime simply can't reason about complex logic, you may get "A may call B" even when the application designer knows it isn't possible:
void A(int x) // programmer asserts x<4
{ if (x>5) foo.B(); }
eval makes the problem worse, because you need to track string value results that arrive at eval commands and parse them to get some kind of clue as to what code is being evaled, and which functions that eval'd code might call. Things get really nasty if somebody passes "eval" in a string to eval :-{ You also likely need to model the program execution context; I suspect there are lots of browser APIs that include callbacks.
If somebody offers you tool that has all the necessary machinery completely configured to solve your problem out of the box, that would obviously be great. My suspicion is you won't get such an offer, because such a tool doesn't exist. The reason is all that infrastructure needed; its hard to build and hardly anybody can justify it for just one tool. Even an "optimizing JavaScript compiler" if you can find one likely won't have all this machinery, especially the global analysis, and what it does have is unlikely to be packaged in a form designed for easy consumption for your purpose.
I've been beating my head on this problem since I started programming in 1969 (some of my programs back then were compilers and I wanted all this stuff). The only way to get this is to amortize the cost of all this machinery across lots of tools.
My company offers the DMS Software Reengineering Toolkit, a package of generic compiler analysis and transformation machinery, with a variety of industrial strength computer langauge front-ends (including C, C++, COBOL and yes, JavaScript). DMS offers APIs to enable custom tools to be constructed on its generic foundations.
The generic machinery listed at the top of the message is all present in DMS, including control flow graph and data flow analysis available through a clean documented API. That flow analysis has to be tied to specific language front ends. That takes some work too, and so we haven't done it for all languages yet. We have done this for C [tested on systems of 18,000 compilation units as a monolith, including computing the call graph for the 250,000 functions present, including indirect function calls!], COBOL and Java and we're working on C++.
DMS has the same "JavaScript" parser answer as other answers in this thread, and viewed from just that perspective DMS isn't any better than the other answers that say "build it on top of a parser". The distinction should be clear: the machinery is already present in DMS, so the work is not one of implement the machinery and tying to the parser; it is just tying it to the parser. This is still a bit of work, but a hell of a lot less than if you just start with a parser.
In general it isn't possible to do this. The reason is that functions are first-class and dynamically typed, so for example:
var xs = some_function();
var each = another_function();
xs.map(each);
There are two unknowns. One is the version of 'map' that is called (since Javascript polymorphism can't be resolved statically in the general case), and the other is the value assigned to 'each', which also can't be statically resolved. The only static properties this code has are that some 'map' method is called on some function we got from 'another_function'.
If, however, that is enough information, there are two resources that might be helpful. One is a general-purpose Javascript parser, especially built using parser combinators (Chris Double's jsparse is a good one). This will let you annotate the parse tree as it is being constructed, and you can add a custom rule to invocation nodes to record graph edges.
The other tool that you might find useful (shameless plug) is a Javascript-to-Javascript compiler I wrote called Caterwaul. It lets you do pattern-matching against syntax trees and knows how to walk over them, which might be useful in your case. It could also help if you wanted to build a dynamic trace from short-term execution (probably your best bet if you want an accurate and detailed result).
WALA is an open-source program analysis framework that can build static call graphs and control-flow graphs for JavaScript:
http://wala.sourceforge.net/wiki/index.php/Main_Page
One caveat is that the call graphs may be missing some edges in the presence of eval, with, and other hard-to-analyze constructs. Also, we're still working on scalability; WALA can't yet analyze jquery in a reasonable amount of time, but some other frameworks can be analyzed. Also, our documentation for building JavaScript call graphs isn't great at the moment (improving it is on my TODO list).
We're actively working on this code, so if you try it and run into issues, you can email the WALA mailing list (https://lists.sourceforge.net/lists/listinfo/wala-wala) or contact me.
I think http://doctorjs.org/ may fit your needs. It has a nice JSON API, is available on github, backed up by mozilla. It's written in JS itself and generally does stuff pretty well (including dealing with polymorphism etc).
Here are a few solutions I can see:
Use Aptana Call Graph view
Aptana is an IDE based on Eclipse that permit you edit and debugging Javascript code.
Use Dynatrace
Dynatrace is a useful tool that let you live trace your code and see the call graph and hot spots.
Use Firebug
The famous developer addon on Firefox
Most of the call graphs generated here will be dynamic, ie you'll see the call graph for a given set of actions. If you're looking for static call graphs check Aptana first. Static call graphs may not let you see dynamic calls (code running through eval()).
For a js approach, check out arguments.callee.caller. It gives you the function that called the function you are in and you can recurse up the call stack. There is an example in this thread http://bytes.com/topic/javascript/answers/470251-recursive-functions-arguments-callee-caller.
Be aware that this may not work in all browsers and you may run in to some unexpected things when you get to the top of the "call stack" or native functions so use at your own risk.
My own example works in IE9 and Chrome 10 (didn't test any other browsers).
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body onload="Function1()">
<form id="form1" runat="server">
<div>
</div>
</form>
</body>
<script type="text/javascript">
function Function1()
{
Function2();
}
function Function2()
{
Function3();
}
function Function3()
{
Function4();
}
function Function4()
{
var caller = arguments.callee.caller;
var stack = [];
while (caller != null)
{
stack.push(caller);//this is the text of the function. You can probably write some code to parse out the name and parameters.
var args = caller.arguments; //this is the arguments for that function. You can get the actual values here and do something with them if you want.
caller = caller.caller;
}
alert(stack);
}
</script>
</html>
The closest thing you can get to a Call Graph is manipulating a full Javascript AST. This is possible with Rhino, take a look at this article: http://tagneto.blogspot.com/2010/03/requirejs-kicking-some-ast.html
Example from the post:
//Set up shortcut to long Java package name,
//and create a Compiler instance.
var jscomp = Packages.com.google.javascript.jscomp,
compiler = new jscomp.Compiler(),
//The parse method returns an AST.
//astRoot is a kind of Node for the AST.
//Comments are not present as nodes in the AST.
astRoot = compiler.parse(jsSourceFile),
node = astRoot.getChildAtIndex(0);
//Use Node methods to get child nodes, and their types.
if (node.getChildAtIndex(1).getFirstChild().getType() === CALL) {
//Convert this call node and its children to JS source.
//This generated source does not have comments and
//may not be space-formatted exactly the same as the input
//source
var codeBuilder = new jscomp.Compiler.CodeBuilder();
compiler.toSource(codeBuilder, 1, node);
//Return the JavaScript source.
//Need to use String() to convert the Java String
//to a JavaScript String.
return String(codeBuilder.toString());
}
In either Javascript or Java, you could walk the AST to build whatever type of call graph or dependency chain you'd like.
Not related directly to NodeJS, but generally to JavaScript, SAP has released a Web IDE related to HANA (but also accessible freely from the HANA Cloud - see more details here http://scn.sap.com/community/developer-center/cloud-platform/blog/2014/04/15/sap-hana-web-ide-online-tutorial).
In this Web IDE, there is a REST-based service that analyzes JavaScript content with primary focus (but not only) on creating a Call Graph. There are many consumers of that service, like Code Navigation.
Some more information here (see the Function Flow part):
http://scn.sap.com/community/developer-center/hana/blog/2014/12/02/sap-hana-sps-09-new-developer-features-sap-hana-web-based-development-workbench
Note: I am the main developer of this service.

JavaScript code completition done right?

I've tried some of the editors/IDEs regularly recommended for coding JavaScript (Aptana, WebStorm, ...) but none of them has a satisfying autocomplete functionality. I'm probably spoiled by Microsoft's IntelliSense for .NET. There is some JavaScript-IntelliSense in WebDeveloper, but that seems to be a stripped-down version. The best I've found so far is WebStorm, but its code completition is easily distracted by imported libraries (offering hundreds of suggestions) and identical function names.
Did I miss an editor/IDE that uses refactoring (or something else) to offer proper code completition, so that it really "knowns" what that variable-name stands for, I just put a dot behind? Or is something like this on its way?
I always recommend Komodo Edit from ActiveState (now up to version 6, with support for HTML 5 and CSS3 as well as recent versions of Javascript, PHP, etc.) Note that you may have to install addons for the languages you're working in, but you should find them through the Mozilla-like Addon manager.
Also supports jQuery and even lets you use jQuery (along with vanilla Javascript or Python) in its powerful macro IDE.
Code completion example:
<script type="application/x-javascript">
var obj = {};
obj.personnel = [{firstName:"John", lastName:"Brick", age:43},
{firstName:"Jane", lastName:"Motte", age:26}
];
// now type obj. and code completion immediately offers you "personnel"
// note: file must be saved for the app to find all members of declared
// variables, but I save about every 10 seconds so it's not a problem
</script>
The best I've found so far is
WebStorm, but its code completition is
easily distracted by imported
libraries (offering hundreds of
suggestions) and identical function
names.
This comment confuses me. If you import the libraries, and your code is using them, why is it bad to include the function names in the code completion suggestions? Wouldn't you want to have jQuery's functions included if you're using it?
If you're using Microsoft's IntelliSense with jQuery, does it stick to its guns and only show JavaScript core functions? Sounds limited to me, unable to be smart when I add libraries.
Or is something like this on it's [sic] way?
It sounds to me like you want a clairvoyant interface. I don't think it is on the way anytime soon.
By the way, "it's" == "it is"; "its" is the possessive.

Categories

Resources