前端实时可视化开发工具

朴灿烈づ我的快乐病毒、 2022-06-12 07:19 515阅读 0赞

前端实时可视化开发工具：liveStyle、liveReload、Broswer-Sync。

# 一、liveStyle #

![这里写图片描述][SouthEast]

如图，liveStyle支持三种文件。

需要安装两个插件：浏览器的插件，sublime编辑器中的livestyle插件。   
浏览器的插件可以通过[Chrome的网上商店][Chrome]安装。

\*\*注意：\*\*liveStyle主要针对样式的修改，实现浏览器和编辑器双向修改，不能修改HTML和[js][]文件。

# 二、liveReload #

![这里写图片描述][SouthEast 1]

liveReload监控所有文件的修改。样式文件、html文件、图片文件、js文件等的修改以及实时浏览器显示。

需要安装liveReload插件（在Chrome网上商店下载）和[Node.js][]中livereload插件

本质做了个F5操作。

# 三、Broswer-Sync #

![这里写图片描述][SouthEast 2]

本质是启动一个代理服务器，监听服务器变化。支持所有文件的实时监听。

不需要装服务器插件，只依赖于[node.js][Node.js]插件，要装Broswer-Sync插件，是一个局部的刷新。可以实现手机浏览器、PC浏览器等多个浏览器的同步，包括视图同步和交互同步。

要在前端项目文件下进行监控，如果在根目录下启动，会慢，因为监控的文件太多。

# 四、总结 #

![这里写图片描述][SouthEast 3]

转载自：http://blog.csdn.net/yangxingpa/article/details/71210190

[SouthEast]: /images/20220612/0b028fd7d2df4d2ca999c08878871645.png
[Chrome]: https://chrome.google.com/webstore/category/extensions?utm_source=chrome-ntp-icon
[js]: http://lib.csdn.net/base/javascript
[SouthEast 1]: /images/20220612/1535baf73c864300a159fc688b4c0574.png
[Node.js]: http://lib.csdn.net/base/nodejs
[SouthEast 2]: /images/20220612/238cd0ecca0e4e9f9c917ffbb51e4863.png
[SouthEast 3]: /images/20220612/82cd442ea2a140b9a8db792f0168a6aa.png

发表评论取消回复

表情：

评论列表（有 0 条评论，515人围观）

还没有评论，来说两句吧...

相关阅读

相关前端可视化开发-编辑器

draw.io 原型图设计编辑器：[https://github.com/jgraph/drawio][https_github.com_jgraph_drawio]

╰半夏微凉°/ 2022年11月27日 00:59/ 0 赞/ 202 阅读

相关前端实时可视化开发工具

前端实时可视化开发工具：liveStyle、liveReload、Broswer-Sync。一、liveStyle ![这里写图片描述][SouthEast] 如图

朴灿烈づ我的快乐病毒、/ 2022年06月12日 07:19/ 0 赞/ 516 阅读

相关 MongoDB可视化工具

软件名称为：Mongo Management Studio ![这里写图片描述][SouthEast] ![这里写图片描述][SouthEast 1] [SouthEa

梦里梦外;/ 2022年06月09日 14:23/ 0 赞/ 327 阅读

相关可视化前端测试

背景 > 相信进行过前端开发的同学都知道，前端测试不仅仅涉及到功能的测试，而且也需要考虑到界面样式测试、多浏览器兼容性测试、性能测试。本文主要讨论分析目前前端测试的现状，

心已赠人/ 2022年05月26日 05:38/ 0 赞/ 226 阅读

相关实时可视化开发工具

简介 LiveStyle LiveReload BrowserSync 简介 chrome应用商店无法访问，提供一个离线 `.crx` 下

落日映苍穹つ/ 2022年05月25日 02:42/ 0 赞/ 218 阅读

相关 Hive可视化工具

目前市面上的Hive可视化客户端工具，大都是C/S模式的，安装使用都不是太方便，目前有一款基于WEB的可视化工具TreeSoft，通过浏览器就可以访问使用了，并

妖狐艹你老母/ 2022年05月19日 06:13/ 0 赞/ 373 阅读

相关 React 可视化开发工具 shadow-widget 的非可视开发方法

Shadow Widget 提倡在可视设计器中开发用户界面，输出转义标签，而非 JSX。许多童鞋可能不知道 SW 同样支持用 JSX 设计界面，开发体验比原生 React 编程

忘是亡心i/ 2022年04月23日 17:56/ 0 赞/ 232 阅读

相关 kafak可视化工具

Kafka Web Conslole Kafka Manager KafkaOffsetMonitor kafka-eagle（用于报警，没有其他的功能

谁践踏了优雅/ 2021年12月21日 08:37/ 0 赞/ 408 阅读

相关 Redis可视化工具

Redis做为现在web应用开发的黄金搭担组合，大量的被应用，广泛用于存储session信息,权限信息，交易作业等热数据。Redis作为业界最好的缓存数据库，过去几年发展很快。

今天药忘吃喽~/ 2021年12月15日 22:43/ 0 赞/ 529 阅读

相关 svn 可视化工具

StatSVN很好的统计工具，能帮你统计团队成员各自的编写量，代码总数，提交情况，文件数量等情况，并且以html网页图表的方式发布统计结果。使用前提 Stat

逃离我推掉我的手/ 2021年06月24日 14:00/ 0 赞/ 680 阅读