Web程序員開發App系列 - 調試Android和IOS手機代碼（補圖）

Web程序員開發App系列

1. Web程序員開發App系列 - 認識HBuilder
2. Web程序員開發App系列 - 申請蘋果開發者賬號
3. Web程序員開發App系列 - 調試Android和iOS手機代碼
4. Web程序員開發App系列 - 開發我的第一個App
5. 待續

 

目錄

1. 前言
2. 調試Android代碼
3. 調試iOS代碼
4. 准備開發App

 

前言

　　在App中代碼如果需要調試，就需要借助Chrome調試Android和Safari調試iOS手機，由於編寫的都是Html代碼，所以等下看到的界面都非常熟悉，對於Web程序員來說都是家常便飯，運行App也有許多方式，例如Android用虛擬機，iOS用Xcode的模擬器，還有用手機直接運行App，我花了半天時間研究Android虛擬機，成功運行后發現真的卡，卡，卡，完全不能用，所以選擇了真機運行，而且真機可以很好的看到觸摸的一些操作，所以接下來我都是用真機調試，iOS模擬器只是最后審核的時候截圖使用

 

調試Android代碼

　　Android的調試詳細介紹請參考：http://ask.dcloud.net.cn/docs/#http://ask.dcloud.net.cn/article/69，我這里只介紹真機調試，首先你需要一部Android手機，並且系統版本4.4以上，還需要Chrome瀏覽器版本30以上，然后開啟USB調試，怎么開啟大家可以根據自己的手機型號網上查找方法，講手機用USB連接到電腦

　　打開 HBuilder，選中你要運行的項目，點擊 運行-手機運行，在其中找到你的手機，點擊運行（如果沒有看到手機列表，請用手機助手安裝驅動）

運行后手機上會自動打開 App

然后打開你PC端上的Chrome瀏覽器，在地址欄輸入 chrome://inspect/#devices ，這里可以看到App中打開的所有頁面，此功能還可以調試手機自帶的瀏覽器內容，只要基於Chrome內核的都可以

 

 找到我們需要調試的頁面，點擊下面的 inspect 按鈕，(⊙o⊙)…你會發現一直出現一個白頁面，聰明的人應該知道，這是google的東西嘛，要准備梯子哦

 

搭好梯子后點擊 inspect 就會開始下載手機里對應的chrome調試工具，成功下載后會進入網頁調試，web開發者們應該非常熟悉這個頁面吧

只需要第一次搭梯子，因為已經下載到你本地了，重裝或重置chrome需要重新下載，如果你連接其他型號的手機也需要下載，因為版本不一樣

 

這里如果選中里面的html代碼，手機上也會出現網頁上一樣的藍色區域，和網頁調試是不是一樣呢？

 

調試iOS代碼

 　　調試iOS就有點麻煩了，有兩種方式可以調試，iOS模擬器和真機調試，用模擬器調試就很簡單了，直接用HBuilder Mac版運行模擬器就可以了，iOS模擬器比Android的虛擬機流暢許多，我這里將介紹真機調試

詳細的介紹請查看:http://ask.dcloud.net.cn/docs/#http://ask.dcloud.net.cn/article/143

　　首先按照這篇文章將你的代碼部署到Xcode上，http://ask.dcloud.net.cn/docs/#http://ask.dcloud.net.cn/article/41 ，由於我安裝了iOS Beta，在用正式版的Xcode真機調試的時候提示我不能運行，因為只有Xcode Beta才能調試iOS的Beta版本

 

(⊙o⊙)…，好吧，下載Xcode Beta，重新打開，切換設備到手機，然后點運行的圖標

 

 

如果連接手機的時候看到這里有進度條，不要馬上點運行的圖標，不然會提示手機正忙，無法進入調試，等進度條走完，如果卡住了就重新打開Xcode試試

 

 

等待的時候去開啟iOS設備的調試功能，在手機操作，打開“設置”程序，進入“Safari”->“高級”頁面開啟“Web檢查器”：

 

 

運行后會自動打開App，這個時候在Mac系統上打開 Safari 瀏覽器，點擊“Safari”菜單下面的“偏好設置（Preferences...）”，切換到“高級選項（Advanced）”：

 

 

在高級選項中勾上紅框中的內容，這個時候Safari的菜單就會多出一個開發，點擊可以看到我們的手機在里面，選中手機就可以看到我們的App頁面了

 

同樣，選中里面的html標簽會在手機上有相應的區域顯示，功能和Chrome類似，大家就可以調試了

 

 

手機中顯示的區域

 

 

准備開發App

好了，Mac下調試iOS也講完了，其實在windows下調試Android就足夠了，除非出現只有iOS的bug，而Android沒有的bug，就需要借助Mac調試了，我在開發中很少遇到不一樣的bug，基本上兩邊手機平台最后出來的效果都差不多，只遇到過一次js文件不加載的問題，只有iOS有，后來經過調試發現是文件路徑大小寫的問題

（注意：這里提示一下，iOS系統下引入的js和其他資源文件的路徑是區分大小寫的，所以在寫代碼的時候注意下哦，也就是文件名是有大小寫的，script 的src屬性必須一致）

我們已經掌握了調試的方法，接下來就可以開始開發App了，期待下一篇文章吧