什么是前端实时可视化?其实就是你在编辑器里改变代码,浏览器自动更改,不用你f5刷新;我这里推荐2款:
1.livestyle——只限于改外部css文件的工具;
用法:
首先安装谷歌插件livestyle,建议挂vpn,到谷歌商店里搜
然后安装sublime插件,方法如下:进入Sublime txt; shift+ctrl+p 输入“pcl“ 选择:Install Package(安装插件); 稍等会就会出现选择框,输入你要安装的插件名称;等待安装完成;安装完成后重启Sublime txt就ok了;
注意:如果第一步错误的话,先升级插件;
进入Sublime txt; shift+ctrl+p 输入“upgrade packages”后回车就可以升级所有插件了;
Sublime txt插件网址:https://packagecontrol.io/
最后把谷歌浏览器的livestyle拓展插件的开关打开,这样改变编辑器的样式代码,网页就会更改的,这种方式还可以支持双向更改,也就是说你浏览器改动,编辑器也会改,在拓展插件哪里设置即可
2.browser-sync——适用于任何修改(html,css,js等等)
用法:
首先安装node.js,在执行这条命令全局安装browser-sync
npm install -g browser-sync
然后在你文件目录下执行(**是更改所有文件)
browser-sync start --server --files "**" //适用于静态文件
或者
browser-sync start --proxy "主机名" "**" //适用于动态文件,如php等
他就会以http://localhost:3000/来启动页面了。这时你改动代码试试效果吧
启动的时候你会看到一个http://localhost:3001/的网址,这是browser-sync的设置页面,可更改网速,同步,远程调试等等;
browser-sync工具中文地址:http://www.browsersync.cn/
3.除了这2种还有一种,叫livereload,个人不喜欢用,安装比其他2个复杂,我不推荐;
下面我们来看看3种的对比: