Beefy Boxes and Bandwidth Generously Provided by pair Networks
Perl-Sensitive Sunglasses

Graphical debugging of WebApps (and analyzing Wikis)

by neniro (Priest)
on Nov 01, 2005 at 16:41 UTC ( #504646=CUFP: print w/replies, xml ) Need Help??

The following examples refer to my wiki-node a quick and dirty Wiki - but the code is quite easy to transfer to all kind of webapps.

If you debug CGIs you've possbily utilized sometimes something like this:

use CGI::Carp qw/fatalsToBrowser/; use Data::Dumper # yada yada yada die Dumper $form; # or some other data-structure

This works fine and I used it quite often. But sometimes it would be cool to have a more vizualized output (even if you just want to impress your coworkers/boss). There is a cool module for this on cpan called GraphViz::Data::Grapher - but how can you use it in your CGI?

# this is part of the actions-dispatch of my wiki-project 'debug' => sub { use MIME::Base64; use GraphViz::Data::Grapher; my $debug_wiki; while (my ($k, $v) = each %$wiki) { $debug_wiki->{$k} = substr($v, 0, 20).' ...'; } my $graph = GraphViz::Data::Grapher->new($debug_wiki); return $q->header(), $q->start_html('DEBUG'), '<IMG SRC="data:image/png;base64,', encode_base64($graph->as_png), '" alt="debug"/>', $q->end_html; },

Alternatively I could have dumped $q->form or something else. The trick is to use base64-encoding as described in this RFC (The "data" URL scheme) to embed the GraphViz-dump in your html. This doesn't work for IE-users and beside that it isn't a good idea to try to dump bigger amounts of data this way.


I wanted to know which nodes in my wiki refer to other nodes. GraphViz::Data::Grapher won't do the trick but GraphViz ( and the GraphViz - module are still the right tools for this. If you've read my wiki-node you know that I've put the whole wiki in a simple hash-ref. It's easy to build a graph out of this structure:

# this is part of the actions-dispatch of my wiki-project 'analyze' => sub { use GraphViz; use MIME::Base64; my $g = GraphViz->new(); $g->add_node($_) for keys %$wiki; while (my ($k, $v) = each %$wiki) { $g->add_edge($k => $_) for ($v =~ /$wikiwords/g); } return $q->header(), $q->start_html('ANALYZE'), '<IMG SRC="data:image/png;base64,', encode_base64($g->as_png), '" alt="debug"/>', $q->end_html; }
As you see it's also just a few lines of code but you get a real cool picture of the relations within the wiki.

I hope you like it and maybe you've now some cool ideas of what you want to vizualize in your next webapp.

Replies are listed 'Best First'.
Re: Graphical debugging of WebApps (and analyzing Wikis)
by jplindstrom (Monsignor) on Nov 02, 2005 at 17:24 UTC
    Very cool trick!



Log In?

What's my password?
Create A New User
Node Status?
node history
Node Type: CUFP [id://504646]
Approved by ghenry
and all is quiet...

How do I use this? | Other CB clients
Other Users?
Others wandering the Monastery: (3)
As of 2017-07-25 03:08 GMT
Find Nodes?
    Voting Booth?
    I came, I saw, I ...

    Results (363 votes). Check out past polls.