在移動(dòng)端開發(fā)中寥掐，開發(fā)過程通常是先用chrome的手機(jī)瀏覽器模擬器模擬開發(fā)頁面在手機(jī)瀏覽器中的顯示古瓤。但是通常由于瀏覽器自身的實(shí)現(xiàn)方式頁面解析方式不一樣膀藐，往往在模擬器上顯示正常的頁面媚值，在真是移動(dòng)端瀏覽器中顯示異常。包括一些事件觸發(fā)動(dòng)作也得不到很好的調(diào)試藐握。
下邊介紹幾個(gè)月的h5開發(fā)總結(jié)出來的移動(dòng)端調(diào)試方式：
1.log方式
通過console.log()方式靴拱，將代碼執(zhí)行關(guān)鍵過程輸出出來，基本可以定位問題出現(xiàn)位置猾普，但這種方式對(duì)于頁面樣式問題無能為力袜炕；
2.chrome模擬器調(diào)試
還是要介紹下chrome的模擬器調(diào)試（萬一有人不知道呢~），其實(shí)這是最長(zhǎng)用的開發(fā)調(diào)試方式了初家，對(duì)于大部分瀏覽器webkit內(nèi)核瀏覽器適用偎窘，關(guān)鍵還可以選擇各種機(jī)型；
正確的打開方式
打開chrome瀏覽器windows按F12笤成、mac按option+command+i 進(jìn)入開發(fā)者工具界面评架，于是，任性地調(diào)試?yán)瞺
3.Weinre
Weinre 是<strong>WE</strong>b <strong>IN</strong>spector <strong>RE</strong>mote.是一個(gè)web頁面調(diào)試工具和檢查工具炕泳，通過weinre可以PC和手機(jī)纵诞，在PC中操作頁面跟手機(jī)操作一樣，完成頁面的調(diào)試培遵。
weinre安裝使用
（1）安裝
sudo npm -g install weinre
（2）啟動(dòng)
weinre --httpPort 8081 --boundHost -all-
啟動(dòng)成功浙芙，訪問地址http://localhost:8081/
如圖：
（3）web頁面引入腳本诽里，項(xiàng)目啟動(dòng)
將生產(chǎn)的javascript 標(biāo)簽引入自己開發(fā)的web頁面中亡鼠，啟動(dòng)項(xiàng)目；
http://10.242.101.173:8081/target/target-script-min.js#anonymous
Example:
<script src="http://10.242.101.173:8081/target/target-script-min.js#anonymous"></script>
（4）調(diào)試
頁面跑起來以后通過訪問http://10.242.101.173:8081/client/#anonymous
就可以看到所有訪問這個(gè)頁面的手機(jī)啦
4.chrome移動(dòng)端遠(yuǎn)程調(diào)試
使用步驟：
（1）手機(jī)皇耗、PC都有chrome瀏覽器南窗；
（2）數(shù)據(jù)線連接PC和手機(jī)，手機(jī)開啟調(diào)試模式；
（3）chrome瀏覽器地址欄輸入chrome://inspect万伤，就可以調(diào)試手機(jī)版的chrome頁面啦
5窒悔、微信web開發(fā)者工具
微信今年推出了 web 開發(fā)者工具，能夠幫助開發(fā)者更方便敌买、更安全地開發(fā)和調(diào)試基于微信的網(wǎng)頁简珠，它是一個(gè)桌面應(yīng)用，通過模擬微信客戶端的表現(xiàn)虹钮，使得開發(fā)者可以使用這個(gè)工具方便地在 PC 或者 Mac 上進(jìn)行開發(fā)和調(diào)試工作聋庵。
通過微信web開發(fā)者工具可以：
- 使用自己的微信號(hào)來調(diào)試微信網(wǎng)頁授權(quán)
- 調(diào)試、檢驗(yàn)頁面的 JS-SDK 相關(guān)功能與權(quán)限芙粱，模擬大部分 SDK 的輸入和輸出
- 使用基于 weinre 的移動(dòng)調(diào)試功能
- 利用集成的 Chrome DevTools 協(xié)助開發(fā)
使用步驟
(1)下載微信web開發(fā)者工具
(2)安裝打開祭玉，并登錄調(diào)試；
界面如下圖所示宅倒，想進(jìn)行頁面調(diào)試首先需要登錄攘宙，如果只是模擬器上調(diào)試頁面內(nèi)容屯耸，在地址欄直接輸入網(wǎng)址拐迁；通過js-sdk可以看到微信微信分享之后的各個(gè)字段內(nèi)容；點(diǎn)移動(dòng)調(diào)試按鈕按按步驟設(shè)置一下手機(jī)代理即可疗绣，甚是方便线召；
6、UC瀏覽器開發(fā)者版
UC瀏覽器總是時(shí)不時(shí)報(bào)出奇奇怪怪的問題多矮，而其他瀏覽器又不會(huì)出現(xiàn)這種問題缓淹，所以很郁悶但又無能為力，我也是最近才知道原來UC瀏覽器有開發(fā)者版本哦塔逃；
主要功能
- DOM查看和修改
- JavaScript調(diào)試讯壶、CSS調(diào)試
- 網(wǎng)絡(luò)狀態(tài)查看
- 資源文件查看
- Console控制臺(tái)
正確的使用方式
（1）進(jìn)入U(xiǎn)C官方網(wǎng)站開發(fā)者中心（網(wǎng)站地址），下載Android平臺(tái)的UC瀏覽器開發(fā)者版湾盗，安裝到手機(jī)中伏蚊。
（2）PC機(jī)一臺(tái)，并在PC上安裝Chrome或Safari（推薦使用Chrome）格粪。支持Chrome15–Chrome21躏吊，以及Safari5.1.4以上版本。下載ADB工具到PC中帐萎。
參考
Weinre Home
chrome手機(jī)端調(diào)試
微信web開發(fā)者工具開發(fā)文檔
UC瀏覽器開發(fā)者版本文檔
