webapp 開發調試測試方法總結

很久都沒有發表過日誌了，反正近期項目也已經接近尾聲了，那麼是時候該總結一下在項目中用到的技術了，請看：

這裏先廢話幾句，咱們如今的開發模式是這樣子的：

先把本地的網頁上傳到遠程服務器（由於好多設備都要去訪問一個固定的地址），而後將網址輸入到各個測試機的測試瀏覽器裏面手動打開(或者使用瀏覽器插件等，生成二維碼掃一下）。而後手機開始下載頁面，須要等待下載。觀看效果進行測試，每一個測試機都要操做一遍。測試其餘網頁的時候，每一個測試機從新輸入網址、刷新。若是代碼有修改，須要從新上傳服務器進行刷新。

可是我但願是這樣子的： 

在個人前面有兩顯示器，一邊是IDE寫代碼，一邊是瀏覽器我正在開放的應用，此時桌上還有調試機，通常調試機越多代表大家公司越豪（牢騷一句而已不要在乎）。如今我寫了一段代碼，CTRL+S後，接着你的手機和另外一個顯示器裏的應用，就變成了更新後的效果。想象一下，PC和全部的手機、平板都同步變化，是否是像在看美國大片。其實就是在開放中少按F5刷新而已，可是效率提升了啊。  

做爲一個苦逼的前端程序猿，那麼在實操過程當中不可避免的會常常對本身的項目進行一系列的模擬測試，PC端就很少說了哈，這裏主要是說一下在Phone進行測試，咱們都知道在手機端進行測試的方法有不少種，我會把我用過的方法都一一列在下面：

一、安裝node.js

browsersync是基於nodejs 的因此首先安裝nodejs。這裏是node官方網站 請猛撮我 安裝本身系統相應的安裝包。

 

二、安裝 BrowserSync

windows 安裝指令: npm install -g browser-sync /*-g 是指安裝到全局環境中 */ 
mac安裝指令: sudo npm install -g browser-sync 

三、配置中請等待...（第一次可能會等待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/ 跳轉到草料二維碼首頁   在導航欄中點擊  產品和解決方案  這個按鈕  會出現一個下拉框如圖：

選擇瀏覽器插件  會跳轉到下載頁面  把這個插件下載好以後  經過谷歌瀏覽器  安裝就能夠了  安裝好後 插件會顯示在瀏覽器的右上角  如圖：

點擊插件按鈕 便可生成當前頁面的二維碼信息  手機打開瀏覽器   （固然必須是要有帶掃描二維碼功能的瀏覽器）  掃描一下就能夠在手機上看到當前頁面在手機上的展現效果了  這種方法是最簡單的  掃一掃就完事了 ，以上就是我在整個項目中調試的方法，還不知道的同窗，請好好看看，絕對無害的。