I made a very big mistake today, and accidentally deleted the entire CSS page for my website. I think I may be sick. I do have one page that uses the CSS open from before I deleted it. Is there I way I can get the css off of it? As soon as I refresh the page, it will be totally gone. The page I have open is in google chrome. I know I should have had it backed up.. all that stuff. But please, I might just start sobbing if I have to write the CSS all over again. Any help?
3 Answers
You can use a variant of the following code in the dev console:
var rc='';
for (var i = 0; i < document.styleSheets.length; ++i){
var ss = document.styleSheets[i];
rc += Array.prototype.map.call(ss.cssRules,function(el){return el.cssText}).join('') ;
}
rc should contain your CSS.
(Adapted from some code I use in an iOS app to capture CSS from an HTML page. The basic idea is to go through document.stylesheets, harvesting cssText from cssRules. See https://developer.mozilla.org/en-US/docs/Web/API/document.styleSheets.)
11 Comments
eshellborn
So what do I do? Open the console, copy that code in, and then what?
luk2302
exactly... insert and maybe add an
console.log(rc) to actually get returned what you just computed.eshellborn
Ok, It just says 'TypeError: Array.prototype.map called on null or undefined'.
brainjam
Try entering
document.styleSheets. What gets returned? If nothing, this isn't going to work. But if it is a StyleSheetList try drilling down, e.g. document.styleSheets[0].cssRules[0].cssTexteshellborn
StyleSheetList {0: CSSStyleSheet, 1: CSSStyleSheet, 2: CSSStyleSheet, 3: CSSStyleSheet, length: 4, item: function}
|
Unless you have a cached version, which should contain your css call, you wont be able to. You could try to right click and 'View Source', which would show you a link to your css file. If you click that link, it may give you a new window which will show you the text for your css.
Since the file no longer exists, it may not. Especially if you opened it locally.
Comments
If you had the Developer Tools open when you loaded the page, then this method should work for you. If you didn't have the dev tools open... then this may not work.
In the dev tools, go to the Network tab at the top of the dev tools window that opens. Next, locate your CSS file in the list of resources downloaded for the page. Click on it, and your file contents should show up in a pane to the right of that (you may need to click the Preview or Response sub-tabs on that pane to see it). You can highlight and copy/paste from here.
If you didn't have the dev tools open, the catch that makes this not work is that the Network tab is not necessarily, in my experience, populated with any resources.
An alternative is to search Chrome's temporary cache. I'm pretty sure the file name would be unmodified, so you could try executing a file search from the top level of Chrome's cache in the filesystem and see if it comes up.
Ctrl-Shift-Ior the chrome menu underTools->Developer Toolsto open the developer tools in chrome, in the bottom-right (by default) there is a drop-down with "computed style" in it. You may be able to rescue things from there.