三個生產力工具：Browsersync, WhatFont 和 Alfred
來自： http://chinagdg.org/2016/02/browsersync-whatfont-alfred/
Browsersync
做 Web 開發的時候，我們做一些修改然后刷新頁面查看效果。 Browsersync 可以讓你省去后面那一步，只要修改網頁文件保存就可以，它會監控文件的變化(html/js/css)并自動刷新頁面，這樣就不用手動刷新了。Good！
圖片來自網絡
Browsersync 真正強大的地方在于跨設備同步。你可以用桌面、手機、平板等不同設備的瀏覽器同時打開你正在開發的網頁，其中任何一個頁面上的操作（如點擊、滾動、表單填寫和提交）會在所有其它頁面上自動同步！當然，同一個機器上的同一個瀏覽器或不同瀏覽器的多個頁面也可以。
圖片來自網絡
例如，你在兩臺電腦(Win和Mac)、Android 手機和 iPad 平板上同時打開指定的頁面，你所做的任何文件修改在這4個瀏覽器上都會自動刷新，在任何一個打開的頁面上滾動頁面或點擊鏈接跳轉，所有其它頁面上都會同時執行同一操作。這樣大幅提高了你在多設備、多瀏覽器上的開發和測試效率！
安裝和使用
1. 安裝
Shell
npm install -g browser-sync
npminstall -g browser-sync</div>
2. 啟用
Shell
browser-sync start --server --files "css/*.css"
browser-syncstart --server --files "css/*.css"</div>
上面的命令針對靜態網頁啟動了一個簡單的 web server ，并且會監控 css 文件的變化。如果是動態頁面則需要使用代理模式：
Shell
browser-sync start --proxy "myproject.dev" --files "css/*.css"
browser-syncstart --proxy "myproject.dev" --files "css/*.css"</div>
另外，Browsersync 可以和 Gulp 集成 或 Grunt 集成 。
啟動后的默認服務地址是：http://localhost:3000 或 http://your-ip:3000 ，使用瀏覽器打開該地址下的頁面即可。
http://localhost:3001 是 Browsersync 服務的配置頁面，可以設置同步選項、網速模擬等。
除了 Browsersync ，另外一個類似的工具是 LiveReload 。
WhatFont
如果你想知道頁面中某個位置使用的字體，試試 WhatFont 吧！它是一個 Chrome 擴展，鼠標點到哪里就能顯示該位置文字使用的字體。
Alfred
Alfred 是另一個 Mac 提高效率的好工具。它可以幫你快速打開某個程序、文件/文件夾、執行定制的搜索等。近幾年 Mac 系統自帶的 Spotlight 在這方面的功能也有了大幅提高。不過，Alfred 還有很多擴展的功能。
作者：韓國愷。本系列文章以 Addy & Matt 的系列視頻 Totally Tooling Tips 的內容為基礎重新整理而成，主要介紹一些(前端)開發者喜歡的工具和技巧。
Post Views: 18
除非特別聲明，此文章內容采用 知識共享署名 3.0 許可，代碼示例采用 Apache 2.0 許可。更多細節請查看我們的 服務條款 。
</div>