移動開發真機除錯

做移動開發大多數的時候跟手機介面打交道，也就是說你只能在電腦上開發寫程式碼，最終效果是確是在另外一個終端看到的。雖然各種瀏覽器為開發者提供了很多模擬手機裝置的功能，這些功能總體來說基本可以滿足我們對於除錯移動裝置的需求，比如露珠在之前向諸位介紹的手機開發者模式。但是模擬畢竟是模擬，它不能真正做到實現真機一樣的效果。所以，必須在想辦法在真實的機子上測試我們的程式碼最終的執行效果。辦法當然是有的，下面是露珠在開發過程中用到的若干真機除錯方法：

　一、使用 Weinre 除錯

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

安裝weinre之後再設定監聽本機的ip:

然後weinre會為你分配一個監聽的ip，copy之然後將其在瀏覽器中開啟,會看到如下介面:

將介面底部的js檔案插入到你的專案檔案中去，在你的專案檔案引入:

重新整理你的專案，可以在剛剛開啟的介面，點選第一行debug client user interface,進入上發現了一條新記錄，選中之。如果是多條記錄，你可以選中其中一條，然後切換到其他介面開始除錯專案:

接下來就可以愉快的開始真機除錯了:

weinre工具優點：

所有除錯工具中唯一不以其他第三方制定軟體為依賴的方式，這種方式的好處就是跨平臺，其次是跨瀏覽器，如果你是在微信或者其他phoneGap外殼方式上開發的，你就會知道，這個方式是比其他方式更有用。

weinre缺點：

在自己專案中引入js檔案，需要手動刪除，這對程式碼的控制和版本的控制造成了一定影響。頗為不便。但是最大的雞肋卻不是這個。weinre最大的雞肋是隻能除錯樣式和元素，js無法除錯！！是的，所以它基本上是一隻腿走路的。

 

二、UC開發者瀏覽器:

感謝國內還有如此良心公司，為移動開發者帶來的這款神器！UC瀏覽器在手機上佔有率國內來說還是蠻高的。要開啟除錯模式必須在手機上下載UC安卓版的開發版瀏覽器，也就是圖示帶一個小扳手的那個。然後在檢視你的手機IP.如果是在WI-FI連線模式下在瀏覽器中輸入你的手機ip+:9998，（PC和手機必須在同一個網段！）手機上的瀏覽器上會提示你是否開啟除錯模式，點選確認，就進入開發皮膚了。過程十分簡單;(原諒露珠今天沒帶手機，圖都是盜的):下面是進入介面展示

上圖都是你在開發者瀏覽器中開啟的介面，選擇一個進入開發模式吧！

UC手機開發工具的優點：

簡單，容易上手。只要求一個UC開發者瀏覽器，其餘的軟體不強制規定。不得不說國內的移動瀏覽器中UC走在了前面。

UC手機開發工具的缺點

依賴其他軟體裝置，開發者必須下載UC開發者工具。不跨平臺，無視了蘋果機。這種模式無法除錯微信或者其他app內建瀏覽器。

三、chrome真機除錯

chrome除錯其實跟UC差不多，步驟也比較簡單，不同的是UC可以在wifi下除錯，chrome不行，而且必須有硬體的接觸。首先確保手機上和PC機上裝有最新版本的chrome瀏覽器，然後將資料線將兩臺裝置連線起來。在PC機上開啟chorme，輸入chrome://inspect,

於是你就可以看到自己的裝置和開啟的網頁了,請再次原來露珠今天沒帶手機，給一張空圖:

裝置網址下出現inspect、reload、close 等選項，點選inspect會彈出一個視窗，閣下就可以在視窗中愉快地去除錯了。

Chrome手機除錯工具優點：

在熟悉的開發模式下除錯，操作比較簡單。個人覺得UC在這方面勝過chrome。可以跨平臺，在ios上也可以用。

Chrome手機除錯工具缺點：

有目共睹，比起UC來，它步驟比較繁瑣，不能wifi除錯，必須指定手機和PC瀏覽器的型別（都是chrome），這種模式無法除錯微信或者其他app內建瀏覽器。

 

四、Safari開發者工具：

露珠的手機是安卓系統（吊當機），pc是window系統（吊當機），所以無法用這種方式除錯iphone。但是隔壁老大用的都是蘋果產品，遇到iphone問題，也去那邊除錯了一下，發現蘋果系列做的還真是蠻不錯的。第四種方式首先得硬體條件是iphone和mac。很遺憾，window版的safari無法除錯iphone。過程也是比較簡單：

啟用功能：

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

mac端：Safari → 偏好設定 → 高階 → 在選單欄中顯示“開發”選單。

在 OS X 中啟動 Safari 之後，以 USB 電纜正常接入 iOS 裝置，並在此移動裝置上啟動 Safari。此時點選計算機上的 Safari 選單中的“開發”，可以看到有 iOS 裝置的名稱顯示，其子選單項即為移動裝置上 Safari 的所有標籤頁，點選任意一個開始除錯。

蘋果系列優點：

便捷，簡單，高階大氣上檔次，可以除錯外殼包裹的瀏覽器如微信。

蘋果系列缺點：

不用說，裝置限嚴重依賴其公司產品，不給沒錢買它產品的人活路啊。

五、小結

移動開發趨向主流，一般來說有瀏覽器的模擬功能可以搞定百分之九十的活。但是不排除很多機型和瀏覽器版本出現的各種樣式，程式碼相容問題。掌握一門真機除錯在移動開發過程中是非常必要的。就個人來說，露珠還是比較喜歡最後一種方式，因為露珠開發的微信專案，以微信內建瀏覽器核心為最終標準，這時候除錯當然選蘋果系列除錯最好了。露珠買不起蘋果產品，看到老大用來除錯的時候還是頗為羨慕。當然，UC開發者工具也是不錯的。