#代碼調試與兼容性測試
---
對于移動端，調試代碼一直是一個比較麻煩的問題，現在常用的調試方式，有以下幾種：
對于純前端的代碼，可以在瀏覽器進行模擬開發，調試還是比較方便的。但是部分機型定位問題需要真機定位，有什么好的辦法了。
**<font color=red>對于部分需要真機調試有沒有什么好的辦法了？？</font>**
####1. IOS 移動端 （Safari開發者工具）
手機端：設置 → Safari → 高級 → Web 檢查器 → 開。
mac端：Safari → 偏好設置 → 高級 → 在菜單欄中顯示“開發”菜單。
在 OS X 中啟動 Safari 之后，以 USB 電纜正常接入 iOS 設備，并在此移動設備上啟動 Safari。此時點擊計算機上的 Safari 菜單中的“開發”，可以看到有 iOS 設備的名稱顯示，其子菜單項即為移動設備上 Safari 的所有標簽頁，點擊任意一個開始調試。
---
<br>
####2. 安卓移動端
* **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，如下：
~~~javascript
if (Build.VERSION.SDK_INT >=Build.VERSION_CODES.KITKAT) {
WebView.setWebContentsDebuggingEnabled(true);
}
~~~
以上配置方法適用于安卓應用內所有的WebView情形。
安卓WebView是否可調試并不取決于應用中manifest的標志變量debuggable，如果你想只在debuggable為true時候允許WebView遠程調試，請使用以下代碼段：
~~~javascript
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](http://www.genymotion.net/) ，一樣的，想測什么版本，就自己下rom ，當然土豪當我沒說。
<br>
* **UC開發者瀏覽器**
由于不推薦移動端使用UC，所以我只簡單說一下，如果是在有興趣，請自行查看： http://plus.uc.cn/document/webapp/doc5.html
它的調試方法與chrome差異不大。
<br>
<br>
###客戶端調試
最麻煩的還是調試客戶端代碼以及基于微信開發的代碼（現在微信已經有了web開發者工具：[微信web開發者工具](https://mp.weixin.qq.com/wiki/10/e5f772f4521da17fa0d7304f68b97d7e.html)）
那么對于客戶端方式有什么好的辦法了？？
<br>
####alert方式：
這是最low的方式，卻也是最有效的方法，通過不斷的alert，最后找到出錯的代碼位置。
<br>
####利用JS原生的捕獲代碼：
* 利用window.onerror方法
~~~javascript
window.onerror = function(errorMessage,scriptURI,lineNumber,columnNumber,error) {
alert( "真不幸，又出錯了\n"
+ "\n錯誤信息：" + errorMessage
+ "\n所在文件：" + scriptURI
+ "\n錯誤行號：" + lineNumber
+ "\n錯誤列號：" + columnNumber
);
};
~~~
* 利用try-catch方法
將可能報錯的代碼放入try代碼塊中，如果報錯，就在catch中捕獲錯誤
~~~javascript
try {
// 在這里運行代碼
}
catch(err) {
// 在這里捕獲并處理錯誤
}
~~~
<br>
####利用Rosin插件
利用Fiddler抓包，并通過Rosin獲取調試信息
Rosin是一個Fiddler插件，協助開發者進行移動端頁面開發調試，是移動端web開發、調試利器。
具體使用方法見插件地址：http://alloyteam.github.io/Rosin/
<br>
####利用vConsole調試面板
vConsole 是一個網頁前端調試面板，專為手機 web 頁面量身設計，幫助開發者更為便捷地進行開發調試工作。
具體使用方法見插件地址：https://github.com/WechatFE/vConsole
<br>
####使用 Weinre 調試
該方法是比較老的一種方法，對于其他的調試方法來說屬于刀耕火種型的。weinre是一個調試包，本身提供一個JavaScript，需要你在項目文件中加入該js。首先安裝Weinre，我們用nodejs安裝之，使用-g全局命令，以便可以在各個目錄下訪問：
>npm install -g weinre
安裝weinre之后再設置監聽本機的ip:
> weinre --boundHost xxxxxxxxxxx
然后打開返回的地址的說明文檔，然后把返回的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 等常用功能，但是它兼容性強，可以實現基礎調試功能。
