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

score 1 · Answer 1 · answered Jul 08 '14 at 12:09

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.

answered Jul 08 '14 at 12:09

GillesC

10,647
3
40
55

Well. I tried that but it won't save javascript generated styles – jscripter Jul 08 '14 at 12:15

score 1 · Answer 2 · answered Jul 08 '14 at 12:46

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

Save HTML with javascript generated styles

2 Answers2