Slashdot Mirror
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.'"
Man I wish every web page had a font like those sites linked in the summary (well, all but http://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!
Politics; n. : A religion whereby man is god.
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
tfa mentions the parallels to cps. if he had just cut to the chase it would have been a more regular and
useful transform
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/
I think it's a great tool for learning. Keep up the good work.
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.
LOL, yeah, you can write it in FORTH in maybe 5 minutes ;)
"Malo periculosam, libertatem quam quietam servitutem." -- Jefferson
Real Programmers(tm) wouldn't use this for debugging. You should be using Fuckit.js to really work out the bugs in your code.