刷新适用于最新 Chrome 的 CSS 书签？答案

【问题标题】：Refresh CSS Bookmarklet that works on latest Chrome?刷新适用于最新 Chrome 的 CSS 书签？
【发布时间】：2014-07-20 03:15:10
【问题描述】：

我正在开发一个网站，我希望在检测到 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，但如有必要，我会切换到另一个浏览器。

【问题讨论】：

标签： css google-chrome livereload

【解决方案1】：

你有两种方法：

编辑css文件并使用livereload在Chrome中自动重新加载
在 Chrome 中更改 CSS 并保存（不使用 IDE）。

关于 livereload（它不仅适用于 css）。

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

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

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

LiveReload 2 服务器侦听端口 35729 并通过 HTTP 提供 livereload.js（除了在同一端口上使用 Web 套接字协议）。

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

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

但是，对于 file: URLs，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 开发工具中更改 CSS。

只需带上迷你小车，观看 Paul Irish 的 demo

【讨论】：

正如我在问题中指定的那样，我无法更改我网站的 HTML。我的意思是javascript标签以及页面内容。实时重新加载似乎无法在这些限制范围内工作。
从控制台添加 javascript 文件...或在 Chrome 开发工具中更改 CSS
如果我必须在每个新页面的控制台中手动添加 javascript 文件，那么这将取消 CSS 刷新所节省的时间。

【解决方案2】：

也许它可以满足您的需求，因为我不知道您使用的是什么编辑器，所以有两个不错的带有嵌入实时编辑功能的编辑器，它们是：Brackets IO（免费）和JetBrains WebStorm。如果你不想像 Pinal 所说的那样更换编辑器，Livereload 是一个不错的选择，但有时它会产生一些小错误，但这是一个不错的选择！

【讨论】：

【解决方案3】：

您可以使用 Code Kit https://incident57.com/codekit/ 并获得免费试用并使用 10 天，或者您可以花 29 美元购买它，我认为它完全值得。您也可以使用 Fire.app http://fireapp.kkbox.com/。 Tincr 也是一款不错的应用程序，您可以使用，我认为这是免费的http://tin.cr/。希望这会有所帮助！

【讨论】：

【解决方案4】：

您在 chrome 控制台中看到任何错误吗？我在 chrome 35.0.1916.153 上的所有 3 个书签都可以正常工作。

更改可能来自您的站点服务器，例如，某些服务器使用附加参数阻止请求。在这种情况下，您需要修改书签以不添加它。

【讨论】：