I made a debugger that draws the state machine of the program | Hacker News Reader

I made a debugger that draws the state machine of the program

i.imgur.com

306 pointsr00nk58 comments

That is absolutely awesome. I used to have something like this: a pair of very fast dacs hooked up to the 16 address lines of my computer and another dac hooked up to the databus. It allowed me to look straight into the memory of the machine as the processor was accessing it, quite a powerful tool. Yours is nicer though (and with todays memory size I'd hate to think about the quantity of data that passes in a split second across the bus of a modern pc).

What did they drive?

X, Y, brightness on an army surplus scope.

damn, that's gangster

And you'll immediately see it when your program hangs in a loop ;-)

Spin cycle state :P

That reminds me of the old story of people having a audio speaker connected to the address but of their mainframe so they could detect error conditions by the sounds being made.

I found at least one old system that did this (although the version I heard related to the old mainframes Edinburgh University had decades ago):

EDSAC II had a speaker to help with debugging and this "feature" was also incorporated into versions of the LEO, the worlds first computer for business applications:

http://en.wikipedia.org/wiki/LEO_%28computer%29

I wonder if something similar could be created for the state machines in the article - giving each state it's own tone?

>giving each state it's own tone?

oh man that's such a good idea.

Could output midi events and defer the sound rendering to another process.

As I recall, it was a radio that was tuned to the Kilohertz band. This was before the FCC was so careful about computers emitting radio waves. A computer that has a clock cycle measured in Kilohertz can emit radio waves in the Kilohertz band.

This makes "music" of a sort, especially when the program running does many things repetitiously. In the early days of computing, multiplication was implemented as repeated addition. Memory access also had a particular pattern of repetitive circuitry.

This provided a base repetition that humans recognize. When code was stuck in a loop, or repeatedly accessed the same range of memory locations, the operators could hear the pattern and know something was wrong.

That reminds me of the time I was poking (literally POKE'ing) around with my TRS-80 Color Computer. I (somehow) had changed it to one of the graphics modes and then set the base address to the start of RAM.

So on the screen you could sort of see the BASIC stack, other important system variables, and even a squashed representation of the text console. So when it was sitting idle you'd see one kind of pattern, and running programs produced other kinds of patterns.

Fun times.

I always thought that a something like this was how the computers on Star Trek worked.

"Computer! Run a level five diagnostic of the starboard nacelles!" bloop bloop bloop...

The foley artists did a pretty terrific job of using sound to differentiate between heavy computation, success, and failure etc. Makes me kinda wish my computer could play a minor third instead of just plopping up a dialog box when things go wrong.

Been pondering something like that for networking.

A while back i read about a guy who had set up his phone so that it would play certain tones when it detected APs while walking around town. This based on their signal strenght, security settings etc.

This got me thinking back to my analog modem days, and how i could tell if i was getting a good connection or not depending on the noise it would make during the handshake.

What i was thinking was setting up a sniffer, and hook that up so certain tones would play based on packets passing by.

I sometimes wonder if modern computing is too reliant on one human sense, vision. More mechanical devices can give us early warnings about developing issues based on sounds and vibrations.

For those who don't know:

Ping makes a ping sound on linux.

You can choose ping on success or ping on timeout (or silent.) Fantastic for live work.

Don't find anything about that in the docs for Gnu ping...

The Radio Shack TRS-80 Model 1 was legendary for the amount of radio interference it caused. I used this at age 7 along with my older brother to add sounds and victory music to pinball games. You could tune the FM radio to a harmonic of the frequency of the processor. Then you constructed loops with short delays to alter the frequency of the sound. You'd hear all kinds of processing garbage during the game loop, but the sounds came out fine.

> a pair of very fast dacs hooked up to the 16 address lines of my computer and another dac hooked up to the databus.

Here's an article about it, with photos [1]. I remember reading it in BYTE, years ago.

https://archive.org/stream/byte-magazine-1978-02/1978_02_BYT...

Edit: I'll bet it's no longer possible to do this on modern CPUs; either the memory busses are inaccessible (SoC) or so highly optimised (DDR4) that it's infeasible to probe them without disrupting the transmission line.

[1] Ciarcia, S. "A Penny Pinching Address State Analyzer". BYTE 3(2), pp. 6--12. February, 1978.

Bunnie Huang used an FPGA on a pretty fast bus to extract the XBox's ROM. Granted, that's no longer a "modern" CPU, but still interesting.

See the "Update on ROM extraction and decryption" section here: http://www.xenatera.com/bunnie/proj/anatak/xboxmod.html

More info here: http://www.xenatera.com/bunnie/proj/anatak/AIM-2002-008.pdf

And in his book: http://www.nostarch.com/xboxfree

Besides that you'd have a serious problem getting a DAC that is fast enough and with enough bits.

Here's one for Python. http://pythontutor.com/ It shows the variables, and allows you to step forward and backward. Great for explaining programming to new people who haven't grokked computing yet.

Apple Swift and Unreal Engine Blueprint both have amazing state visualization tools built in. See: https://docs.unrealengine.com/latest/images/Engine/Blueprint...

I think a deep visual debugging tools are going to be 'built in' in future in much the same way that HTTP primitives were recently with node and string manipulation was with Python 2.

There used to be an IDE called "Together" that supported bi-directional transformation between source code and diagrams.

Although it sounded like a really cool idea, it didn't take off. Seems text is best (maybe because it supports incompatible hierarchies better).

Thanks for the info, I'd never heard of that IDE before. With its common name it's been impossible to find screenshots so far.

> Although it sounded like a really cool idea, it didn't take off.

That could have been because it was bought by Boreland, who had a history of 'not succeeding' with projects, whose focus was elsewhere, who lost key staff at an important point, and then were bought out and mismanaged from there forward?

Delphi didn't have to die the death it has.

porker, try searching for TogetherJ which was the Java specific version of Together. I may have even used it back around 2000 but don't remember much other than the name.

It still exist and Borland has ridiculous small screenshots on their website

http://www.borland.com/Products/Requirements-Management/Toge...

Text probably serves better because code is often too complex to visualize in some cases, and in others to comprehend generated visualized code.

Think about algorithm that switches values by using temporary variable for example. By looking at text, it's pretty simple to construct the flow follow the values traveling from one variable to other. But if you put it in 2D graphical interface, it becomes very problematic and hard to follow. I would imagine it would be easier if there was like a movie where value would move from one box symbolizing variable to other. But that would make it difficult to edit.

Another way would be to visually represent only change, but then it would be same as textual representation, only more redundant.

Actually I can think of a simple way to visualize that.

The debugger actually displays what I call a folded lattice, meaning that execution starts at the top and goes down, so representing what your talking about would simply look like ">" with lines. It would need some representation of data flow, however, which it currently doesn't have.

> Seems text is best (maybe because it supports incompatible hierarchies better).

Both text and visual programming languages are simple representations of the structure of your program - what we normally call an AST. Neither is more 'true' than the other, and things in the text that don't match the structure are syntax errors.

The author, Philip Guo, is part of the HN community as pgbovine.

Fwiw, most debuggers will let you step through execution and look at variables and the stack frames.

Also, if anyone's interested, I need some help porting it to different platforms. If you can swim in the clusterfuck of x86 for a bit to port it to ward that would be awesome, or even getting working with gdb this could be an actual tool.

might as well attach a src link here too: https://github.com/r0nk/ward

source: https://github.com/r0nk/ward

I'm slightly saddened that Github doesn't recognize Brainfuck files.

Of course it does:

https://github.com/r0nk/ward/blob/master/hello.bf

https://github.com/github/linguist/blob/master/lib/linguist/...

Just not in Ace (their code editor).

It doesn't count it in language statistics, though.

Hmm, this looks like a different issue. Brainfuck is recognized in the stats, if you head to search: https://github.com/r0nk/ward/search?l=makefile

It's not showing up in the color bar, though. Loggin' dat issue.

IIUC, you could probably use KLEE to ease the pain of capturing the state.

http://klee.github.io/

I would have been more interested by the source code and some explanations...

shameles plug for my little project - the pooh programming language:

http://mosermichael.github.io/cstuff/all/pooh-lan/2012/12/11...

here you can get an execution trace of the program: each expression is displayed as it evaluates:

http://mosermichael.github.io/cstuff/docs/html/pooh/example/...

(they used to have something like that in some scheme interpreters, i used this featue a lot at the time)

hey the projects open source, if you can add your language to ward then it might help your language have a unique IDE, It'll have something other (excluding bf) languages don't have.

Shameless self-plug: Me and a friend developed a Java debugger [1] that visualizes (Java) programs with UML class and sequence diagrams [2]. It isn't actively developed anymore, but the demo version [3] (along with Help -> Tutorial) can still be used to give it a try.

It was quite an involved & fun project as we used Java VM Tool Interface directly instead of using JDI and the layout algorithms for the diagrams are quite fancy too :)

[1] http://www.jbixbe.com [2] http://www.jbixbe.com/VisualTour.html [3] http://www.jbixbe.com/download/jar/jbixbe.jar

That's useful, exactly the tool missing in my BrainFuck toolkit.

All right, I'll be the first one to admit that I don't know what the hell I'm looking at. Would some sort of explanation, or at the very least some source code, be too much to ask?

Its interesting that its dynamic. Idea to think about would be snapshotting dot files for graphviz. Then you can do all kinds of crazy stuff with the graphviz output.

My databases at work snapshot out their schemas to graphviz to create diagrams of all the FK relationships automatically every day, which I find helpful, and more or less inspired this idea.

I would love to have a visual representation of all the possible branches that can be taken in a body of C code, with an easy way to ask the program to tell me what are all the conditions that must be met for this branch to execute.

Yeah that was the idea, I'm posting it around to see if I can get a few folks interested in porting it to different languages. Maintaining everything is hard on a one man teenage team.

What is the widget in the top right corner? What WM are you using?

WM cwm, the widget is just my conky setup, here are my dotfiles: https://github.com/r0nk/configs

Are you using OpenBSD, or one of the Linux ports (Neukirchen?)?

Arch linux

How did you get your terminal to look like that?

The font looks like Terminus. The background transparency effect and hidden scrollbars can be set-up with most terminals, this one is probably urxvt. As for the borderless/undecorated window, that's probably done via the Window Manager. DWM[0] for example doesn't paint window decorations but there's usually a way to set this up in Gnome/Unity/KDE/etc as well.

[0] http://dwm.suckless.org

Thanks!

also, here are my dot files: https://github.com/r0nk/configs

what wallpaper is that

Looks like a screen cap from the BioShock game

http://en.wikipedia.org/wiki/BioShock_%28series%29

It's concept art from the creation of BioShock 1

http://bioshock.wikia.com/wiki/File:1959.jpg

Reply on news.ycombinator.com