學習前端的html.css 實時的視覺化除錯，方便開發與學習。我們先進行幾個工具的對比。
livestyle 只能實時同步css 檔案，不能同步html檔案。
livereload 簡單的web的專案開發。
browsersync 比前兩個都比較全面一點，這次我們重點介紹 browsersync 結合sublime 3環境的配置進行練習。
配置browsersync 首先需要安裝node.js 安裝鏈結
安裝流程自己檢視。
安裝完成node.js後，進行browsersync的安裝
您可以選擇從node.js的包管理（npm）庫中 安裝browsersync。開啟乙個終端視窗，執行以下命令：
npm install -g browser-sync
啟動 browsersync
乙個基本用途是，如果您只希望在對某個css檔案進行修改後會同步到瀏覽器裡。那麼您只需要執行命令列工具，進入到該專案（目錄）下，並執行相應的命令：
靜態**
如果您想要監聽.css檔案, 您需要使用伺服器模式。 browsersync 將啟動乙個小型伺服器，並提供乙個url來檢視您的**。
// --files 路徑是相對於執行該命令的專案（目錄）
browser-sync start --server --files "css/*.css"
// --files 路徑是相對於執行該命令的專案（目錄）
browser-sync start --server --files "css/*.css, *.html"
// 如果你的檔案層級比較深，您可以考慮使用 **（表示任意目錄）匹配，任意目錄下任意.css 或 .html檔案。
browser-sync start --server --files "**/*.css, **/*.html"
// 監聽css檔案
browser-sync start --server --files "css/*.css"
// 監聽css和html檔案
browser-sync start --server --files "css/*.css, *.html"
1.啟動後報錯，開啟localhost：3000，提示cannot get
沒有定義啟動監控檔案。
browser-sync start --server--files "d:/web" "**/*.css"，*.html"
d:/web 目錄下一定有你需要監控的檔案，
前端實時視覺化開發工具
用法 首先安裝谷歌外掛程式livestyle，建議掛vpn，到谷歌商店裡搜 然後安裝sublime外掛程式，方法如下 進入sublime txt shift ctrl p 輸入 pcl 選擇 install package 安裝外掛程式 稍等會就會出現選擇框，輸入你要安裝的外掛程式名稱 等待安裝完成...
前端實時視覺化開發工具的使用
一 livestyle livestyle 是針對樣式的實時工具,包括css less sass，不能修改html和js檔案。目前只適用於google chrome和sublime text，如果你使用的是其他編輯軟體的話就不一定那麼好用了 二 livereload 相比較livestyle 而言，...
1 tkinter視覺化開發工具
好吧，那咱就自個兒個視覺化開發工具寫總行吧，經過一下午的奮鬥，第一代誕生了，嘗試了一下，簡直是歪瑞古德啊！我建議各位朋友如果對在學tkinter，同時有一定興趣，可以根據下面的一些教程，自己開發乙個tkinter視覺化工具出來吧。方法詳解 widget.keys 返回由控制項所有屬性名，與widge...