CODEWITHSUNDEEP
javascriptcssgoogle-chromebrowser
eshellborn
eshellborn

Reputation: 11261

Retrieve CSS from page without reloading it

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?

Upvotes: 1

Views: 135

Answers (3)

ajp15243
ajp15243

Reputation: 7960

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.

Upvotes: 0

brainjam
brainjam

Reputation: 19005

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.)

Upvotes: 2

Phoenix
Phoenix

Reputation: 1931

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.

Upvotes: 0

Related Questions