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

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

  • 第一步,下载并安装vscode插件livereload:

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

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

  • 第二步,启动livereload  server:

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

  • 第三步,安装谷歌浏览器插件LiveReload:

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

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

 

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

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

开启允许访问文件网站(只有这样它才能检测到文件的更新):

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

 

第五步,谷歌浏览器开启此服务:

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

 

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

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

 

第六步,没有了

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

你可能感兴趣的:(开发工具)