IDEA! The Visible Browser.

schwern on 2007-08-14T11:43:41

Remember The Visible Man? It was a hobby model kit featuring a transparent plastic shell of a human with all the organs and bones visible through it. Great, gross fun as a kid. Some even had a heart that could pump liquid through the major veins and arteries and a working diaphram that could expand and contract the lungs.

Visibility. Its important to be able to see the guts to get an understanding of how something works. To develop a proper user model.

I've taught a class in the past called "Computing Gestalt" in which I try to transfer a lot of the details of how a computer works that a programmer understands to a user who is normally not exposed to such things. One of the first exercises is assembling a computer from parts. As each part is added its purpose is discussed. Once its all assembled the computer is switched on without a case. Its an exercise to "break the seal" and promote familiarity and a feeling of exploration. Computers can be understood once you look inside.

The networking portion centers around the example of how a web browser works. What happens to display a web page on your screen? For most users its:

1) Type in URL 2) *MAGIC PONIES!* 3) Page appears on your screen.

We step through each part of the process of connecting a computer to the Internet and fetching a web page that might be useful in debugging a failure: Ethernet, DHCP, TCP/IP, DNS, ports, HTTP and HTML. This mostly involves chalkboard work and the occassional telnet session with hand written HTTP to expose what's going on under the hood.

Wouldn't it be great if there was a way to make this all visible *AS IT HAPPENS*?! What if there was a connection visualization browser for Firefox where you saw what was going on as the browser processes the connection? Not as text but as colorful, easy to understand pictures? What if you could "zoom in" on various parts to see more detail? What if you could slow down the process so you can observe it carefully?

Wouldn't that be neat?

I think I have my project for BarCamp Block.

PS If this exists, please let me know.


Never heard of this idea

Ovid on 2007-08-14T11:53:23

Never heard of this being done, but I love it! Write this and I'd love you forever and have your children.

Or something like that.

Check out the Firefox Add-On "FireBug"

fansipans on 2007-08-14T12:43:21

Check out the Firefox addon FireBug. It shows up in the lower portion of firefox and lets you see all network connections for all resources a page calls, along with all HTTP headers used for each request and response, and the total time to load. It also has insane functionality around "Inspect Element"; you right click anywhere on a page and can go straight to the corresponding HTML or DOM tree - and see all javascript and all css in one place. The header inspection part has already helped me out IRL :)

Re:Check out the Firefox Add-On "FireBug"

clscott on 2007-08-14T13:15:57

There is also a FireFox plugin called Tamper Data
that allows you to inspect and change the HTTP headers.

I find it useful for injecting "bad" data into a web application.

Did you mean…

Aristotle on 2007-08-14T13:22:15

LiveHTTPHeaders?

Nifty idea

jcap on 2007-08-14T13:34:30

I agree with other posters that there is some of this functionality in a few Firefox extensions, but I'd love to see the whole thing rounded out.

Re:Nifty idea

slanning on 2007-08-14T15:44:36

I think the extensions are also much less than the idea Schwern has in my mind. In the Visible Browser, you'd have like a ubrowser-like, or better a Croquet-like, interface/environment, and there would be representations of the connections being made, and IP addresses and port numbers would become intuitive, and you could zoom into the "pipes" and see the bytes whizzing by and pouring into the images. You would see how it works.

Re:Nifty idea

bart on 2007-08-14T20:14:08

I use Wireshark (formely known as Ethereal) to see the bytes whiz by.

be careful about *which* guts

Eric Wilhelm on 2007-08-14T19:52:20

This is a lovely idea. I envision a 4D animation (2D canvas + 1D http connection + 1D time) where you can step through the connection and canvas state (remember: javascript can change the page after the http stuff is finished (and then of course there's AJA*)), but I suppose you would need to see something of the DOM data structure because the canvas will be essentially blank while the page is being fetched (though making table borders and image locations visible might make the data structure graphical.)

But, having seen the innards of mozilla, you definitely want to be careful here. I fear it might be a leaky abstraction. (Though actually, it might be nice to see that mess graphically in all its glory because despite the delicious irony of this diagram, the design overview can't begin to explain it.)

Your "assembly of a computer" overview probably stops at the component level of abstraction (as opposed to drilling all the way down into the transistors) and likely has to do some hand-waving regarding software as well (especially if you don't want to get into explaining broken-ness like why copying a file requires a reboot on qdos, etc.) Also, the "visible man" presumably uses some non-blood liquid and thus doesn't get into the details of interactions between cells, microbes, etc.

It would definitely do many a web programmer some good to talk to a webserver over telnet. I fear that too many have gone ten years in the field without understanding even that much.

Meanwhile, my attempt to compile libxul on windows has crashed yet again, so I'm going to keep dreaming about invisible qdos :-D

Here's some text, and your job is...

Ron Savage on 2007-08-15T01:48:41

to animate it!

http://savage.net.au/Ron/html/web-servers.html

TIA.