Save HTML with javascript generated styles

Question

I'd like to save this webpage as html

http://www.wix.com/demone2/cupcakes-shop

but the saved file is too much different because the page has a bootstrap.js which generates styles for the classes wysiwyg_viewer_skins...

The closest answer I found is this

Get HTML with current styles (maybe inlined) of a page that finished rendering and finished running scripts

but I tried his phantomjs code and it makes all images datauri and doesn't work it very well with this page

Answer 1

Open that page in Chrome

Open the developer tools Ctrl + Shift + i

Go to the Elements tag

Right click on the HTML tag and select copy as HTML

That will put in the clipboard the rendered HTML as modified by Javascript, now paste it at your convenience.

Probably something equivalent can be found on other browsers, also IE sometimes takes few refresh to get it right.

Answer 2

I made this code to save all styles definition in a string so then it could be saved into an external css file

var str = '';
for (var i = 0; i < document.styleSheets.length; i++) {
    var rules = document.styleSheets[i].cssRules;
    if(rules != null){
        for(var j=0; j < rules.length; j++) {
            str += rules[j].cssText;
        }   
    }
}

Well. since there was about 700 rules, it took about 15 seconds to display in the console. But it worked