我正在开发一个站点,我希望在检测到 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文件并使用
livereload
在 Chrome 中自动重新加载它 - 在 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
关于css - 刷新适用于最新 Chrome 的 CSS Bookmarklet?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23953275/