在Windows笔记本上调试运行在iOS设备上的前端应用
我在每天工作中需要在不同的移動設備上測試我們開發的前端應用是否正常工作,比如iOS設備和Android設備。我用的工作筆記本電腦又是Lenovo的,安裝的是Windows操作系統。
有的時候一個開發好的前端應用,在Android設備上正常工作,但是在iOS平板上測試卻發現問題(相當廣大前端開發者都曾經遇到過類似問題)。順手就想調試一下找到原因。那么一個前端應用運行在iOS設備上,程序員如何在安裝了Windows系統的筆記本上進行調試呢?
假設我的前端應用是這個url:https://jerrylist.cfapps.eu10.hana.ondemand.com/ui5/。
在IPAD上打開界面如下:
1. 在Windows筆記本電腦上安裝iTunes: https://www.apple.com/cn/itunes/download/
安裝后,您的Windows筆記本電腦才能成功和iOS設備連接并成功識別它。
2. 到iOS設備上,菜單iPad->Settings->Safari->Advanced,打開“Web Inspector” 選項。
3. 從github網站下載ios-webkit-debug-proxy-win32:
https://github.com/artygus/ios-webkit-debug-proxy-win32
將zip解壓到一個文件夾里,然后把這個文件夾加到Path環境變量里。
4. 在Windows系統的CMD里,敲入下面的命令行:
ios_webkit_debug_proxy.exe -f chrome-devtools://devtools/bundled/inspector.html
收到Windows成功監聽iOS設備事件的消息:
Listing devices on: 9221
Connected: 9222 to Jerry’s iPad
在瀏覽器里訪問:http://localhost:9221
從結果列表里就看到我的iOS設備了。
點localhost:9222的超鏈接,然后就可以看到另一個超鏈接,代表了我的IPad的Safari當前打開的網頁:
點這個超鏈接,Windows筆記本電腦上的Chrome開發者工具就自動打開了。在IPad上會彈出一個詢問您是否允許調試的對話框。點“Approve”按鈕,就可以開始在Windows電腦上調試遠端連接的iOS設備上的前端應用啦!
要獲取更多Jerry的原創技術文章,請關注公眾號"汪子熙"或者掃描下面二維碼:
總結
以上是生活随笔為你收集整理的在Windows笔记本上调试运行在iOS设备上的前端应用的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: jquery插件Jplayer如何使用
- 下一篇: HTML5应用 + Cordova =