从页面检索CSS而不重新加载它

Question

我今天犯了一个很大的错误，不小心删除了我网站的整个CSS页面。我想我可能生病了。在删除之前，我有一个使用CSS打开的页面。我有没有办法让css脱颖而出？一旦我刷新页面，它就会完全消失。我打开的页面是谷歌浏览器。我知道我应该备份它......所有这些东西。但是，如果我必须再次编写CSS，我可能会开始抽泣。有什么帮助吗？

Answer 1

您可以在开发控制台中使用以下代码的变体：

 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应包含您的CSS。

（改编自我在iOS应用中使用的一些代码，用于从HTML页面捕获CSS。基本的想法是通过document.stylesheets，从cssText收获cssRules。请参阅{ {3}}。）

Answer 2

除非你有一个缓存版本，它应该包含你的css调用，否则你将无法做到。您可以尝试右键单击“查看源”，这将显示指向您的css文件的链接。如果单击该链接，它可能会为您提供一个新窗口，其中将显示您的CSS的文本。

由于文件不再存在，因此可能不存在。特别是如果你在本地打开它。

Answer 3

如果您在加载页面时打开了开发人员工具，那么此方法应该适合您。如果您没有打开开发工具......那么这可能无效。

在开发工具中，转到打开的开发工具窗口顶部的Network标签。接下来，在为该页面下载的资源列表中找到您的CSS文件。单击它，您的文件内容应显示在右侧的窗格中（您可能需要单击该窗格上的Preview或Response子标签以查看它。您可以在此处突出显示和复制/粘贴。

如果您没有打开开发工具，那么使这不起作用的问题是，根据我的经验，Network标签不一定填充任何资源。

另一种方法是搜索Chrome的临时缓存。我非常确定文件名是不会被修改的，因此您可以尝试从文件系统中顶级Chrome缓存中执行文件搜索，看看是否出现。