页面实时刷新调试工具 liveReload

我们在写页面时，要不断的保存并刷新浏览器才能看到最新的结果，比较麻烦。现在介绍一款只需按下保存按钮而不用去需要刷新浏览器就可以看到实时页面的工具-liveReload，尤其适合拥有双显示器的高富帅开发童鞋。 官方网站： livereload.com 首先我们需要安装liveReload的工作环境，下载地址： windows运行环境： Try LiveReload 0.8.4 Alpha （Linux或者Mac环境的童鞋自行前往官网下载） 以在windows开发环境为例，先安装liveReload的运行环境。双击图标 ，windows运行环境需要.NET4.0框架的支持，点击accept会自动下载安装，如图：

.NET4.0组件下载完成后点击install，它会自动下载需要的liveReload文件，如图：

同样下载好以后会自动安装并配置文件，等待它配置好后是下面的界面：

接下来是安装浏览器插件，以chrome和firefox为例，官方地址： browser extensions。直接下载： chrome extensions   Firefox extensions，安装好以后，浏览器中的扩展插件如下图：

（左边是Chrome插件，右边是Firefox插件）

给浏览器安装插件想必难不到大家，接下来就是配置我们的工作目录，让它们运行起来了。首先确保你的开发目录在本地的服务器环境可以访问到，我本地使用的是xampp的Apache来当做服务器环境，服务器的跟目录指向 E:/xampp/htdocs。 第一步、在liveReload中点击add，会让你选择文件夹，这时候我们要把这个文件夹设置为服务器环境的根目录，我这里是E:/xampp/htdocs，你需要实现无刷新查看的页面文件等资源都需要放在这个目录下面。 第二步、在右边的Site UrL(s)里填上你的本地服务器地址，我使用的是80端口，所以直接填了http://localhost/。下面的Insert this tag before </body> or install borwser extensions意思是在页面里添加一段JS或者安装浏览器插件，我们之前已经安装了浏览器插件，这里可以忽略，或者你可以尝试使用JS来实现。

第三步、在页面创建一张包含内容的页面，例如：test.html。在浏览器中访问http://localhost/test.html文件，假如之前你的配置成功，那么点击浏览器的对应插件会发生变化，表示liveReload运行成功并且可以使用了，对应状态如下图：

（左边是Chrome插件，右边是Firefox插件）

最后，编辑你的文件并保存，去看看两个浏览器发生了什么变化，是不是不用去手动刷新它们就显示了你最后保存的内容。所以说这个工具对于有多屏幕的高富帅那是相当给力啊，一个屏幕放一个浏览器，页面编辑后保存，各个屏幕实时同步，不用去刷新了，是不是很霸气。

转载于:https://www.cnblogs.com/iancj/archive/2013/03/29/3652874.html