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

時間 2019-11-09

標籤移動 web 開發測試欄目無線简体版

原文原文鏈接

顯示目錄

前面的話

　　chrome的開發者工具能夠很好地作好模擬工做，但畢竟模擬和實際仍是有差異的。因此，真機測試是必定要作的，如何高效地進行真機測試呢。我的感受，仍是BrowserSync用得比較稱手。本文將詳細介紹如何應用BrowserSync進行移動端真機測試css

特性

　　BrowserSync能讓PC、各移動設備上的頁面同時實時地響應文件的更改，而不用刷新操做。並且，當在其餘一個設備上進行點擊等行爲時，該行爲也會同步到其餘瀏覽器中html

安裝

　　BrowserSync是基於Node.js的，是一個Node模塊，因此須要先安裝nodejsnode

【nodejs安裝】chrome

　　雖然nodejs官網提供了node的msi文件，但本人在window7系統下屢次嘗試，均沒法安裝成功，且會有your system has not been modified...的提示。最終本人使用了另外一種方法成功安裝了nodejsexpress

　　【1】下載node.exenpm

　　【2】下載最新版本的npm zip格式壓縮包瀏覽器

　　【3】在硬盤某個位置，如D盤下創建一個文件nodejs，把上面兩個下載的東西都放在這裏，npm要解壓ide

　　【4】配置兩個環境變量：一個是PATH上增長node.exe的目錄D:\nodejs，一個是增長環境變量NODE_PATH，值爲D:\nodejs\node_modules工具

　　【5】安裝express：打開cmd命令行(在nodejs目錄下，先按住shift按鍵，再點擊右鍵，出現"在此處打開命令窗口"選項並點擊)，使用命令行定位到這Node目錄下，鍵入指令npm install expresspost

　　【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>

　　桌面端頁面打開以下：

移動端設置

　　若使用移動端則首先先保證移動端設備和桌面端設備處於同一局域網(通常地，都連入一個路由器便可)。並且，移動端沒法訪問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>