移動端前端開發真機調試攻略

標籤：

移動端前端開發真機調試攻略

一、IOS 移動端 （Safari開發人員工具）

手機端：設定 → Safari → 進階 → Web 檢查器 → 開。

mac端：Safari → 喜好設定 → 進階 → 在功能表列中顯示“開發”菜單。

在 OS X 中啟動 Safari 之後，以 USB 電纜正常接入 iOS 裝置，並在此行動裝置上啟動 Safari。此時點擊電腦上的 Safari 菜單中的“開發”，可以看到有 iOS 裝置的名稱顯示，其子功能表項即為行動裝置上 Safari 的所有標籤頁，點擊任意一個開始調試。

便捷，簡單，還可以調試外殼包裹的瀏覽器如。

備忘：順便提一下，要調試不同版本的ios，可以進xcode 進行下載不同的系統包（當然是在沒有裝置的情況下，土豪略過）

二、安卓移動端

1、chrome 調試方法

首先確保手機上和PC機上裝有最新版本的chrome瀏覽器，其次是將手機的開發人員選項開啟並允許調試，然後將資料線將兩台裝置串連起來。在PC機上開啟chorme，輸入chrome://inspect ，然後在手機上開啟chrome，然後手機會彈框詢問是否允許調試，當然確定啦。有時候手機鎖屏會斷開，請拔掉usb重來。

點擊inspect開啟DevTools後，你可以選中頁面中的DOM元素，同時裝置中對應元素也高亮顯示，也可使用DevTools中的Inspect Element 選中目標元素，可以即時與行動裝置頁面互動，方便的定位問題所在，進行代碼調試，就能像pc端一樣愉快的玩耍了。如果有問題，請檢查chrome版本。

chrome的調試一般只可以調試chrome頁面，但是其官方文檔說還可以調試WebViews：

“On your computer, the chrome://inspect page displays every connected device, along with its open tabs and debug-enabled WebViews.”

需要說明調試WebView需要滿足安卓系統版本為Android 4.4+，並且需要再你的APP內配置相應的代碼，在WebView類中調用靜態方法setWebContentsDebuggingEnabled，如下：

if (Build.VERSION.SDK_INT >=Build.VERSION_CODES.KITKAT) {     WebView.setWebContentsDebuggingEnabled(true);  }

以上配置方法適用安卓應用內所有的WebView情形。

安卓WebView是否可調試並不取決於應用中manifest的標誌變數debuggable，如果你想只在debuggable為true時候允許WebView遠端偵錯，請使用以下程式碼片段：

if (Build.VERSION.SDK_INT>= Build.VERSION_CODES.KITKAT) {     if (0 != (getApplicationInfo().flags &=ApplicationInfo.FLAG_DEBUGGABLE{        WebView.setWebContentsDebuggingEnabled(true);    }  }

我這裡唯寫了個大概，如果有其他問題或者欲查看詳細文檔，看下面連結（自備梯子）：

https://developer.chrome.com/devtools/docs/remote-debugging

注意：同樣的你也可以在電腦上裝安卓的虛擬機器，推薦Genymotion ，一樣的，想測什麼版本，就自己下rom ，當然土豪當我沒說。

2、UC開發人員瀏覽器

由於不推薦移動端使用UC（大家應該自覺抵制移動端毒瘤），所以我只簡單說一下，如果是在有興趣，請自行查看：http://www.uc.cn/business/developer/

它的調試方法與chrome差異不大。

3、使用 Weinre 調試

該方法是比較老的一種方法，對於其他的調試方法來說屬於刀耕火種型的。weinre是一個調試包，本身提供一個JavaScript，需要你在專案檔中加入該js。首先安裝Weinre，我們用nodejs安裝之，使用-g全域命令，以便可以在各個目錄下訪問：

npm install -g weinre

安裝weinre之後再設定監聽原生ip:

然後開啟返回的地址的說明文檔，然後把返回的js寫入到調試的文檔中，注意我箭頭所指向的地方。

這樣訪問頁面的時候，載入這個 JS，就會被 Weinre 監聽到進行控制。

小提示：這個 JS 後面的 #anonymous 起到一個標識作用，為了區別，我們可以將其修改成 #test 放到頁面中。這時候，我們的 Inspect 面板的地址就不是 http://172.16.0.2:8080/client/#anonymous 了，而是 http://172.16.0.2:8080/client/#test 。

當我們訪問頁面的時候，就會出現在監聽列表中，如果有多個網頁，你可以從列表中選擇一個。然後就可以使用後面的 Elements、Console 等面板來進行調試操作了：

Weinre 非常靈活，只需要在頁面中載入這個 JS，然後訪問即可，因此 WebView 可以用這種方法調試，一些低版本的 Android、iOS 也可以支援，Window Phone 也是可以用的。在調試行動裝置時你可能需要在本地搭建一個區域網路 IP 的伺服器，將裝置與本機網路連接成一個區域網路，用行動裝置訪問這個網頁即可。

當然 Weinre 也不是萬能的，相比 Chrome 的調試工具，它缺少 JavaScript debug 以及 Profiles 等常用功能，但是它相容性強，可以實現基礎調試功能。

4、mihtool 測試

MIHTool 是國人開發的，基於 Weinre，用於 iOS 裝置的前端開發測試。

與Weinre 的調試方式大體一樣，即開啟一個伺服器，然後將 JS 插入到頁面中，訪問進行調試。

MIHTool 將這個過程簡化了，它是一個 APP，可以直接安裝到你的 iOS 裝置裡面，然後內建一個簡單的瀏覽器可以開啟你的測試頁面，當它開啟時，會自動向頁面中插入 Weinre 的 JS，並告知 Weinre 控制台 URL 等資訊，讓你可以訪問進行調試。

它還提供了一個公用的 Weinre 調試服務，產生類似 http://i.mihtool.com/dev/client/#AwAj 這樣的連結，開啟即可調試，非常方便，就是有些卡。

5、行動裝置線上測試

移動端裝置如此之多，小公司或者團隊，沒有這麼多資金和精力購買如此多的測試裝置進行測試。於是就有人買了這些裝置，串連起來，提供線上調試服務。

一般就是他的真實手機裝置開啟，然後截屏出來供預覽。

比如：https://www.browserstack.com 等，當然一般比較卡。

（話說這種貌似可以刷一點pv和uv出來。。。）

三、總結

調試方法很多，層出不窮，關鍵是要看自己是否順手和熟練，關鍵在於按時按量的完成開發工作單位。

關鍵在於平時多積累跨坑姿勢，少寫一點不相容的代碼，調試就舒心一點。

如果這還不滿足的話，可以查看更多資料：
移動端前端開發調試： http://yujiangshui.com/multidevice-frontend-debug/
移動開發真機調試： http://www.cnblogs.com/constantince/p/4711098.html
remote_inspect_web_on_real_device： https://github.com/jieyou/remote_inspect_web_on_real_device
remote-debugging： https://developer.chrome.com/devtools/docs/remote-debugging
移動端Web開發調試之Chrome遠端偵錯(Remote Debugging)：http://blog.csdn.net/freshlover/article/details/42528643

安成健

2015/11/3 於百詞斬

－－－－－－－－－－－－－－補充部分－－－－－－－－－－－－－－－

很多朋友再說為什麼不寫Browser-sync，還有給差評的，說實話吧，我之前不瞭解那個東西。花了點時間看了一下，找到了他們的官網：http://www.browsersync.io/ 覺得還挺有趣的哈。

然後就用了，覺得還行，真的會省很多工夫，入門也快，差不多就5分鐘快速入門，前端的輪子都這樣。。。

1、首先安裝 BrowserSync

npm install -g browser-sync

2、啟動 BrowserSync，原理應該是那種檢測檔案變化，然後在服務端 websocket 通知瀏覽器變動，再載入新的變動檔案，在不支援websocket 的瀏覽器上就輪訓服務端的變化，在載入新檔案。我只是簡單的抓包看了下，也不知道說對了沒有。233

此時分兩種情況，一種是靜態：
監聽css檔案

browser-sync start --server --files "css/*.css"

監聽css和html檔案

browser-sync start --server --files "css/*.css, *.html"

二種是動態：
主機名稱可以是ip或網域名稱

browser-sync start --proxy "主機名稱" "css/*.css"

然後就上手了啊，就這麼簡單。。

還有gulp 配合哦。具體就看文檔了：http://www.browsersync.io/docs/gulp

BrowserSync 自身整合了一些工具，比如實用的wiener 等，還有布局陰影等工具，確實方便了不少。 現在這麼多工具，我更推薦BrowserSync ，確實很好用。

移動端前端開發真機調試攻略