网页自动刷新插件LiveReload

最新推荐文章于 2025-06-19 16:48:26 发布

heyneo

最新推荐文章于 2025-06-19 16:48:26 发布

阅读量5.8k

点赞数

CC 4.0 BY-SA版权

分类专栏：工具文章标签： LiveReload 自动刷新

本文链接：https://blog.youkuaiyun.com/whoami021/article/details/19903769

工具专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一个提高网页开发效率的工具LiveReload。通过该工具，开发者可以在文件保存后自动刷新浏览器预览页面，无需手动刷新。文章详细介绍了LiveReload的安装步骤及两种监听网页文档变化的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

网页开发者一个头痛的问题是每次修改完网页之后都要到浏览器里刷新才能看到效果，这样子效率实在是不高。

还好Firefox有一个自动刷新的插件LiveReload，修改保存后网页就会自动更新了。

好，接下来看怎么安装和使用LiveReload。这是LiveReload的主页：http://livereload.com/。

我用的是Windows，下面就Windows来讲。

首先，下载安装LiveReload的安装包http://download.livereload.com/windows/LiveReloadSetup.exe；

启动LiveReload后，往里面添加你的网页所在目录；

LiveReload提供两种方式监听网页文档的变化：

1.在网页</body>标签之前添加一段代码

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

2.在浏览器中安装LiveReload插件

选择哪一种看个人喜好了，不过第二种还是方便一点。

然后在浏览器中打开网页，选择第二种方式的读者记得启动浏览器的LiveReload插件，这其实就是在网页文档中添加那段代码。