Slash Boxes
NOTE: use Perl; is on undef hiatus. You can read content, but you can't post it. More info will be forthcoming forthcomingly.

All the Perl that's Practical to Extract and Report

use Perl Log In

Log In

[ Create a new account ]

schwern (1528)

  (email not shown publicly)
AOL IM: MichaelSchwern (Add Buddy, Send Message)

Schwern can destroy CPAN at his whim.

Journal of schwern (1528)

Tuesday August 14, 2007
06:43 AM

IDEA! The Visible Browser.

[ #34107 ]

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
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.

The Fine Print: The following comments are owned by whoever posted them. We are not responsible for them in any way.
More | Login | Reply
Loading... please wait.
  • 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 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 :)
    • 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.
  • 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.
    • 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.
  • 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.)