移動開發真機調試


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

一、使用 Weinre 調試

 

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

npm install -g weinre

  安裝weinre之后再設置監聽本機的ip:

weinre --boundHost xxxxxxxxxxx

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

  將界面底部的js文件插入到你的項目文件中去,在你的項目文件引入:

<script src="http:/閣下自己的ip:8080/target/target-script-min.js#anonymous"></script>

  刷新你的項目,可以在剛剛打開的界面,點擊第一行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開發者工具也是不錯的。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM