WebfBug, a Firebug extension to create web fragments

Since I’m developing the web fragments technology, I want to allow people to use it, so I created a simple Firefox add-on which integrates with Firebug.

How to install

To install webfbug, simply go here. Since it is a Firebug extension, you need to install also Firebug.

How to use it

Once installed the webfbug, when you open Firebug, you will find on the html panel three more tabs “Webf“, “Process” and “Attributes“.

The Webf panel

Here you can extract web fragments from html pages; Click on the top-right button and select webf, after a little while the source textarea will be filled with the generated webf.

The generated code, contains all the css rules used by the selected subtree nodes.
It also contains the html code as a webf.

The rules are divided by media type and they are rewritten in such a way they will apply directly to the webf. A tipical webf will be:

<style type="text/css" media="all">
/* 0: div, aside*/
div.webF1356000245683,.webF1356000245683 aside,.webF1356000245683 { 
margin: 0px; 
padding: 0px; 
border: 0px none; 
font: inherit; 
vertical-align: baseline; }
<DIV class="webF1356000245683">

note that all the rules apply only starting from the html node having as class .webF1356000245683.

The Process panel

This panel allows to convert node subtree into templates. If you are going to use templates engine like Domplate or Dust.js, it may be tedious to write code by hand.
From this panel you can generate template source code directly. Select the template to use (right now only Domplate is supported) and the textarea on bottom will be filled with the result.


DIV( { 'itemscope': '','itemtype': 'http://schema.org/WebApplication' },

the first line contains the object to pass to Domplate for substitutions (I will explain how to generate this object later), the following lines contain the Domplate template.

The Attributes panel

This panel allows to quickly change and create node attributes.
Also Firebug has this feature, but as I have always had difficulties with it, I decide to add a simplest one.

at the top of this panel you will find a line calles “jquery process“.
You can use it to process node or nodes directly from here. for example you could execute

$("a", node).removeAttr("href")

Remember to add the node as the context parameter in the $ call.

That’s it right now, Have fun with webfbug!

To make suggestions add a comment.