Vscode插件 livereload配合chrome扩展程序livereload实现网页自动刷新(保存时)

前段时间电脑系统坏了，重新装系统后便是繁琐的软件重装了（对于程序猿来说，开发环境才是大事），这不，重装vscode插件livereload时，竟然忘了它怎么用了！！！？于是有要百度一波，但是，查了好几个博客才解决了我的问题。。。怪自己记性不好啦。。。好的，进入正题。

• 第一步，下载并安装vscode插件livereload：

搜索插件livereload，选择第一个并点击安装，安装完成后点击重新加载

• 第二步，启动livereload  server：

同时按ctrl+shift+p,输入框内输入livereload，就会显示LiveReload:Enable/disable server，点一下就会开启这个服务（再点会关闭，所以如果遇到服务没有开启的问题可以再点一下试试）。

• 第三步，安装谷歌浏览器插件LiveReload：

谷歌浏览器网上应用商店搜索（科学上网，自行解决/嘿嘿，也可以百度这个扩展程序，很容易找到的）：LiveReload，安装下图中的扩展程序：

 

• 第四步，打开livereload插件设置，启用扩展程序和允许访问文件网站：

启用此拓展程序，此程序启用后浏览器右上角会多出一个图标：

开启允许访问文件网站（只有这样它才能检测到文件的更新）：

 

第五步，谷歌浏览器开启此服务：

点击下图的这个图标：如果中间的小圆圈被填充则说明开启成功

 

如果点击一下浏览器弹出下面的弹窗则说明Vscode中的 livereload 服务没开启，回头看看第二步：

 

第六步，没有了

好了，差不多就这么多了， 用了这个插件，就再也不用在每次查看html编写效果时手动刷新页面了，感觉方便清爽多了，祝大家编程开心。