How to start creating a selection script , "inspect like what firebug do"?

Question

I want to create a small tool on webproject which will let the user select tags on the page and i will save selections in an array for future use, so what i need is something near the functionality of firebug.

From where i can start? any good articles or tools can make things easier?

Answer 1

Could you do something like add a jquery function which does stuff on hovering and clicking on things you want to inspect?

e.g

$('div, p, img').hover(function(){
 // stuff to do on hover like highlight the object
    $(this).addClass('hover');
}, function(){
    $(this).removeClass('hover');
});

$('div, p, img').click(function(){  yourSpecialClickFunction();  });

Maybe you would have something somewhere which doesn't make the above do anything until an inspect button is clicked perhaps.

Answer 2

Check this question: Does anyone know a dom inspector javascript library or plugin?