在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的原創技術文章，請關注公眾號"汪子熙"或者掃描下面二維碼:

來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/24475491/viewspace-2212342/，如需轉載，請註明出處，否則將追究法律責任。