Debug.js: A JavaScript VM and In-Browser Debugger In Pure JS Generators
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.'"
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.
"Malo periculosam, libertatem quam quietam servitutem." -- Jefferson
You don't understand it, so you call it dumb. Classy!
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.
Now this is a much cleaner and easier to teach.
http://saveie6.com/
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.
Required reading for internet skeptics
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.
Maybe they're thinking of cooperative multitasking? Calling yield() explicitely to let the other "threads" run?
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.
I know nothing about java,
This is about JavaScript, so that shouldn't be an issue then....
LOL, yeah, you can write it in FORTH in maybe 5 minutes ;)
"Malo periculosam, libertatem quam quietam servitutem." -- Jefferson
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.
Real Programmers(tm) wouldn't use this for debugging. You should be using Fuckit.js to really work out the bugs in your code.