前言
隨着html5和nodejs的興起。web APP越來越火，一套代碼可以多平台使用。減少了很大的開發成本。很多APP中也集成了很多的html5頁面，增強很高的應用體驗。所以移動端頁面也事關重要！
正文
移動端開發中最大的難度就是調試頁面...，不同的瀏覽器，不同的移動設備.....想想都酸爽！！！哈哈哈哈哈哈哈哈哈~~~~~~~~~
本文檔介紹基於chrome瀏覽器的調試！！！
准備工作：一根數據線、一個調試設備（也可以是多個，看公司舍得買調試設備不），fanqiang軟件、開發電腦（windows）
調試步驟：1、Android手機：安裝手機chrome瀏覽器
2、打開手機“開發者模式”（一般都是在“關於手機”中連續多次點擊“版本號”就能打開），並在開發者模式中打開“允許USB調試”
3、iphone手機：打開“web檢查器”，有的可能會有“javaScript”都打開
4、fanqiang出去，能在瀏覽器訪問www.google.com則是fanqiang成功，iphone手機需要進行附加步驟再回到第五步！！！
5、在瀏覽器地址欄輸入
1 chrome://inspect/#devices
圖1
6、成功連接的界面如圖1
7、點擊 inspect 便可以調試，調試界面如圖2所示
圖2
附加步驟：1、PC下載iTunes。並打開
2、下載 ios-webkit-debug-proxy-win32 （ios-webkit-debug-proxy 是一個 DevTools proxy ，項目托管在 Github 上。其使得開發者可以發送命令到真實（或虛擬）IOS設備中的 Safari 瀏覽器或 UIWebViews 。）（我會上傳壓縮包，可以再資源內查找）
github地址：https://github.com/artygus/ios-webkit-debug-proxy-win32
3、解壓 ios-webkit-debug-proxy-win32 ，放到c盤根目錄下面
4、配置環境變量 中 系統變量 中 path 加上 c:\ios-webkit-debug-proxy-win32
5、在DOS命令下 輸入
1 c:\ios-webkit-debug-proxy-win32\ios_webkit_debug_proxy.exe -f chrome-devtools://devtools/bundled/inspector.html
結果如圖3所示
圖3（當前沒有連接設備）
6、打開瀏覽器地址欄輸入 http://localhost:9221/ 顯示當前鏈接設備清單
7、選擇要調試的設備的鏈接，右鍵選擇“復制鏈接地址”並在新窗口打開 ，回到正常步驟第5步
異常情況：1、點擊inspect 之后，一直轉圈，不會出現頁面。排查是否 fanqiang 成功
2、ios 提示
1 Note: Your browser may block1,2 the above links with JavaScript console error: 2 Not allowed to load local resource: chrome-devtools://... 3 To open a link: right-click on the link (control-click on Mac), 'Copy Link Address', and paste it into address bar.
在localhost:9221頁面中鏈接一定得右鍵“復制鏈接地址”再新窗口打開
結束總結
本次分享也自己走了一遍流程，重溫了一下，挺好的。。。。。
分享到此結束，有問題歡迎留言！！！