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.

Calces

export to what (HTML, text...)? to where (another website, a file...)? are you looking for a browser extension? for javascript? – Silicone

JavaScript can probably do this, though you need to explain where you're 'exporting' to (and I'm curious as to 'why?' also). And I'm interested as to why you want the parents and not, apparently, the descendant elements. – Stanleigh

In Google Chrome you can right-click the element and view it's computed styles, seeing where the values came from. This might help you debug? – Modifier

Sorry should have said I'm currently using Chrome Dev Tools to debug in the browser. I want to export self contained HTML/CSS for JSfiddle/Pastebin or even just to simplify my offline debugging. – Calces

You want to export to the clipboard = 'copy' it from Firebug/devtools – Leaden

BTW, I'm not sure what you are after will truly make debugging any easier. CSS debugging is really dependent on context and other element's styles. – Leaden

Hi DA, that is exactly the situation I want exported. I want the selected element and its context and nothing else. A kind of code isolation so I can see what is affecting the element, and not wade thru lots of other code [when a project has started to get quite big] – Calces

Still loking for such a tool in order to quickly import output in jsfiddle for instance .. – Smew

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"

Monticule

It has been a long time since I asked this question and I see from SnappySnippet and the SO question triggering it that plenty of other people have asked this q. Thanks for a 7 year resolution. – Calces

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.

Mclaughlin

I don't mean an in-browser debugger [though maybe one of those has this function]. I mean some tool that selects an element in this way, but exports all the relevant HTML/CSS for that element into a self-contained file [well I probably mean to the clipboard but you know what I mean] – Calces

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.

Ruvalcaba

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.

Adieu

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.

Remorse

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

Coyote

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)

Parterre