前面的話
chrome的開發者工具可以很好地做好模擬工作，但畢竟模擬和實際還是有差別的。所以，真機測試是一定要做的，如何高效地進行真機測試呢。個人感覺，還是BrowserSync用得比較稱手。本文將詳細介紹如何應用BrowserSync進行移動端真機測試
特性
BrowserSync能讓PC、各移動設備上的頁面同時實時地響應文件的更改，而不用刷新操作。而且，當在其他一個設備上進行點擊等行為時，該行為也會同步到其他瀏覽器中
安裝
BrowserSync是基於Node.js的，是一個Node模塊，所以需要先安裝nodejs
【nodejs安裝】
雖然nodejs官網提供了node的msi文件，但本人在window7系統下多次嘗試，均無法安裝成功，且會有your system has not been modified...的提示。最終本人使用了另一種方法成功安裝了nodejs
【1】下載node.exe
【2】下載最新版本的npm zip格式壓縮包
【3】在硬盤某個位置，如D盤下建立一個文件nodejs，把上面兩個下載的東西都放在這里，npm要解壓
【4】配置兩個環境變量：一個是PATH上增加node.exe的目錄D:\nodejs，一個是增加環境變量NODE_PATH，值為D:\nodejs\node_modules
 |
 |
【5】安裝express：打開cmd命令行(在nodejs目錄下，先按住shift按鍵，再點擊右鍵，出現"在此處打開命令窗口"選項並點擊)，使用命令行定位到這Node目錄下，鍵入指令npm install express
【6】安裝完成后，在命令行里面輸入node -v如果輸出nodejs的版本則安裝成功
設置
nodejs安裝完成后，需要對BrowserSync進行些簡單設置，包括安裝與監聽
【1】BrowserSync安裝
打開一個終端窗口，運行以下命令：
npm install -g browser-sync
【2】BrowserSync監聽
files 路徑是相對於運行該命令的項目（目錄）。如果需要監聽多個類型的文件，需要用逗號隔開
browser-sync start --server --files "css/*.css, *.html"
【3】在nodejs目錄下新建一個index.html的文件，並設置如下代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div{ height: 100px; width: 100px; background-color: lightblue; } </style> </head> <body> <div>測試文字</div> </body> </html>
桌面端頁面打開如下：
[注意]如果網頁中顯示Cannot get/，是因為在項目目錄下找不到默認首頁index.html
移動端設置
若使用移動端則首先先保證移動端設備和桌面端設備處於同一局域網(一般地，都連入一個路由器即可)。而且，移動端無法訪問localhost，需要查找電腦的內網ip。通過在命令行中輸入ipconfig，查看ip地址為192.168.1.100。所以手機端訪問的地址為http://192.168.1.100:3000
則移動端顯示如下:
當把html文件修改為如下代碼時
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> html{ background-color: pink; } </style> </head> <body> <div>測試文字</div> </body> </html>
無需刷新，移動端的網頁自動變化為如下顯示:
這樣，就可以開始輕松地測試移動端設備了。