《開發技巧》WEB APP開發調試技巧

前言

　　隨着html5和nodejs的興起。web APP愈來愈火，一套代碼能夠多平臺使用。減小了很大的開發成本。不少APP中也集成了不少的html5頁面，加強很高的應用體驗。因此移動端頁面也事關重要！

正文

　　移動端開發中最大的難度就是調試頁面...，不一樣的瀏覽器，不一樣的移動設備.....想一想都酸爽！！！哈哈哈哈哈哈哈哈哈~~~~~~~~~

　　本文檔介紹基於chrome瀏覽器的調試！！！

　　準備工做：一根數據線、一個調試設備（也能夠是多個，看公司捨得買調試設備不），fanqiang軟件、開發電腦（windows）

　　調試步驟：一、Android手機：安裝手機chrome瀏覽器

　　　　　　　二、打開手機「開發者模式」（通常都是在「關於手機」中連續屢次點擊「版本號」就能打開），並在開發者模式中打開「容許USB調試」

　　　　　　　三、iphone手機：打開「web檢查器」，有的可能會有「javaScript」都打開

　　　　　　　四、fanqiang出去，能在瀏覽器訪問www.google.com則是fanqiang成功，iphone手機須要進行附加步驟再回到第五步！！！

　　　　　　　五、在瀏覽器地址欄輸入　　

　　　　　　　　 1 chrome://inspect/#devices 

　　　　　　　　　　 

圖1

　　　　　　　六、成功鏈接的界面如圖1

　　　　　　　七、點擊 inspect 即可以調試，調試界面如圖2所示

　

圖2

　　附加步驟：一、PC下載iTunes。並打開

　　　　　　　二、下載   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

　　　　　　　三、解壓 ios-webkit-debug-proxy-win32 ，放到c盤根目錄下面

　　　　　　　四、配置環境變量 中 系統變量 中 path 加上 c:\ios-webkit-debug-proxy-win32

　　　　　　　五、在DOS命令下 輸入

　　　　　　　1 c:\ios-webkit-debug-proxy-win32\ios_webkit_debug_proxy.exe -f chrome-devtools://devtools/bundled/inspector.html 

　　　　　　　 結果如圖3所示

圖3（當前沒有鏈接設備）

　　　　　　　六、打開瀏覽器地址欄輸入 http://localhost:9221/ 顯示當前連接設備清單

　　　　　　　七、選擇要調試的設備的連接，右鍵選擇「複製連接地址」並在新窗口打開 ，回到正常步驟第5步

 

　　異常狀況：一、點擊inspect 以後，一直轉圈，不會出現頁面。排查是否 fanqiang 成功

　　　　　　　二、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頁面中連接必定得右鍵「複製連接地址」再新窗口打開

結束總結

　　本次分享也本身走了一遍流程，重溫了一下，挺好的。。。。。

 

分享到此結束，有問題歡迎留言！！！