Tools to selectively copy HTML+CSS+JS from existin

Question

Like most web developers, I occasionally like to look at the source of websites to see how their markup is built. Tools like Firebug and Chrome Developer Tools make it easy to inspect the code, but if I want to copy an isolated section and play around with it locally, it would be a pain to copy all the individual elements and their associated css. And probably just as much work to save the entire source and cut out the unrelated code.

It would be great if I could right-click a node in Firebug and have a "Save HTML+CSS for this node" option. Does such a tool exist? Is it possible to extend Firebug or Chrome Developer Tools to add this feature?

Answer 1

I originally asked this question I was looking for a Chrome (or FireFox) solution, but I stumbled across this feature in Internet Explorer developer tools. Pretty much what I'm looking for (except for the javascript)

Result:

Answer 2

There is no plugins needed. It can be done very simply with Internet Explorer 11 native Developer Tools with just one click, very clean. Just right on an element and inspect that element, and right click on some block and choose "Copy element with styles". You can see it in the below image.

It provides the css code very clean, like

.menu { 
    margin: 0;
}
.menu li {
    list-style: none;
}

Answer 3

There is a firefox plugin that saves the whole page's HTML, CSS, etc.. but I have not seen one that does a partial save.

I remember IE 5.5 had what you were looking for though ;)

Answer 4

http://clipboard.com does this and quite well. Although your expectation of the copied version being exactly as in the original so you can play and learn with it, may not be realistic.