移動端前端開發真機調試實踐

移動端開發的經驗比較少，以前作過一點移動端的頁面，都沒有好好總結經驗教訓。移動端佈局技巧性比較強，借最近摔的坑，記錄一下工具和技巧。

工具篇

Chrome模擬器

首先是chrome的device model,我目前使用的chrome爲當前最新的38.0.2125.122版本。沒升級的建議升級下chrome，最新版本從界面上來看很是美觀，並且之前從Emulating入口進入，
如今能夠直接經過手機icon進入，更加快捷。
移動端調試時，若是將調試框放在下面，整個移動端界面就會被壓縮。筆者以前一直找不到將調試欄移動到右邊的方法，谷歌搜索了好久才明白了方法。
鼠標長按右上角Dock to the main window，將會出現出現右側佈局框的按鈕，該細節隱藏太深！簡明教程以下：

響應式佈局

我採用的方法是rem爲全部長度高度、字體大小的單位。
首先設置字體大小爲10px,即1rem = 10px;

html{
    font-size: 62.5%;
}

可是問題來了，在chrome下，1rem顯示的字體大小永遠爲12px！這是由於chrome默認最小字體大小爲12px，因此對於低於12px的字體，chrome都作了1rem = 12px的處理。
解決方法：進入chrome 設置->顯示高級設置->網絡內容->自定義字體->最小字號，調整爲10px,這樣世界一下明朗了。

Weinre測試安卓真機

Weinre能夠方便地查看PC端的頁面在手機端的效果，以及在PC端調試查看手機端的效果。它使用的前提是保證PC和手機在同一局域網內。
個人電腦是Mac,只在Mac上作了測試,具體測試步驟是：

• 首先安裝Weinre

  sudo npm install -g weinre

• 在本地開啓一個監聽服務器
  mac下須要執行命令 ipconfig getifaddr en0

• 指定使用當前機器的 ip 以供移動設備訪問使用
  經過ipconfig，知道個人電腦ip爲192.168.1.103，在命令窗口下執行

  weinre --boundHost 192.168.1.103

weinre默認監聽8080端口,在pc上打開連接http://192.168.1.103:8080/

將會看到下面的界面

看到這個界面後，你能夠調試本身本地的頁面也能夠調試外網的頁面

調試本身本地的頁面

好比說，我本地有這麼個頁面，想在真機上看下實際效果。

具體操做步驟爲：

• 一、引入上圖中的外鏈js

• 二、將本地頁面連接的localhost修改成局域網ip，個人ip爲192.168.1.103，故我須要調試的頁面打開方式爲http://192.168.1.103:3000/index

• 三、打開手機瀏覽器，訪問http://192.168.1.103:3000/index，將在手機上看到PC端的網頁

• 四、進入http://192.168.1.103:8080/client/#anonymous
  選中須要調試的頁面，這裏我選擇http://192.168.1.103:3000/index這一頁面，此時選擇的連接將被高亮設置。

選擇Elements,在這裏選中元素，好比我選擇ul這一節點，將在手機上看到ul的元素被選中了。

調試外網頁面

由於不是本身本地或者本身寫的頁面，沒法手動在本身的html文件里加入<script src="http://192.168.1.103:8080/target/target-script-min.js#anonymous"></script>這種target script.
但咱們能夠經過代理服務器主頁【Target Bookmarklet】一節中 bookmarklet 來實現。

• 一、在手機瀏覽器書籤地址欄加入這段代碼

javascript:(function(e){e.setAttribute("src","http://192.168.1.103:8080/target/target-script-min.js#anonymous");document.getElementsByTagName("body")[0].appendChild(e);})(document.createElement("script"));void(0);

• 二、在http://192.168.1.103:8080/client/#anonymous選中百度的連接
• 三、便可在Elememts下調試效果
  
  在PC上改變元素的樣式在手機能夠看到元素樣式的改變，console功能均可以使用。這裏再也不一一演示。

UC開發版測試安卓真機

• 一、在Android設備上安裝UC瀏覽器開發版，進入下載頁
• 二、獲取Android設備的IP
  好比個人小米2A，獲取方式爲設置->WLAN->高級設置->IP地址，個人IP爲192.168.1.102

• 三、用和手機處於同一網段的PC或MAC訪問步驟2得到的IP後加上 :9998，好比我須要進入192.168.1.102:9998
  
• 四、打開UC開發版安卓客戶端，選擇「容許」，將在PC上得到這樣的界面

• 五、在http://192.168.1.102:9998/裏選擇站點，進入後調試元素，在UC開發版手機端將看到變化的效果

注意，調試本地localhost路徑的頁面，只須要在手機瀏覽器裏將localhost改爲局域網IP。

本文來自移動端前端開發真機調試實踐 和 移動端佈局實踐 的合併版