I want to see what my code is doing

February 27, 2013 9:43 AM

I am taking an entry-level college class in programming. We are using Javascript "playground" that works within a web browser. I am a visual learner and the textbook and exercises are useless to me. We're only six weeks in and I'm in the weeds. Is there a tool that shows what exactly is happening at each step in the Javascript code?

I'm stuck at variables and we're now moving on. I'm afraid that if I don't "get" this, I will be left behind. Specifically, I have an issue with local and global variables and the difference between them. I see variables names being used in functions/modules that are not used elsewhere and it confuses me. I also don't get the passing of variables into functions/modules and how different things come out with different names. Is there a way (video/alternate language, etc.) to visually show what happens at each step?

Ideally, I would like to have two windows: one that shows the code and one that somehow illustrates what is happening in a friendly way, i.e. cute buckets holding the contents of variables and how they are passed around. I know there are programming languages for children. Would they have some relevance to someone learning Javascript?

posted by crosten to computers & internet (15 answers total)

It sounds like you might be describing something called a "debugger", which lets you execute one statement at a time and watch how the contents of the variables change. For Javascript, you might try Firebug.
posted by Mars Saxman at 9:56 AM on February 27

Learning a debugger is just going to add more complexity, and it's not going to be smart enough to be able to show you the internals in a way that is both accurate and easy to understand. I would say just go to the professor/a TA/a friend of yours who knows how to program, and have them walk through the exercise with you on a sheet of paper or whiteboard. Anyone who knows how to code should be able to walk you through what the computer is doing on each line of code and make any clarifications needed if you don't get some part of it.
posted by burnmp3s at 10:01 AM on February 27 [1 favorite]

There is something like what you're asking, but only for Python, as far as I've been able to tell: http://www.pythontutor.com/visualize.html. That could be worth a shot, especially if you're wanting to figure out the difference between local and global variables, and learn about variable scope in general. However, you might want to start at your TA -- that's what they're for!
posted by un petit cadeau at 10:06 AM on February 27 [7 favorites]

Depending on your environment, you can also put in "console.log(thevariable)" statements (or "dump").

To speak to your question on variable names and scopes...

In stock javascript, there are only two scopes GLOBAL and FUNCTION. Function variables are spelled as "var thevarname", and are only visible inside the function. This helps ensure ENCAPSULATION. That is, two functions can reuse a variable name (say, "i" for a loop counter, or 'data', or 'result') and not be affecting / clobbering each other.

Imagine if there was only one character named "Laura" allowed in the universe (GLOBAL!). Then every movie who kills off a Laura would be killing the universal Laura! Instead you have "Laura, in Little House on the Prairie". *Inside that book*, you can talk about Laura with impunity (she's scoped to the book), without calling her "Hello, Laura, from Little House".

Don't confuse names (which are like labels) with the data they contain.
posted by gregglind at 10:10 AM on February 27 [2 favorites]

Variable scoping in JavaScript is A) complicated and B) weird even compared to other languages, so don't feel too bad about not getting this right off the bat. But agreed with all the above: the tool you're asking for is a debugger, Firebug is the most convenient and easy to use for JS, and it may wind up confusing you more than it helps.

Talk to your TA: if "the textbook and examples are useless" to you, you're just going to get deeper and deeper in the weeds as the course goes along.
posted by ook at 10:12 AM on February 27 [2 favorites]

To continue gregglind's example with regards to variable renames.

Imagine you define (javascript not accurate here)

var beth = "string";
visitParents(beth)

function visitParents(elizabeth)
{
greetElizabeth();
}

beth and elizabeth both refer to the same things (the person named Elizabeth whose friends call her Beth) but they are just the name you are hanging on that thing in the moment.

In terms of visual learning, the in-browser tool will probably let you do that. What you need to do is break down the example into parts you understand and see what happens. Try to go out of the bounds of the assignment so instead of a -> b, but why. You try b -> c and that doesn't work. Why doesn't it work? etc.
posted by Wysawyg at 10:18 AM on February 27

The short answer is "no."

There are folks trying to make this better, at the moment a programmer must be able, at some point, to hold these abstractions in their head. Check out Inventing on Principle (a video) and Learnable Programming, more like an essay.

You are NOT ALONE! From Bret Victor's essay:

• Programming is a way of thinking, not a rote skill. Learning about "for" loops is not learning to program, any more than learning about pencils is learning to draw.
• People understand what they can see. If a programmer cannot see what a program is doing, she can't understand it.

That said, I imagine variables as like mail cubbyholes. When I give it a name, I have a variable. I can do:

var i;

And I have a cubbyhole that's named i.

If instead I did:

var x = 6

Then I have a cubbyhole that's named x and what's in it is the number 6.

As the program goes on, say I then do:

x = x * 6

Now my cubbyhole named x has the number 36 in it.

In complex programs the number of cubbyholes can get larger, but it's a start trying to understand things.

A function is a cubbyhole too, but it's also like a little engine. Typically, you put something in it, and you get something out of it. So if I have a function:

function timesBySix(n) {
 return n * 6;
}

So this cubbyhole has a name "timesBySix" and takes in another abstract cubbyhole thing called "n" ... and what it does is take whatever is put into it, calls it n, and does multiplication by 6 to it, and returns it.

As I type this I realize I may have already lost you, but hopefully some other smart AskMe person may have strategies for understanding variables and functions, or better yet, an existing essay or video that can attempt to explain or show how they work.
posted by artlung at 10:25 AM on February 27 [2 favorites]

Specifically, I have an issue with local and global variables and the difference between them. I see variables names being used in functions/modules that are not used elsewhere and it confuses me. I also don't get the passing of variables into functions/modules and how different things come out with different names.

I don't really have an answer to your question, but I can attempt to explain this. It can be confusing because JavaScript actually works quite differently from most other programming languages, so it can be confusing even to experienced coders.

JavaScript makes extensive use of a thing called "closures". What this essentially means is that if you reference a variable, the JavaScript parser (your web browser) will keep going "up" in the scope chain until it finds a matching variable name. This is pretty different from most languages, where each scope is separate. (A scope is a context that holds variables. For example, a function is a scope. Inside an object, "this" is also a scope.)

What is important to know about closures is that they inherit the scope they're defined in, not the scope they're used in. For example:

var A = "I am variable A, in the global scope.";
var alpha = function() {
 console.log(A); // "I am variable A, in the global scope."
}
var bravo = function() {
 var A = "I am variable A, defined in bravo().";
 var B = "I am variable B, defined in bravo().";
 var charlie = function() {
   console.log(A); // "I am variable A, defined in bravo()."
 }
 return charlie;
}
var delta = function() {
 var A = "I am variable A, defined in delta().";
 var B = bravo(); // returns the function charlie()
 B(); // execute charlie()
}

alpha(); // "I am variable A, in the global scope."
var myCharlie = bravo(); // returns the function charlie()
myCharlie(); // "I am variable A, defined in bravo()."

// the instance of charlie() executed in delta() gets variable A
// from its own closure scope, NOT delta()'s scope.
delta(); // "I am variable A, defined in bravo()."

This can be perplexing at first, but it is actually a very useful language feature. There is not really such thing as a "global" scope in JavaScript, there is only an outermost scope. The same variable name can exist in multiple scopes, so which value it assumes depends on the context where it's retrieved.

As far as visual editors, I know of none offhand (there's this one for Python, I imagine you want something similar for JavaScript). The Chrome JS debugger is quite good, and so is Firebug. I've learned a lot just typing JS code directly into the Chrome development console. With both you can also go through code step by step and look at the local scope as it changes.
posted by neckro23 at 10:30 AM on February 27 [3 favorites]

I also don't get the passing of variables into functions/modules and how different things come out with different names.

One thing that helps when thinking about variables is to think of them being like labeled envelopes. The envelope label is just to help you to keep track of the content and not get it mixed up with other envelopes. When you call a function with an argument, you are basically taking the content out of your envelope, and putting it in their envelope.
posted by burnmp3s at 10:30 AM on February 27

The Python tool linked above looks fantastic. Don't pass up that link just because it isn't JavaScript!

I agree that a debugger looks good on paper, but it will probably confuse you in practice.
posted by yaymukund at 10:31 AM on February 27

Don't feel bad for not getting this. Scoping is hard. I've been a professional programmer for over 5 years (and a hobbyist for a long time before that) and I make errors related to scoping all the time.

There's a lot of JavaScript training material out there (CodeAcademy comes to mind) and perhaps looking at a few other examples and lessons would help you understand what's going on. Sometimes one explanation clicks in way that others didn't.

This last bit isn't directly an answer, but Processing: Programming Handbook for Visual Designers and Artists is a really great book about programming targeted very explicitly at visual learners. It deals with the Processing language, rather than JavaScript, but a lot of programming concepts will carry over between the two, and it might help give you a different perspective on things.
posted by duien at 2:14 PM on February 27 [1 favorite]

How about the tutorials and examples at w3schools.com? Make changes to your code on the left, see the results on the right.
posted by MsMolly at 2:47 PM on February 27

Ideally, I would like to have two windows: one that shows the code and one that somehow illustrates what is happening in a friendly way, i.e. cute buckets holding the contents of variables and how they are passed around.

I don't know about cute buckets, but could you write something into the code yourself to display what's happening at each point? You could do this statement by statement, so you would only need to work out what each statement was doing by itself, without needing to know much more about the structure of the program.

I'm not at all familiar with Javascript, but if I was doing this in C (which I kind of know) I'd take some code like this:

a = call_function(a, b); // assume this is in a function somewhere

int call_function(int c, int d)
{
 int e = c + d;
 return e;
}

and annotate it like this:

fprintf(stdout, "Calling call_function(a = %i, b = %i)\n", a, b);
a = call_function(a, b);
fprintf(stdout, "a has been set to the return value of call_function(), which is %i\n", a);

int call_function(int c, int d)
{
 fprintf(stdout, "call_function(c, d) called: c = %i, d = %i\n", c, d);
 int e = c + d;
 fprintf(stdout, "New variable e (local to call_function()) declared!\n");
 fprintf(stdout, "e is now c (%i) + d (%i), which is %i\n", c, d, e);
 fprintf(stdout, "Now call_function is going to return the value of e, which is %i\n", e);
 return e;
}

Then you could run it and have the program tell you what it was doing itself. If a had been set to 1 and b to 2, the output might look like this:

Calling call_function(a = 1, b = 2)
call_function(c, d) called: c = 1, d = 2
New variable e (local to call_function()) declared!
e is now c (1) + d (2), which is 3
Now call_function is going to return the value of e, which is 3
a has been set to the return value of call_function(), which is 3

(apologies for using completely the wrong language, but hopefully the principle is apparent! From the above comments, it looks like console.log may be something you could use a bit like fprintf(stdout, ...))
posted by A Thousand Baited Hooks at 3:22 AM on February 28

I just came across this tool that seems like it could help: Slowmojs

Line-by-line, evaluation of your javascript, as you type, with statement-by-statement description of your variables.
posted by daveliepmann at 1:26 PM on March 9

There's a great online tool called Tributary which allows you to visualize your code in real time using D3. This is a great project and worth a look if you want to 'see' what your code is doing.
posted by quadog at 2:18 AM on May 11