Beta

×

Welcome to the Slashdot Beta site -- learn more here. Use the link in the footer or click here to return to the Classic version of Slashdot.

Thank you!

Before you choose to head back to the Classic look of the site, we'd appreciate it if you share your thoughts on the Beta; your feedback is what drives our ongoing development.

Beta is different and we value you taking the time to try it out. Please take a look at the changes we've made in Beta and  learn more about it. Thanks for reading, and for making the site better!

Debug.js: A JavaScript VM and In-Browser Debugger In Pure JS Generators

Soulskill posted about 7 months ago | from the building-upon-building-things-to-build-things dept.

Programming 34

New submitter amasad writes "This post describes building a JavaScript virtual machine and an in-browser stepping debugger using the latest JavaScript generator feature. It's called debug.js. 'For the past few years I’ve been working on creating tools to help people learn programming on the web. I’ve worked on repl.it and open sourced the underlying technology which powered a few learn to code websites and until recently lead product engineering at Codecademy. Through all that, one thing I really wanted to see are the tools to make it possible to visualize code execution and step through code in the browser. To catch glimpse of what an ideal interactive learning environment would be you should check out Learnable Programming by Bret Victor. In addition to the educational benefits of such a tool, if matured it could be also useful for code instrumentation, web IDEs, and creating a foundation for writing other VMs on top of JavaScript (having the pausable machine state let's you not worry about the non-blocking environment). Ever since I've read about the ES6 Generators proposal, I’ve been toying with this idea in my head but it wasn't a real possibility until Ben Newman's Regenerator brought generators to the browser.'"

cancel ×

34 comments

Sorry! There are no comments related to the filter you selected.

man I wish (0)

BringsApples (3418089) | about 7 months ago | (#45894757)

Man I wish every web page had a font like those sites linked in the summary (well, all but http://debugjs.com/ [debugjs.com] which appears to be an invalid link). Maybe it's an attempt to lure in old fogies like myself, who can't see worth a shit. Alas, I know nothing about java, and couldn't care less.
But, nice font kid!

Re: man I wish (0)

binarylarry (1338699) | about 7 months ago | (#45894823)

Don't worry gramps, this has to be the dumbest article I've read here in a while.

Re: man I wish (0)

HBI (604924) | about 7 months ago | (#45894891)

This is pretty stupid. This has no relation to actual multithreaded execution, but the author pretends like it does. Perhaps the sites are hosted from Colorado?

Re: man I wish (0)

amasad (2545004) | about 7 months ago | (#45895141)

How am I pretending like it has anything to do with threads? The browser and most JavaScript environments are single threaded and event based

Re: man I wish (2)

ArsenneLupin (766289) | about 7 months ago | (#45896539)

Maybe they're thinking of cooperative multitasking? Calling yield() explicitely to let the other "threads" run?

Re: man I wish (0)

Anonymous Coward | about 7 months ago | (#45894995)

Don't worry gramps, this has to be the dumbest article I've read here in a while.

It's not an article, it's an advertisement disguised as a news story.

Re: man I wish (0)

amasad (2545004) | about 7 months ago | (#45895227)

You caught me! I'm advertising my free and open source projects to get rich. You must very smart :)

Re: man I wish (1)

narcc (412956) | about 7 months ago | (#45895603)

You caught me! I'm advertising my free and open source projects

Yeah, we already puzzled that out. It wasn't exactly difficult.

to get rich.

WTF? Where did you come up with that?

You must very smart

Snappy comeback. That AC will surely think twice before stating the obvious in the future!

Look, I'm sorry that your project isn't getting the attention or praise that you had hoped it would garner. It happens. Try not to let this depressingly empty thread discourage you. Just keep making new stuff and you're bound to hit on a project that gets a lot of attention.

Re: man I wish (1)

amasad (2545004) | about 7 months ago | (#45896589)

Thanks for the encouragement buddy but I already did that a few times in fact. Go to my site and see my other projects. However, the pint here is it's technical post.

Re: man I wish (0)

Anonymous Coward | about 7 months ago | (#45895345)

What's the difference for any vaguely newish tool, software, or technology? Either could be informative, and either can be completely fluff, and in the case of the latter, you could complain about that directly instead of trying to argue about hidden intentions of a write up. Regardless of the intentions, it either sucks or doesn't.

Re: man I wish (1)

amasad (2545004) | about 7 months ago | (#45895121)

You don't understand it, so you call it dumb. Classy!

Re: man I wish (0)

Anonymous Coward | about 7 months ago | (#45895565)

You didn't understand his comment so you called it classy. Classy!

Re: man I wish (0)

amasad (2545004) | about 7 months ago | (#45896615)

Wow, so many trolls

Re: man I wish (1)

dreamchaser (49529) | about 7 months ago | (#45897147)

If you can't take criticism then don't post. You can agree or disagree but simply labeling anyone who criticizes your work as a troll is fairly childish.

Re: man I wish (0)

amasad (2545004) | about 7 months ago | (#45897533)

It's fine criticize away! See other comments I replied to saying something intelligible. Dumb is not criticism, it's a personal attack and very trollish

Re:man I wish (1)

shortscruffydave (638529) | about 7 months ago | (#45896813)

I know nothing about java,

This is about JavaScript, so that shouldn't be an issue then....

FORTH! (2)

Giant Electronic Bra (1229876) | about 7 months ago | (#45894905)

JS is nice, but have you ever tried using something like FIG FORTH as a teaching tool? This is some very elegant and simple software with which very powerful things can be done. It certainly is a good intro to the topic of virtual machines, interpretation, binding, and different forms of optimization. An actual debugger is moderately irrelevant, you can interactively step through code. I've had very good luck with this tool.

Re: FORTH! (1)

amasad (2545004) | about 7 months ago | (#45895155)

There many languages that could be much better for teaching than JavaScript, however building things and publishing on the web is a big sell for people learning

Re: FORTH! (2)

Giant Electronic Bra (1229876) | about 7 months ago | (#45896889)

Yeah, I can't really disagree with that. FORTH is perfectly usable, but its not widely employed. I can understand why JavaScript is attractive. Honestly though, I think JavaScript is a terrible language to learn with, and its sad that using something so complex prevents the student from understanding the tool.

Re:FORTH! (1)

Darinbob (1142669) | about 7 months ago | (#45895415)

I dont' know what it is about Javascript, but so many feel compelled to tell Slashdot about their latest programs. Is this new and interesting? No, plenty of languages are able to do the same thing (VMs and debuggers for C written in C, whoohoo!). Is Javascript so complicated that doing these features are a major news item?

Or is this just a replay of the Usenet days when people would post their newest program?

Re:FORTH! (1)

Giant Electronic Bra (1229876) | about 7 months ago | (#45896903)

I think its like other posters have said, the attraction is that you need nothing more than a browser and a text editor to get started with it, and you can see some fairly flashy results quite quickly. You could get flashy results with something like say COLOR FORTH too, but you would have to acquire the software and its not as easy to find an abundance of documentation.

Re:No Brainfuck (1)

Billly Gates (198444) | about 7 months ago | (#45895489)

Now this [wikipedia.org] is a much cleaner and easier to teach.

Re:No Brainfuck (1)

Giant Electronic Bra (1229876) | about 7 months ago | (#45896907)

LOL, yeah, you can write it in FORTH in maybe 5 minutes ;)

GO! FORTH! (3, Interesting)

VortexCortex (1117377) | about 7 months ago | (#45895859)

Yep! I taught my 10 year old niece x86 assembly first. Once she got the hang of some loops, character I.O., and some basic math I started her on FORTH. Immediately after grasping the power of higher level code over machine instructions she was hounding me about "But how does the code turn into the machine code?!" I helped her build a simple toy calculator language / interpretor / and compiler at age 11 then, and by 12 she had her very own FORTH implementation. Thankfully the knowledge took root before she noticed boys and geeking out with her uncle became uncool; Now she's 14 and knows enough to teach herself anything -- She uses JS/HTML5 and C to impress her friends with little games and such. FORTH is a good stepping stone. I prefer to start with the basics though. My nephew was a bit older when he got interested so we went the LISP route after ASM. Have you seen the complexity of some of the games they master? Kids can be so damn smart when you don't baby them.

I've also successfully used Java VM bytecode as a good intro to computing, but its stack centric design doesn't do justice to the underlying hardware. Android's Davlik's register architecture is similar to my own VM designs, and I find it a joy to manually op-code for, so perhaps I'll give a FORTH implementation on Android bytecode a shot as a teaching aid next time now that you can run Android on your desktop, and kids are very interested in mobiles. I've played around a bit with Go since it's a new-ish language and hasn't yet got the feature creep of C++, but in terms of teaching at the application / debugger level I still prefer C. Indirection (pointers) is such a powerful and fundamental concept it eclipses the references other languages have, and both C and ASM get right down to business. JavaScript is good as a case study in how not to design a language (it was never meant to be used the way we do, the clue is in its name). It's useful because it's available, not due to any merit of the language itself -- otherwise ASM.js wouldn't need to exist.

Most people wrongly think ill of ASM coding as a teaching tool. However, starting out in any higher level language doesn't even begin to dispel the mystical black box of computing like assembly code does. I self learned on BASIC and suffered from that brain damage far longer than I should have. I wouldn't start someone on JavaScript for the same reason.

Re:GO! FORTH! (1)

narcc (412956) | about 7 months ago | (#45896013)

I started her on FORTH. Immediately after grasping the power of higher level code over machine instructions she was hounding me about "But how does the code turn into the machine code?!" I helped her build a simple toy calculator language / interpretor / and compiler

At first I thought "Cool story, bro..." and then I saw...

I've also successfully used Java VM bytecode as a good intro to computing, but its stack centric design doesn't do justice to the underlying hardware

So then I was all like "Not familiar with FORTH, are you?"

But I kept on going and then I read...

I self learned on BASIC and suffered from that brain damage far longer than I should have. I wouldn't start someone on JavaScript for the same reason.

And now I know that you're just laughably incompetent. So I'm back to my first thought...

"Cool story, bro"

Re:GO! FORTH! (0)

Anonymous Coward | about 7 months ago | (#45896601)

He's a narcissistic, compulsive liar, and his real name is Tim Landers. Check out his comment history. This [slashdot.org] is one of my all-time favorites.

Re:GO! FORTH! (1)

Giant Electronic Bra (1229876) | about 7 months ago | (#45897153)

Indeed, learning assembly language is a real good start. I got my first real understanding of computers by learning PACE machine code. My uncle gave me an S-100 based typesetting workstation he scavenged parts for. I learned by reading the PACE manual (helpfully supplied) and learning about how a computer bootstraps, how the disk drive worked, and most important how the CPU actually works at a low level. I never did get that machine to do a whole lot, but 6 months of wrestling with machine language will really make a good understanding.

What I like about FORTH is its underlying simplicity and elegance. The entire language and all its features are contained in a few 1000 lines of code, and all of it is accessible for experimentation using the outer interpreter. Because the language and the stack machine/inner interpreter are highly exposed in FORTH code it is both easy and necessary for a student to understand how the thing works at a pretty low level. Yet at the same time you can construct powerful domain-specific languages and applications. Certainly powerful enough to satisfy any beginning programmer (and frankly there are plenty of spacecraft, aircraft, and many other systems around that are built using FORTH, its not a toy).

I think its sad that the language and the philosophy of simplicity and transparency of technology has gone out of style. IMHO starting out software engineers on FORTH would be a great boon to the industry. They will go on to other things, but the lesson of simplicity and elegance of design is never lost.

Re:GO! FORTH! (0)

Anonymous Coward | about 7 months ago | (#45897967)

I taught my 10 year old niece to suck my cock, now she's taking it to the balls.

Dennis Rodman here (-1)

Anonymous Coward | about 7 months ago | (#45894973)

I am Viginia Baked Ham in purple geese let on a summer porch in Santa's village at camp redcloud north of the 4077th to be brought to you by the number 10 about politics if you understand what Kevin Bae did and why, why, I would love to speak on this you know, you got 10 guys here who left their families and do you understand that I don't give a shit or rat's ass . . . we came here I got it let me do this . . . Imgonnado one thing we are going back to America and take the abuse and guess what Joe one day one day the doors will open because of the 10 of us.

cps (0)

Anonymous Coward | about 7 months ago | (#45895009)

tfa mentions the parallels to cps. if he had just cut to the chase it would have been a more regular and
useful transform

Skeleton Project (1)

Anonymous Coward | about 7 months ago | (#45895199)

It looks like a skeleton project. I can't get it to do anything, and looking through the code it all looks like skeleton and boiler plate code.

Presumably the guy will use generators to support break points. The problem here is that generators don't allow yielding across function invocations. That is, in A -> B -> C, C cannot yield directly to A; only B can yield to A. To get C to yield to A you need to add a trampoline in-between, to bubble the yield up. Generators are a half measure in 2014--ideally you want coroutines with independent stacks, like in Lua. But implementing coroutines with independent stacks would requite massive refactoring of existing JavaScript engines, which will never happen.

What this guy will have to do to get a full-blown debugger is parse the code into an AST, and programmatically insert yield statements between every single statement, and integrate a trampoline at every function call. That's likely going to make the code so slow as to make it utterly useless. Debuggers tend to slow things down; now imagine _simulating_ everything a debugger has to do.

Re: Skeleton Project (1, Interesting)

amasad (2545004) | about 7 months ago | (#45895253)

I already did exactly what you said :) read the full article and look at the source code. I insert a yield before every statement and have a machine that controls the call stack. Also the debugger is feature complete ;)

Pretty Cool, Mate. (0)

Anonymous Coward | about 7 months ago | (#45895813)

I think it's a great tool for learning. Keep up the good work.

Meh. (1)

Minwee (522556) | about 7 months ago | (#45898881)

Real Programmers(tm) wouldn't use this for debugging. You should be using Fuckit.js [github.com] to really work out the bugs in your code.
Check for New Comments
Slashdot Login

Need an Account?

Forgot your password?
or Connect with...

Don't worry, we never post anything without your permission.

Submission Text Formatting Tips

We support a small subset of HTML, namely these tags:

  • b
  • i
  • p
  • br
  • a
  • ol
  • ul
  • li
  • dl
  • dt
  • dd
  • em
  • strong
  • tt
  • blockquote
  • div
  • quote
  • ecode

"ecode" can be used for code snippets, for example:

<ecode>    while(1) { do_something(); } </ecode>