css - 刷新适用于最新 Chrome 的 CSS Bookmarklet？

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，所以我无法使用 livereload 应用程序。理想情况下，我会继续使用 Chrome，但如有必要，我会切换到其他浏览器。

Answer 1

你有两种方式:

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

关于 livereload(它不适用于 css only)。

使用livereload .您需要下载 Livereload 2 并将 javascript 文件添加到您的页面或使用 Chrome extension .

此脚本旨在包含到您要监控的网页中，如下所示:

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

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

一种稍微聪明的方法是使用当前页面的主机名，假设它是由同一台计算机提供的。当从网络上的其他设备查看网页时，此方法会启用 LiveReload:

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

但是，对于 file: URL，location.host 是空的，因此我们需要考虑到这一点:

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

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

来自 GitHub

关于在 Chrome devtools 中更改 CSS。

只需花一点时间观看 demo来自 Paul Irish