How to export all relevant HTML/CSS for one element

Question

I'm sure this question is out there but I cannot find it:

Is there a tool that can get one element of my HTML document and export that element, all its parents and all its associated CSS but nothing else?

EDIT:

Sorry I was not clear enough. I don't mean that I want Firebug/DevTools, I mean a tool [that maybe a feature of some kind of in-browser] that outputs all the relevant HTML/CSS for the selected element into a self contained file / to the clipboard.

EDIT2:

When I say outputs all relevent HTML/CSS I mean that I want that element and all it's css rules, and then each parent element with their css rules all the way up to . What I would get as an output would be enough HTML/CSS to open as a standalone page and have the target element rendered and effected by all relevant CSS rules.

Answer 1

Yes, there is a tool/s and ways to do that.

First, with Chrome extension, you can install SnappySnippet from Chrome Web Store. It allows easy HTML+CSS extraction from the specified (last inspected) DOM node. Additionally, you can send your code straight to CodePen or JSFiddle.

Second, CSS Used, other Chrome extension, for extracting CSS with children CSSs.

And third, without extension, if you want CSS embedded in HTML or above extensions is not working for you, you can use any Webkit based browser (like Chrome or Firefox) to run script in console which will add all css to html element and you can easily just copy OuterHTML and it will work anywhere.

var el = document.querySelector(“#yourId”); // change yourId to id of your element, or you can write “body” and it will convert all document
var els = el.getElementsByTagName("*");

for(var i = -1, l = els.length; ++i < l;){
    els[i].setAttribute("style", window.getComputedStyle(els[i]).cssText);
}

So, just copy this code to Console (Right click on page->Inspect->Console), change yourid to yourid or set it to "body", run it and then right click on your element and "copy outerHTML"

Answer 2

Do you mean something like Firebug ( Firefox addon )? Or the Debug bar in Chrome ( Press F12 in the browser )?

In Chrome:

• Press F12
• Click on the loop in the bottom left.
• Click on the element
• Now you can see all the style.
• In the big window you can see other element, and the element under it.