实时可视化开发工具

落日映苍穹つ 2022-05-25 02:42 206阅读 0赞

*  简介
 *  LiveStyle
 *  LiveReload
 *  BrowserSync

# 简介 #

*  chrome应用商店无法访问，提供一个离线 `.crx` 下载： [https://www.crx4chrome.com][https_www.crx4chrome.com]

<table> 
 <thead> 
  <tr> 
   <th align="center">方案</th> 
   <th align="center">安装和配置</th> 
   <th align="center">使用限制</th> 
   <th align="center">应用场景</th> 
   <th align="center">附加功能</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="center">LiveStyle</td> 
   <td align="center">chrome 扩展 / sublime 插件</td> 
   <td align="center">样式文件</td> 
   <td align="center">样式微调和重样式</td> 
   <td align="center">无</td> 
  </tr> 
  <tr> 
   <td align="center">LiveReload</td> 
   <td align="center">chrome 扩展 / sublime 插件</td> 
   <td align="center">任何文件，单向修改</td> 
   <td align="center">简单的web项目</td> 
   <td align="center">gulp、grunt支持</td> 
  </tr> 
  <tr> 
   <td align="center">BrowserSync</td> 
   <td align="center">nodejs npm</td> 
   <td align="center">任何文件，单向修改</td> 
   <td align="center">业务场景，响应式开发</td> 
   <td align="center">gulp、grunt、网络设置、交互同步</td> 
  </tr> 
 </tbody> 
</table>

# LiveStyle #

*  官网 [http://livestyle.io][http_livestyle.io]
 *  由于 Chrome 安全机制，不支持 `file://` 打开的页面
 *  安装 Chrome 扩展：[Emmet LiveStyle 1.0.8.crx][]  
    ![Emmet LiveStyle][]  
    ![这里写图片描述][20180507145644833]
 *  安装 Sublime Text 插件：LiveStyle  
    ![这里写图片描述][20180507150523180]

# LiveReload #

*  官网 [http://livereload.com/][http_livereload.com]
 *  Github 项目地址 [https://github.com/rehorn/chrome-live-reload][https_github.com_rehorn_chrome-live-reload]
 *  特性  
    
    
     *  只需要安装一个 chrome 插件，不需要特殊的服务器端支持
     *  启用实时更新模式后，能够自动重新载入 html/js/css 等资源更新
     *  不启用实时更新模式，也能够通过按 F9 来手动重新载入 css 文件
     *  支持本域和跨域资源的实时更新，可以通过配置项只监控本域资源更新
     *  支持重新载入页面的时候，保留页面滚动条位置
     *  页面的资源支持相对路径，绝对路径
     *  可以通过 F8 来启用【显示页面节点 id,class 信息】功能，便于开发过程中在编辑器快速定位
     *  提供启用Live Reload的页面管理界面
     *  能够通过配置选择监控的资源类型和频率

# BrowserSync #

[https_www.crx4chrome.com]: https://www.crx4chrome.com
[http_livestyle.io]: http://livestyle.io
[Emmet LiveStyle 1.0.8.crx]: https://www.crx4chrome.com/go.php?d=634&i=557&p=993&s=1&l=https://f.crx4chrome.com/crx.php?i=diebikgmpmeppiilkaijjbdgciafajmg&v=1.0.8
[Emmet LiveStyle]: /images/20220525/8d15a1256a61461da8adf0734160b685.png
[20180507145644833]: /images/20220525/9615ab71d4f84550a5d2f5fa33f24884.png
[20180507150523180]: /images/20220525/20fca887ca054ca3b4e5f63c0bcb7cdf.png
[http_livereload.com]: http://livereload.com/
[https_github.com_rehorn_chrome-live-reload]: https://github.com/rehorn/chrome-live-reload