Removing cruft with FireBug

I had a sneak peak at Ajax Magazine today, and ended up in an article about the XML DOM (Microsoft centric, basic level, nothing you couldn't piece together yourself from a skim of the property names and functions available). Anyway, baffled by the overweight of the page template (yes, that presently applies to the ecmanaut root page too), I took to writing a little snippet of code to isolate the page content, dropping the cruft just with a bit of wizardry hand-waving at FireBug command line. This is the code I came up with:

function isolate( node, cb )
{
  for( var parent; parent = node.parentNode; node = parent )
    for( var c = parent.childNodes, i = c.length-1; i>=0; i-- )
      if( c[i] != node )
        (cb||removeNode)( c[i] );
}

function removeNode( node )
{
  node.parentNode.removeChild(node);
}

function hideNode( node )
{
  if( node.style ) node.style.visibility = 'hidden';
}

It works like this -- pick the node in the page you care about (the post text) with the FireBug Inspect button, hit the FireBug command line and apply the piece of code to iterates up the DOM tree from that node, removing (or hiding) all node siblings, wherein the cruft lieth. If you want to try it (and why not on this page?), you first need to add the methods to the page name space -- cut and paste the following portion of code to your FireBug command line:

isolate = function( node, cb ){for( var parent; parent = node.parentNode; node = parent )for( var c = parent.childNodes, i = c.length-1; i>=0; i-- )if(c[i] != node)(cb||removeNode)( c[i] );}; removeNode = function( node ) { node.parentNode.removeChild(node); }; hideNode = function( node ){ if(node.style) node.style.visibility = 'hidden'; }

Assuming you use the default FireBug keyboard bindings and don't have any clashing extension like Web Development Toolbar installed at the same time, this is how you repeat what I did. Press Ctrl+Shift+C and pick out the article node you want to isolate with the mouse (perhaps hitting the up arrow a few times to get enough context around the bits you wanted), hit return to select the node, Ctrl+Shift+L to go to the command line and type isolate($0) or isolate($0, hideNode) to remove all the cruft, or just hide it from view.

Once upon a time I used to do live page hacks like this, typing javascript: URLs into the Location field. FireBug makes hackery like this much less painful. I'm hopeful to see hacks like these become even easier to share and enjoy, in the comfortable, low-threshold fashion Greasemonkey has set an example for.

Being able to package a small component for reuse is a very powerful property of a good tool. The era of the bookmarklet hack is probably not quite over yet.

Categories:

• FireBug
• Platypus
• cruft
• howto