0

Recently I lost my CSS file in localfile(mydisk) due to notepad++ Crash,...and accidentaly overwriting it with blank file. just like this case.

I've tried what they suggested there, to use recuva recovery, but null..I've tried looking in backup folder in notepad++ appsdata but my file is not there. and my windows 7, the restore system has't been settled yet.

But when I back into Chrome(v.47)...My page tab is still opened there, still with full Style applied. and also when i inspect the page with dev tools, its still displays my stylesheet script there, but it only just for each element not the full stylesheet, and also cannot be edited like usual. Here the SS Pict:

Image

Is it possile to restore my whole stylesheet from active tab in the chrome browser?? with the actual .css is already gone, or is it there another way to restore my lost script? maybe? please?.. like,..you know..,its kind of pain to write all over from the start again... and while for time being, I wont close that tab in my browser.

Community
  • 1
  • 1
DikaDikz
  • 102
  • 1
  • 11
  • 1
    Have you tried looking in the inspector? And/or *using version control*? – jonrsharpe May 06 '16 at 18:03
  • 1
    That is due to cache. In the Resources tab of the console, you should be able to see all files, including all css (under Frames > Stylesheets > ...) – Luan Nico May 06 '16 at 18:03
  • 1
    In developer tools, go to **Sources** tab and you'll find the file there - You can also in the **Elements** tab, open the `` and search for the correct ` – Alon Eitan May 06 '16 at 18:03
  • Try saving the page as `page.htm` somewhere. Next to it there will be a folder called `page_files`. That might contain your css file. – Oriol May 06 '16 at 18:11
  • @Oriol - Had the same idea and just did try that, but no luck. The resource does not exist. So it will not be downloaded. – DavidDomain May 06 '16 at 18:17
  • the resource>frame>stylesheet is referencing the same folder and same stylesheet(which already become 0kb). is it also with the html file in the on the devtools/inspect page, it refer to the same place(empty file) too. – DikaDikz May 06 '16 at 18:22
  • What about View page source? that should have all HTML, CSS, and Javascript combined into the one page. No idea if that would work or not, but its a thought – Ryan May 06 '16 at 18:24
  • @DikaDikz The screenshot describe an inline style, so it's probably a big block of style somewhere in the `head` of the document - You need to copy the content of the style using `ctrl+c` – Alon Eitan May 06 '16 at 18:25
  • @Alon Eitan : what inline and big block? you mean copying per each element and assemble it become whole? – DikaDikz May 06 '16 at 18:46
  • @Ryan: the view-page-source is also refer to the default folder which contain empty css file. – DikaDikz May 06 '16 at 18:48
  • @DikaDikz Of Course not. The image shows the style location as `` (In the right side of the title of each selector) which mean that it's not taken from an external file, but from a ` – Alon Eitan May 06 '16 at 18:51
  • @ Alon Eitan: the when i click is refer to which already emptied,..the one bugger me is the "user agent stylesheet" that appear in almost every selector of element...i wonder if the browser is creating another version of stylesheet for my page somewhere else..., if that so, there is high posibility it contain my style code too. – DikaDikz May 06 '16 at 19:40

4 Answers4

3

For general amusement, this snippet entered (1) into URL bar of recent browser should (in most cases (2)) display all CSS rules from currently displayed page, in raw format. In unlikely case developer tools in reasonable browser fails, this could save at least "something":

javascript:src=[];([].slice.call(document.styleSheets||[])).forEach(function(s){([].slice.call(s.cssRules||[])).forEach(function(r){src.push(r.cssText)})});alert(src.join('\n'))

(1) Google Chrome strips "javascript:" while pasting from clipboad for security reasons: must be written by hand. Or pasted without "javascript" into console. (2) here at SO for reasons unknown (suspecting CORS) does not work, but generally should. Also it will display rules even from disabled styles.

myf
  • 9,874
  • 2
  • 37
  • 49
2

Exactly like Luan Nico wrote in the second comment, right tab is Resources. It is true the stylesheet file cannot be saved directly via context menu > Save if the file is gone/unreachable at the moment, but displayed (cached) content on the right is copyable.

Chrome - F12 - Resources - Frames - (localhost) - Stylesheets

myf
  • 9,874
  • 2
  • 37
  • 49
1

If you can't get the file from the inspector as others have been suggesting, you can try this application: http://www.nirsoft.net/utils/chrome_cache_view.html

It displays all the files in Chrome's cache. You can simply click your .css file, go to file, and click "Open Selected Cache File".

Jacob Colvin
  • 2,625
  • 1
  • 17
  • 36
  • yeah i hope i could find it there too,..but still no luck, i cant find my css file name there,,,and all the link source is all http/https, i think the browser does'nt cache-ing the local-file page,and only cache-ing page from internet/server. – DikaDikz May 06 '16 at 18:40
  • That sucks, I didn't even think of that. I tried with a local page and you're completely correct, it doesn't cache anything. Sadly I think in that case you may be out of luck - the only place the information still exists is in chrome's instance. I guess you will probably have to just copy and paste out of there. Tedious, but better than re-writing everything. Sorry this wasn't of more help. – Jacob Colvin May 06 '16 at 18:45
  • yeah i think i had no other choice but to reassemble per element...but still, i think is still there...somewhere in my RAM...just dont know how to reach it, lol – DikaDikz May 06 '16 at 18:49
  • Also I need 50 rep to comment on the main post, but @Alon Eitan is incorrect. It displays – Jacob Colvin May 06 '16 at 18:54
  • hmm so he mean that inline...,anyway,..rather than that refer to which already emptied,..the one bugger me is the "user agent stylesheet" in almost every selector of element...i wonder if the browser is creating another version of stylesheet for my page somewhere else..., if that so, there is high posibility it contain my style code too. – DikaDikz May 06 '16 at 19:34
1

This solution is dependent on you having run the web page/site via a web server (local or otherwise). If you ran it via file:///Users...., then this would be of no use unfortunately. I would be interested to know if there is a solution for that.

I just answered a similar question regarding a lost image. The same tool can be used to recover CSS files if they have were served via web server.

  1. Navigate to chrome://cache/
  2. Find and click on the link to your CSS files
  3. Navigate to this page and paste the HTTP headers and binary data
  4. Click Go
  5. Download the file - you may have to adjust browser security as Chrome blocked it for me. I just opened it in Safari instead.
  6. The file downloaded is a gz so extract it. You can then open contents in a text editor to see your CSS.

This worked for me just now, but again it only worked when I had either run a local web server or I wanted to view the cache from an external site.

Update

I had a look at Chrome Dev Tools under the hood to see if I could find any cache references to the stylesheet under the Styles tab. Unfortunately, it looks as though they reference the static files directly rather than from a cache. They probably only load the styles from the file when needed. Therefore, I'm not convinced there's much you can do. See below:

Inspecting Chrome for Cached References

Gideon Pyzer
  • 22,610
  • 7
  • 62
  • 68