刷新CSS Bookmarklet，适用于最新的Chrome浏览器

Question

我正在开发一个网站，我希望页面刷新时检测到一个CSS文件的变化。我曾经可以很容易地做到这一点，下面的书签，但现在没有一个在Chrome上工作。

http://david.dojotoolkit.org/recss.html

http://calvincorreli.com/2006/02/13/re-recss/

http://www.paulirish.com/2008/how-to-iterate-quickly-when-debugging-css/

我不能改变我工作的网站的HTML，所以我不能使用肝脏负荷的应用程序。理想情况下，我会继续使用Chrome，但我会切换到另一个浏览器，如果有必要。

Answer 1

有两种方法:

1. 编辑css文件并使用livereload在Chrome中自动加载
2. 在Chrome中更改CSS并保存它(没有IDE使用)。

关于肝脏负载(它不仅适用于css)。

使用livereload。您需要下载Livereload 2并添加javascript文件到您的页面或使用Chrome扩展。

这个脚本是用来包含在你想要监控的网页中，像这样:

<script src="http://localhost:35729/livereload.js"></script>

LiveReload 2服务器监听端口35729，并通过HTTP提供liverload .js服务(除了在同一端口上使用web套接字协议)

一个稍微聪明一点的方法是使用当前页面的主机名，假设它是从同一台计算机提供的。这种方法可以在从网络上的其他设备查看网页时启用liverload:

<script>document.write('<script src="http://'
    + location.host.split(':')[0]
    + ':35729/livereload.js"></'
    + 'script>')</script>

然而,

位置。对于file: URLs, host是空的，所以我们需要对此进行解释:

<script>document.write('<script src="http://'
    + (location.host || 'localhost').split(':')[0]
    + ':35729/livereload.js"></'
    + 'script>')</script>

liverload .js找到一个包含.../livereload.js的脚本标签，并使用它来确定要连接的主机名/端口。它还可以理解查询字符串中的一些选项:host、port、snipver、mindelay和maxdelay。

从GitHub

关于修改Chrome devtools中的CSS。

花一分钟看Paul Irish的演示

Answer 2

也许它可以满足你的需求，因为我不知道你使用什么编辑器，有两个很好的嵌入实时编辑，是:括号IO(免费)和JetBrains WebStorm。如果你不想改变编辑器，就像Pinal说的，Livereload是一个很好的选择，但有时它的小错误，但它是一个很好的选择!

Answer 3

你可以使用Code Kit https://incident57.com/codekit/免费试用10天，或者你可以花29美元购买它，我认为它完全值得。你可以用火。应用程序也http://fireapp.kkbox.com/。Tincr也是一个很好的应用程序，你可以使用，我认为这是免费的http://tin.cr/。希望这对你有帮助!

Answer 4

你在chrome控制台看到任何错误吗?所有3个bookmarklet都可以在chrome 35.0.1916.153上正常工作。

这个变化可能来自你的站点服务器，例如一些服务器阻止带有附加参数的请求。在这种情况下，您需要修改bookmarklet以不添加它。