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.

Answer 3

In chrome, you can right click the page, and then select "inspect element" to view the html code of the page (but in the browser). Then, right click on the element that you want to export, and select "copy as html". Paste it into whatever editor you like. Hope this helps.

Answer 4

Press F12 or right click and go "inspect element" then select element to get the HTML code for the current webpage. Once at that point click the magnifying glass to the left and click on an element of the page using that, that will show you the code used for that specific element, after that you can right click and select "Copy Html" or you can go "Edit as Html" and then copy the code.

Answer 5

You can try to use a tool like Site Sucker for this. I've used it to grab entire websites, but there are settings available that might limit to what you're looking for.

Answer 6

Great question - it was alive and kicking for me today :-)!

Building on the accepted answer (thank you for that!) and this answer, I've got:

var el = document.querySelector("#question > div.post-layout > div.postcell.post-layout--right > div.s-prose.js-post-body"); // 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;){
    el = els[i]
    s = getComputedStyle(el)
    for (let styleKey in el.style) {
        for (let computedStyleKey in s) {
            let computedStyleKeyCamelCase = computedStyleKey.replace(/\-([a-z])/g, v => v[1].toUpperCase());
            if ((typeof el.style[styleKey] != "function") && (styleKey != 'cssText')){
                if(styleKey == computedStyleKeyCamelCase) {
                    el.style[styleKey] = s[computedStyleKey];
                }
            }
        }
    }
}

P.S.:

The above code should run in the Developer Tools (F12) console (tried it in Chrome) and it will add the inline style to each element

After running you could right click and do Copy / OuterHTML

Answer 7

In order to fix the lack of coding organization our dear Omanosoft

Just use this

    var el = document.body //querySelector(“body”); // change yourId to id of your element, or you can write “body” and it will convert all document
    var els = el.getElementsByTagName("*");
    console.log(els)
    for(var i = 0, l = els.length; i < l; i++)
    {

            console.log(els[i].style.cssText);
    }
    console.log(els)