好久都沒有發表過日志了，反正近期項目也已經接近尾聲了，那么是時候該總結一下在項目中用到的技術了，請看：
這里先廢話幾句，我們現在的開發模式是這樣子的：
先把本地的網頁上傳到遠程服務器（因為好多設備都要去訪問一個固定的地址），然后將網址輸入到各個測試機的測試瀏覽器里面手動打開(或者使用瀏覽器插件等，生成二維碼掃一下）。然后手機開始下載頁面，需要等待下載。觀看效果進行測試，每個測試機都要操作一遍。測試其他網頁的時候，每個測試機重新輸入網址、刷新。如果代碼有修改，需要重新上傳服務器進行刷新。
但是我希望是這樣子的：
在我的前面有兩顯示器，一邊是IDE寫代碼，一邊是瀏覽器我正在開放的應用，此時桌上還有調試機，一般調試機越多表明你們公司越豪（牢騷一句而已不要在意）。現在我寫了一段代碼，CTRL+S后，接着你的手機和另一個顯示器里的應用，就變成了更新后的效果。想象一下，PC和所有的手機、平板都同步變化，是不是像在看美國大片。其實就是在開放中少按F5刷新而已，但是效率提高了啊。
作為一個苦逼的前端程序猿，那么在實操過程中不可避免的會經常對自己的項目進行一系列的模擬測試，PC端就不多說了哈，這里主要是說一下在Phone進行測試，我們都知道在手機端進行測試的方法有很多種，我會把我用過的方法都一一列在下面：
1、安裝node.js
browsersync是基於nodejs 的所以首先安裝nodejs。這里是node官方網站 請猛撮我 安裝自己系統相應的安裝包。
2、安裝 BrowserSync
windows 安裝指令: npm install -g browser-sync /*-g 是指安裝到全局環境中 */
mac安裝指令: sudo npm install -g browser-sync
3、配置中請等待...（第一次可能會等待1-2分鍾 以后就會很快了）
當出現這個界面的時候表示你已經到成功家門口了，但是還需要一小步操作。
如何使用
來舉一個完整的栗子（前提是環境已經搭建好）：
-
第一步進入你項目的根目錄：
C:\Users\Administrator>cd D:\workspace\advert\我的項目PS：cd 命令提示符可以快速的輸入系統路徑 注意后面有一個空格哈 后面就是你的項目具體所在的路徑回車就好了 在等待5-10秒的樣子 就會自動啟動BrowserSync插件 然后會反饋給你當前電腦的IP地址加上一個端口號 下方已用紅色字體注明 你就可以直接使用這個地址 在手機瀏覽器輸入 你就會發現原來手機和電腦同步是這么簡單。 -
第二步啟動BrowserSync
D:\workspace\advert\我的項目>browser-sync start --server --files "**"下面是反饋結果：
[BS] Access URLs: ------------------------------------ Local: http://localhost:3000External: http://10.10.12.77:3000 ------------------------------------ UI:http://localhost:3001 UI External: http://10.10.12.77:3001
以上是第一種方法，這種方法相對來說步驟復雜一點，其實好好看一下，也沒那么復雜是吧，它最大的優點是可以實時同步，你在手機端的操作，電腦端會同步操作，小小的一個栗子：滑動手機端的縱向滾動條，電腦端也會縱向滾動哦。如果你面前有十幾台甚至幾十台的PC，你只需要一部Phone就可以讓這些PC同步執行 是不是像看電影一樣 想想都好炫啦 。
第二種：可以借助 hbuilder這個編譯器來實現手機測試
hbuilder是一個最幾年興起的一個比較熱門的一個編譯軟件，當初我第一個手機APP就是用這個軟件編寫的，其中的MUI框架也是相當牛逼啊，感興趣的同學抽時間可以去hbuilder的官網看看 里面的方法都有例子非常簡單的 鏈接http://www.dcloud.io/
好啦不BB啦，直接切入主題：
打開 hbuilder編譯軟件，在軟件的上方有個菜單欄，菜單欄中選擇調試----->真機調試 (需要用手機數據線鏈接電腦，並打開手機的調試模式，軟件會自動搜索，搜索完成后 會顯示當前手機然后選擇 手機會自動打開項目 ，有的同學可能即使打開了調試模式也鏈接不成功，可能是缺少手機驅動，這時候你可以下載一個360手機管家，它會自動下載安裝驅動，完成后也就OK啦)。
這種方法不能實現PC和Phone同步，但是測試項目還是綽綽有余了哈 麻煩的是需要鏈接USB 要是忘帶了 豈不是完蛋啦，別着急 還有下面一種方法，LOOK:
第三種：草料二維碼
二維碼這個東西現在可謂是無孔不入，什么東西都可以用一個二維碼表示，更何況一個小小的HTML頁面呢 是吧
打開瀏覽器輸入http://cli.im/ 跳轉到草料二維碼首頁 在導航欄中點擊 產品和解決方案 這個按鈕 會出現一個下拉框如圖：
選擇瀏覽器插件 會跳轉到下載頁面 把這個插件下載好之后 通過谷歌瀏覽器 安裝就可以了 安裝好后 插件會顯示在瀏覽器的右上角 如圖：
點擊插件按鈕 即可生成當前頁面的二維碼信息 手機打開瀏覽器 （當然必須是要有帶掃描二維碼功能的瀏覽器） 掃描一下就可以在手機上看到當前頁面在手機上的展示效果了 這種方法是最簡單的 掃一掃就完事了 ，以上就是我在整個項目中調試的方法，還不知道的同學，請好好看看，絕對無害的。