移動web開發之移動端真機測試

小火柴的藍色理想發表於2016-05-20
Web

前面的話

　　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>

　　無需重新整理，移動端的網頁自動變化為如下顯示:

　　這樣，就可以開始輕鬆地測試移動端裝置了。

 

相關文章